Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Wednesday, November 30, 2011

သႂ်ႇ Featured content slider ပၼ်ၼႂ်းဝႅပ်ႉသၢႆႉတ်/ပလွၵ်ႉၶ်

မႂ်ႇသုင်သေၵမ်းၶႃႈၼေႃႈ။မိူဝ်ႈၼႆႉၶႃႈႁဝ်းမီးၶွင်လီၽၢၵ်ႈတွၼ်ႈပၼ်ထိုင်တႆးၵေႃႉႁဝ်းၶဝ်ၸိူဝ်းသူင်ၸႂ်သၢင်ႈဝႅပ်ႉသၢႆႉတ်/ပလွၵ်ႉၶ်ႁဝ်းၶဝ်ၶႃႈဢေႃႈ။ တႆးၵေႃႉႁဝ်းၶဝ်တႄႉတေဝႃႈႁိုဝ်ဢမ်ႇႁူႉ၊ လွင်ႈ Featured content slider ၼႆႉၶႃႈႁဝ်းႁႃမႃးတၢင်းႁိုင်ၶႃႈဢေႃႈ။
ႁၼ်ယူႇၵူၺ်းဢမ်ႇမႅၼ်ႈၸႂ်လႄႈႁႃဢၼ်ၼိုင်ႈယဝ်ႉဢၼ်ၼိုင်ႈယူႇႁဵတ်းၼၼ်တိၵ်းတိၵ်းၶႃႈယဝ်ႉ။ ယွၼ်ႉၼၼ်ဝၢႆးႁႃႁၼ်ယဝ်ႉၵေႃႈမီးၸႂ်ၶႂ်ႈၸႅၵ်ႇၽေပၼ်တႆးၵေႃႉႁဝ်းၶဝ်ၼႆၶႃႈဢေႃႈ။ လွၵ်းလၢႆးသႂ်ႇမၼ်းတႄႉမိူၼ်ၼင်ႇၶႃႈႁဝ်းယၢမ်ႈလၢတ်ႈမႃးၼၼ်ႉၶႃႈယဝ်ႉ။ "ဢမ်ႇယၢပ်ႇသင်" ၼႆၶႃႈဢေႃႈ။ တူၺ်းလၢႆးႁဵတ်းမၼ်းၶႃႈ။


ပေႃးထိုင်တီႈၼႆႈယဝ်ႉ၊ ၼဵၵ်း Ctr+F ၸွမ်းၵၼ်သေႁႃ </code> ၼႆႉသေၵမ်းၶႃႈ။
ပေႃးႁၼ်ယဝ်ႉၼႆ Copy ဢဝ် Code (1)ၼႆႉသေၵႂုႇသႂ်ႇၼိူဝ် </code> ၼၼ်ႉသေၵမ်း

တွၼ်ႈၼိုင်ႈ
Code (1)


* Copy below code and paste before </head>



<style type='text/css'>

#s3slider {

background: none repeat scroll 0 0 #FFFFFF;

border: 4px solid #149CD5;

height: 280px;

margin-bottom: 25px;

margin-top: 0;

overflow: hidden;

position: relative;

text-shadow: 0 1px 0 #000000;

width: 585px;

}

#s3sliderContent {

background: none repeat scroll 0 0 #FFFFFF;

height: 300px;

list-style: none outside none;

margin-left: 0;

overflow: hidden;

padding: 0;

position: absolute;

top: -14px;

width: 585px;

}

.s3sliderImage {

float: left;

position: relative;

width: 585px;

}

.s3sliderImage span {

background-color: #000000;

color: #FFFFFF;

display: none;

font-size: 12px;

height: 300px;

line-height: 16px;

opacity: 0.7;

overflow: hidden;

padding: 10px 13px;

position: absolute;

right: 0;

top: 0;

width: 180px;

}

.s3sliderImage strong a {

font-family: 'Myriad Pro',Helvetica,Arial,Sans-Serif;

font-size: 20px;

}

.s3sliderImage strong a:hover {

color: #FFFFFF;

}

</style>



<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>



<script type='text/javascript'>

//<![CDATA[

/* ------------------------------------------------------------------------

s3Slider



Developped By: Boban Karišik -> http://www.serie3.info/

        CSS Help: Mészáros Róbert -> http://www.perspectived.com/

Version: 1.0



Copyright: Feel free to redistribute the script/modify it, as

      long as you leave my infos at the top.

-------------------------------------------------------------------------- */





(function($){



    $.fn.s3Slider = function(vars) {      



        var element     = this;

        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;

        var current     = null;

        var timeOutFn   = null;

        var faderStat   = true;

        var mOver       = false;

        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");

        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");



        items.each(function(i) {



            $(items[i]).mouseover(function() {

               mOver = true;

            });



            $(items[i]).mouseout(function() {

                mOver   = false;

                fadeElement(true);

            });



        });



        var fadeElement = function(isMouseOut) {

            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;

            thisTimeOut = (faderStat) ? 10 : thisTimeOut;

            if(items.length > 0) {

                timeOutFn = setTimeout(makeSlider, thisTimeOut);

            } else {

                console.log("Poof..");

            }

        }



        var makeSlider = function() {

            current = (current != null) ? current : items[(items.length-1)];

            var currNo      = jQuery.inArray(current, items) + 1

            currNo = (currNo == items.length) ? 0 : (currNo - 1);

            var newMargin   = $(element).width() * currNo;

            if(faderStat == true) {

                if(!mOver) {

                    $(items[currNo]).fadeIn((timeOut/6), function() {

                        if($(itemsSpan[currNo]).css('bottom') == 0) {

                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {

                                faderStat = false;

                                current = items[currNo];

                                if(!mOver) {

                                    fadeElement(false);

                                }

                            });

                        } else {

                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {

                                faderStat = false;

                                current = items[currNo];

                                if(!mOver) {

                                    fadeElement(false);

                                }

                            });

                        }

                    });

                }

            } else {

                if(!mOver) {

                    if($(itemsSpan[currNo]).css('bottom') == 0) {

                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {

                            $(items[currNo]).fadeOut((timeOut/6), function() {

                                faderStat = true;

                                current = items[(currNo+1)];

                                if(!mOver) {

                                    fadeElement(false);

                                }

                            });

                        });

                    } else {

                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {

                        $(items[currNo]).fadeOut((timeOut/6), function() {

                                faderStat = true;

                                current = items[(currNo+1)];

                                if(!mOver) {

                                    fadeElement(false);

                                }

                            });

                        });

                    }

                }

            }

        }



        makeSlider();



    };



})(jQuery);

//]]>

</script>

<script type='text/javascript'>

$(document).ready(function() {

$('#s3slider').s3Slider({

timeOut: 4000

});

});

</script>

ပေႃးယဝ်ႉၵေႃႈၼဵၵ်း Save Template သေၵမ်းၶႃႈ။ သိုပ်ႇတူၺ်းၵႂုႇထႅင်ႈတွၼ်ႈသွင်ၵွၼ်ႇ

-------------------------------
တွၼ်ႈသွင်

ပေႃးယဝ်ႉတွၼ်ႈမၢႆၼိုင်ႈယဝ်ႉၸိုင် မႃးCopy ဢဝ် Code (2) သေၵႂုႇဝႆႉတီႈဢၼ်ႁဝ်းၶႂ်ႈဝႆႉဝၢင်းၼၼ်ႉသေၵမ်း။မိူၼ်ၼင်ႇၵႂုႇတီႈ Add a Gadget ယဝ်ႉၵေႃႈလိူၵ်ႈ HTML/JavaScript သေCopy ဢဝ် Code (2) ၼႆႉသေ Past ဝၢင်းသႂ်ႇၶႃႈလႄႈ၊ ပေႃးယဝ်ႉၵေႃႈ ၼဵၵ်းSave ၵေႃႈလႆႈယဝ်ႉဢေႃႈ။


Code (2)

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="http://3.bp.blogspot.com/_Ax-O2ayi6kU/TSGsLt4NWOI/AAAAAAAABCg/3Uukug-mi0w/s1600/1.jpg" />
<span><strong><a href="ADD HERE POST1 URL">ADD HERE POST1 TITLE</a></strong>
<p>ADD HERE POST1 SHORT DESCRIPTION...</p>
</span>
</li>
<li class="s3sliderImage">
<img src="http://4.bp.blogspot.com/_Ax-O2ayi6kU/TSGsL1QJGcI/AAAAAAAABCo/0SmBzB_AvBE/s1600/2.jpg" />
<span><strong><a href="ADD HERE POST2 URL">ADD HERE POST2 TITLE</a></strong>
<p>ADD HERE POST2 SHORT DESCRIPTION...</p>
</span>
</li>
<li class="s3sliderImage">
<img src="http://1.bp.blogspot.com/_Ax-O2ayi6kU/TSGsL0JWogI/AAAAAAAABCw/9iGwmQyS8qo/s1600/3.jpg" />
<span><strong><a href="ADD HERE POST3 URL">ADD HERE POST3 TITLE</a></strong>
<p>ADD HERE POST3 SHORT DESCRIPTION...</p>
</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

ႁၢင်ႈၽၢင်မၼ်းတေမိူၼ်ၼႆ


=============================================================================
ၸိူဝ်းၼႆႉၵေႃႈလိူၵ်ႈတူၺ်းသေလႆႈၸႂ်ဢၼ်လႂ်ၵေႃႈ ႁဵတ်းၸွမ်းၵႂုႇတၢင်းၼိူဝ်ၼႆႉၶႃႈလႄႈ၊ တေလႆႈဝႆႉသတိတွင်းဝႆႉဝႃႈမၼ်းမီး Code(1) လႄႈ Code(2)

ႁၢင်ႈၽၢင်ထႅင်ႈတၢင်ႇဢၼ်


Code (1)



<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script>

<script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script>

<script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>



<script type="text/javascript">

jQuery(document).ready(function() {

jQuery('#mycarousel').jcarousel({

wrap:"both",

scroll:2,

animation:"slow"

});

function mycarousel_initCallback(carousel) {

jQuery('#featured-next-button').bind('click', function() {

carousel.next();

return false;

});



jQuery('#featured-prev-button').bind('click', function() {

carousel.prev();

return false;

});

jQuery('.button-nav span').bind('click', function() {

carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));

return false;

});

};

jQuery('#feature-carousel').jcarousel({

wrap:"both",

scroll:1,

auto:10,

initCallback: mycarousel_initCallback,

buttonNextHTML: null,

buttonPrevHTML: null

});



});

</script>



<style type="text/css">

.jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;}



.jcarousel-skin-tango .jcarousel-container-horizontal {width: 941px;margin: 0 auto;padding:0 20px;}



.jcarousel-skin-tango .jcarousel-clip-horizontal {width: 941px;height: 254px;}

.jcarousel-skin-tango .jcarousel-item {width: 307px;height: 254px;}

.jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;}

.jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;}



.jcarousel-skin-tango .jcarousel-next-horizontal {

background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll -46px 0;

cursor:pointer;

height:254px;

right:20px;

position:absolute;

top:0;

width:46px;

}



.jcarousel-skin-tango .jcarousel-prev-horizontal {

background:transparent url(http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMVbjDoRI/AAAAAAAAAGc/qVMBXOUAnnY/s1600/image-slider-button.png) no-repeat scroll 0 0;

cursor:pointer;

height:254px;

left:20px;

position:absolute;

top:0;

width:46px;

}



.jcarousel-container {position: relative;}

.jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;}

.jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;}

.jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;}

.jcarousel-next {z-index: 3;display: none;}

.jcarousel-prev {z-index: 3;display: none;}



#news-slider{background-color:#FFFFFF;padding:20px 0;}

#news-slider img{border:none;height:254px;width:307px;}

</style>

----------------------------------------------

Code (2)


<div id='news-slider'>

<ul class='jcarousel-skin-tango' id='mycarousel'>

<li><a href='SLIDE-1-LINK-HERE'><img src='SLIDE-1-IMAGE-ADDRESS-HERE'/></a></li>

<li><a href='SLIDE-2-LINK-HERE'><img src='SLIDE-2-IMAGE-ADDRESS-HERE'/></a></li>

<li><a href='SLIDE-3-LINK-HERE'><img src='SLIDE-3-IMAGE-ADDRESS-HERE'/></a></li>

<li><a href='SLIDE-4-LINK-HERE'><img src='SLIDE-4-IMAGE-ADDRESS-HERE'/></a></li>

<li><a href='SLIDE-5-LINK-HERE'><img src='SLIDE-5-IMAGE-ADDRESS-HERE'/></a></li>

</ul>

</div>


=============================================================

ႁၢင်ႈၽၢင်ထႅင်ႈတၢင်ႇဢၼ်


Code (1)


<script type='text/javascript'>

//<![CDATA[



//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.

//** May 2nd, 08'- Script rewritten and updated to 2.0.

//** June 12th, 08'- Script updated to v 2.3, which adds the following features:

//1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later.

//2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former).

//3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example.



//** July 11th, 08'- Script updated to v 2.4:

//1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider")

//2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads.



var featuredcontentslider={



//3 variables below you can customize if desired:

ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>',

bustajaxcache: true, //bust caching of external ajax page after 1st request?

enablepersist: true, //persist to last content viewed when returning to page?



settingcaches: {}, //object to cache "setting" object of each script instance



jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually.

this.turnpage(this.settingcaches[fcsid], pagenumber)

},



ajaxconnect:function(setting){

var page_request = false

if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)

try {

page_request = new ActiveXObject("Msxml2.XMLHTTP")

}

catch (e){

try{

page_request = new ActiveXObject("Microsoft.XMLHTTP")

}

catch (e){}

}

}

else if (window.XMLHttpRequest) // if Mozilla, Safari etc

page_request = new XMLHttpRequest()

else

return false

var pageurl=setting.contentsource[1]

page_request.onreadystatechange=function(){

featuredcontentslider.ajaxpopulate(page_request, setting)

}

document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg

var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()

page_request.open('GET', pageurl+bustcache, true)

page_request.send(null)

},



ajaxpopulate:function(page_request, setting){

if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){

document.getElementById(setting.id).innerHTML=page_request.responseText

this.buildpaginate(setting)

}

},



buildcontentdivs:function(setting){

var alldivs=document.getElementById(setting.id).getElementsByTagName("div")

for (var i=0; i<alldivs.length; i++){

if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv"

setting.contentdivs.push(alldivs[i])

alldivs[i].style.display="none" //collapse all content DIVs to begin with

}

}

},



buildpaginate:function(setting){

this.buildcontentdivs(setting)

var sliderdiv=document.getElementById(setting.id)

var pdiv=document.getElementById("paginate-"+setting.id)

var phtml=""

var toc=setting.toc

var nextprev=setting.nextprev

if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){

for (var i=1; i<=setting.contentdivs.length; i++){

phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '

}

phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')

pdiv.innerHTML=phtml

}

var pdivlinks=pdiv.getElementsByTagName("a")

var toclinkscount=0 //var to keep track of actual # of toc links

for (var i=0; i<pdivlinks.length; i++){

if (this.css(pdivlinks[i], "toc", "check")){

if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents)

pdivlinks[i].style.display="none" //hide this toc link

continue

}

pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link

pdivlinks[i][setting.revealtype]=function(){

featuredcontentslider.turnpage(setting, this.getAttribute("rel"))

return false

}

setting.toclinks.push(pdivlinks[i])

}

else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next"

pdivlinks[i].onclick=function(){

featuredcontentslider.turnpage(setting, this.className)

return false

}

}

}

this.turnpage(setting, setting.currentpage, true)

if (setting.autorotate[0]){ //if auto rotate enabled

pdiv[setting.revealtype]=function(){

featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])

}

sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on

featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])

}

setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation

this.autorotate(setting)

}

},



urlparamselect:function(fcsid){

var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL

return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index

},



turnpage:function(setting, thepage, autocall){

var currentpage=setting.currentpage //current page # before change

var totalpages=setting.contentdivs.length

var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)

turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust

if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly

return

setting.currentpage=turntopage

setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex

this.cleartimer(setting, window["fcsfade"+setting.id])

setting.cacheprevpage=setting.prevpage

if (setting.enablefade[0]==true){

setting.curopacity=0

this.fadeup(setting)

}

if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)

setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")

setting.onChange(setting.prevpage, setting.currentpage)

}

setting.contentdivs[turntopage-1].style.visibility="visible"

setting.contentdivs[turntopage-1].style.display="block"

if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)

this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")

if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)

this.css(setting.toclinks[turntopage-1], "selected", "add")

setting.prevpage=turntopage

if (this.enablepersist)

this.setCookie("fcspersist"+setting.id, turntopage)

},



setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between)

var targetobject=setting.contentdivs[setting.currentpage-1]

if (targetobject.filters && targetobject.filters[0]){ //IE syntax

if (typeof targetobject.filters[0].opacity=="number") //IE6

targetobject.filters[0].opacity=value*100

else //IE 5.5

targetobject.style.filter="alpha(opacity="+value*100+")"

}

else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax

targetobject.style.MozOpacity=value

else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax

targetobject.style.opacity=value

setting.curopacity=value

},



fadeup:function(setting){

if (setting.curopacity<1){

this.setopacity(setting, setting.curopacity+setting.enablefade[1])

window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)

}

else{ //when fade is complete

if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)

setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")

setting.onChange(setting.cacheprevpage, setting.currentpage)

}

},



cleartimer:function(setting, timervar){

if (typeof timervar!="undefined"){

clearTimeout(timervar)

clearInterval(timervar)

if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div

setting.contentdivs[setting.cacheprevpage-1].style.display="none"

}

}

},



css:function(el, targetclass, action){

var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")

if (action=="check")

return needle.test(el.className)

else if (action=="remove")

el.className=el.className.replace(needle, "")

else if (action=="add")

el.className+=" "+targetclass

},



autorotate:function(setting){

window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])

},



getCookie:function(Name){

var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair

if (document.cookie.match(re)) //if cookie found

return document.cookie.match(re)[0].split("=")[1] //return its value

return null

},



setCookie:function(name, value){

document.cookie = name+"="+value



},





init:function(setting){

var persistedpage=this.getCookie("fcspersist"+setting.id) || 1

var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index

this.settingcaches[setting.id]=setting //cache "setting" object

setting.contentdivs=[]

setting.toclinks=[]

setting.topzindex=0

setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)

setting.prevpage=setting.currentpage

setting.revealtype="on"+(setting.revealtype || "click")

setting.curopacity=0

setting.onChange=setting.onChange || function(){}

if (setting.contentsource[0]=="inline")

this.buildpaginate(setting)

if (setting.contentsource[0]=="ajax")

this.ajaxconnect(setting)

}



}



//]]>

</script>



<style>

#slider4{

border: 2px solid #181818;

background: #ffffff;

margin-left: 9px;

}

#paginate-slider4{

border-color: #181818;

margin-left: 9px;

margin-top: 4px;

}

#paginate-slider4 a img{

width: 80px;

height: 60px;

border: 2px solid #181818;

margin-top: 5px;

}

#paginate-slider4 a img:hover, #paginate-slider4 a.selected img{

border: 2px solid #ffc04e;

}

.sliderwrapper{

position: relative; /*leave as is*/

overflow: hidden; /*leave as is*/

border: 10px solid navy;

width: 500px; /*width of featured content slider*/

height: 325px;

}

.sliderwrapper .contentdiv{

visibility: hidden; /*leave as is*/

position: absolute; /*leave as is*/

left: 0; /*leave as is*/

top: 0; /*leave as is*/

padding: 5px;

background: white;

width: 500px; /*width of content DIVs within slider. Total width should equal slider's inner width */

height: 100%;

filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);

-moz-opacity: 1;

opacity: 1;

}

.pagination{

width: 500px; /*Width of pagination DIV. Total width should equal slider's outer width */

text-align: right;

background-color: #ffffff;

padding: 0px 5px;

}

.pagination a{

padding: 0 5px;

text-decoration: none;

color: #181818;

background: #ffffff;

}

.pagination a:hover, .pagination a.selected{

color: #181818;

background-color: #ffffff;

}

</style>



Code (2)


<div style="float:left;">



<div id="slider4" class="sliderwrapper">



<div style="background: url('IMAGE-1-LINK') center left no-repeat" class="contentdiv">

</div>



<div style="background: url('IMAGE-2-LINK') center left no-repeat" class="contentdiv">

</div>



<div style="background: url('IMAGE-3-LINK') center left no-repeat" class="contentdiv">

</div>



<div style="background: url('IMAGE-4-LINK') center left no-repeat" class="contentdiv">

</div>



<div style="background: url('IMAGE-5-LINK') center left no-repeat" class="contentdiv">

</div>



</div>



<div id="paginate-slider4">



<a href="#" class="toc"><img alt="IMAGE-1" src="IMAGE-1-THUMBNAIL-LINK"/></a>



<a href="#" class="toc"><img alt="IMAGE-2" src="IMAGE-2-THUMBNAIL-LINK"/></a>



<a href="#" class="toc"><img alt="IMAGE-3" src="IMAGE-3-THUMBNAIL-LINK"/></a>



<a href="#" class="toc"><img alt="IMAGE-4" src="IMAGE-4-THUMBNAIL-LINK"/></a>



<a href="#" class="toc"><img alt="IMAGE-5" src="IMAGE-5-THUMBNAIL-LINK"/></a>



</div>



<script type="text/javascript">

featuredcontentslider.init({

id: "slider4", //id of main slider DIV

contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]

toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]

nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.

revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"

enablefade: [true, 0.1], //[true/false, fadedegree]

autorotate: [true, 5000], //[true/false, pausetime]

onChange: function(previndex, curindex){ //event handler fired whenever script changes slide

//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)

//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)

}

})

</script>



</div>


==========================================================

ႁၢင်ႈၽၢင်ထႅင်ႈတၢင်ႇဢၼ်


Code (1)


<script type='text/javascript'>

//<![CDATA[

/* ------------------------------------------------------------------------

s3Slider



-------------------------------------------------------------------------- */





(function($){



    $.fn.s3Slider = function(vars) {      

    

        var element     = this;

        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;

        var current     = null;

        var timeOutFn   = null;

        var faderStat   = true;

        var mOver       = false;

        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");

        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

        

        items.each(function(i) {



            $(items[i]).mouseover(function() {

               mOver = true;

            });

        

            $(items[i]).mouseout(function() {

                mOver   = false;

                fadeElement(true);

            });

        

        });

    

        var fadeElement = function(isMouseOut) {

            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;

            thisTimeOut = (faderStat) ? 10 : thisTimeOut;

            if(items.length > 0) {

                timeOutFn = setTimeout(makeSlider, thisTimeOut);

            } else {

                console.log("Poof..");

            }

        }

    

        var makeSlider = function() {

            current = (current != null) ? current : items[(items.length-1)];

            var currNo      = jQuery.inArray(current, items) + 1

            currNo = (currNo == items.length) ? 0 : (currNo - 1);

            var newMargin   = $(element).width() * currNo;

            if(faderStat == true) {

                if(!mOver) {

                    $(items[currNo]).fadeIn((timeOut/6), function() {

                        if($(itemsSpan[currNo]).css('bottom') == 0) {

                            $(itemsSpan[currNo]).slideUp((timeOut/20), function() {

                                faderStat = false;

                                current = items[currNo];

                                if(!mOver) {

                                    fadeElement(false);

                                }

                            });

                        } else {

                            $(itemsSpan[currNo]).slideDown((timeOut/20), function() {

                                faderStat = false;

                                current = items[currNo];

                                if(!mOver) {

                                    fadeElement(false);

                                }

                            });

                        }

                    });

                }

            } else {

                if(!mOver) {

                    if($(itemsSpan[currNo]).css('bottom') == 0) {

                        $(itemsSpan[currNo]).slideDown((timeOut/20), function() {

                            $(items[currNo]).fadeOut((timeOut/20), function() {

                                faderStat = true;

                                current = items[(currNo+1)];

                                if(!mOver) {

                                    fadeElement(false);

                                }

                            });

                        });

                    } else {

                        $(itemsSpan[currNo]).slideUp((timeOut/20), function() {

                        $(items[currNo]).fadeOut((timeOut/20), function() {

                                faderStat = true;

                                current = items[(currNo+1)];

                                if(!mOver) {

                                    fadeElement(false);

                                }

                            });

                        });

                    }

                }

            }

        }

    

        makeSlider();



    };



})(jQuery);

//]]>

</script>

<script type='text/javascript'>

$(document).ready(function() {

$('#s3slider').s3Slider({

timeOut: 4000

});

});

</script>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>

<style type='text/css'>



/* Styles for the slideshow */

.crosscol {

background: #000;

width: 540px;

height: 280px;

padding: 0;

margin-top: 16px;

margin-bottom: 40px;

}

#s3slider {

width: 580px; /* important to be same as image width */

height: 280px; /* important to be same as image height */

position: relative; /* important */

overflow: hidden; /* important */

left: 0px;

}

#s3sliderContent {

width: 540px; /* important to be same as image width or wider */

position: absolute; /* important */

margin-left: 0; /* important */

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

#s3sliderContent {

}

}

.s3sliderImage {

float: left; /* important */

position: relative; /* important */

display: none; /* important */

list-style: none;

}

.s3sliderImage span {

position: absolute; /* important */

left: 0;

font: 12px Arial, Helvetica, sans-serif;

padding: 10px 20px 15px 20px;

width: 500px;

background-color: #000;

filter: alpha(opacity=70); /* here you can set the opacity of box with text */

-moz-opacity: 0.7; /* here you can set the opacity of box with text */

-khtml-opacity: 0.7; /* here you can set the opacity of box with text */

opacity: 0.7; /* here you can set the opacity of box with text */

color: #fff;

display: none; /* important */

bottom: 0;

/*

if you put

top: 0; -> the box with text will be shown at the top of the image

if you put

bottom: 0; -> the box with text will be shown at the bottom of the image

*/

}

.s3sliderImage strong a{

color: #FFF;

font-family: 'Helvetica', arial, sans-serif;

font-size:14px;

text-transform: uppercase;

font-weight: bold;

}

.s3sliderImage strong a:hover{

text-decoration: none;

}

.clear {

clear: both;

}



</style>





* Now click to save your blogger Template.





Code (2)


<div class='crosscol'>

<div id='s3slider'>



<ul id='s3sliderContent'>

<li class='s3sliderImage'>

<img src='https://lh3.googleusercontent.com/-7MJJy6yLor4/TY7TPy_hYPI/AAAAAAAACSo/GVn5p5yA8Wo/s1600/1.jpg'/>

<span><strong><a href='ADD HERE POST1 URL'>ADD HERE POST1 TITLE</a></strong>

<p>ADD HERE POST1 SHORT DESCRIPTION.</p>

</span>

</li>

<li class='s3sliderImage'>

<img src='https://lh6.googleusercontent.com/-RncqsMiL_kY/TY7TRb5iy2I/AAAAAAAACSs/f8S-8BPfsHw/s1600/2.jpg'/>

<span><strong><a href='ADD HERE POST2 URL'>ADD HERE POST2 TITLE</a></strong>

<p>ADD HERE POST2 SHORT DESCRIPTION.</p>

</span>

</li>



<li class='s3sliderImage'>

<img src='https://lh4.googleusercontent.com/-jW35-fP4Abw/TY7TS-Fe2tI/AAAAAAAACSw/VZpCxcgwFbU/s1600/3.jpg'/>

<span><strong><a href='ADD HERE POST3 URL'>ADD HERE POST3 TITLE</a></strong>

<p>ADD HERE POST3 SHORT DESCRIPTION.</p>

</span>

</li>

<li class='s3sliderImage'>

<img src='https://lh6.googleusercontent.com/-OhqhfiteUmA/TY7TT8S07lI/AAAAAAAACS0/1Uv3aKNq5mI/s1600/4.jpg'/>

<span><strong><a href='ADD HERE POST4 URL'>ADD HERE POST4 TITLE</a></strong>

<p>ADD HERE POST4 SHORT DESCRIPTION.</p>

</span>

</li>

<li class='s3sliderImage'>



<img src='http://1.bp.blogspot.com/-P4Z9STzFr7k/TfwV39oksSI/AAAAAAAACTo/y_QpXSruq_s/s1600/5.jpg'/>

<span><strong><a href='ADD HERE POST5 URL'>ADD HERE POST5 TITLE</a></strong>

<p>ADD HERE POST5 SHORT DESCRIPTION.</p>

</span>

</li>

<div class='clear s3sliderImage'></div>

</ul>

</div>


======================

ႁႂ်ႈၵၢမ်ႇလီသေၵမ်းၶႃႈ ႉႉႉႉႉ

No comments:

Post a Comment