Kumpulan Featured Slider Slide Show Widget Terbaik Untuk Blogspot with Jquerry
Slider / Slide Show Widget dalam blog memang sangat menawan, apalagi buat Anda yang ingin Blognya tampil Interaktif / untuk Membantu media Promosi.
Dibawah berikut adalah beberapa Kumpulan Slider / Slide Show Widget untuk Blogspot dengan memakai Jquerry yang sudah berhasil dikumpulkan . Namun dengan keterbatasan waktu , penulis belum sempat mencoba semuanya, juga bisa memberi demonya. Namun melihat dari situs2 yang menulisnya, hampir semuanya berjalan dengan baik. Semoga kalian menyukainya..
Note : Sebelum Anda mencobanya disarankan untuk Membackup dulu Template Anda
1. Featured Content Slider Widget for Blogger Using jQuerySilahkan Ikuti Petunjuknya :
1) Silahkan anda masuk ke Design --> Edit HTML --> lalu centang kotak "expand widget template"
2) Silahkan Anda cari Code ]]></b:skin> , setelah menemukannya silahkan Anda masukan code di bawah berikut sebelum code diatas:
#featured{ width:400px; padding-right:250px; position:relative; height:250px; background:#fff; border:5px solid #ccc; } #featured ul.ui-tabs-nav{ position:absolute; top:0; left:400px; list-style:none; padding:0; margin:0; width:250px; } #featured ul.ui-tabs-nav li{ padding:1px 0; padding-left:13px; font-size:12px; color:#666; } #featured ul.ui-tabs-nav li span{ font-size:11px; font-family:Verdana; line-height:18px; } #featured .ui-tabs-panel{ width:400px; height:250px; background:#999; position:relative; overflow:hidden; } #featured .ui-tabs-hide{ display:none; } #featured li.ui-tabs-nav-item a{/*On Hover Style*/ display:block; height:60px; color:#333; background:#fff; line-height:20px; outline:none; } #featured li.ui-tabs-nav-item a:hover{ background:#f2f2f2; } #featured li.ui-tabs-selected{ /*Selected tab style*/ background:url(selected-item.gif) top left no-repeat; } #featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; } #featured ul.ui-tabs-nav li img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; } #featured .ui-tabs-panel .info{ position:absolute; top:180px; left:0; height:70px; width: 400px; background: url(transparent-bg.png); } #featured .info h2{ font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; } #featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0; } #featured .info a{ text-decoration:none; color:#fff; } #featured .info a:hover{ text-decoration:underline; }
3) Sekarang Anda cari lagi code yang sama tadi ]]></b:skin> , silahkan Anda masukan code dibawah setelahnya..
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js type=text/javascript/> <script src=http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js type=text/javascript/> <script type=text/javascript> $(document).ready(function(){ $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true); }); </script>
4) Sekarang Save Template Anda
5) Sekarang Anda masuk Page Element / Edit Laman --> add widget --> pilih HTML, silahkan Anda masukan kode dibawah :
<div id=featured>
<ul class=ui-tabs-nav>
<li class=ui-tabs-nav-item ui-tabs-selected id=nav-fragment-1><a href=#fragment-1><img alt=pic1 src=http://i49.tinypic.com/e1aohv.jpg/><span>Install Mac OS X on Intel/AMD PC using iATKOS v7</span></a></li>
<li class=ui-tabs-nav-item id=nav-fragment-2><a href=#fragment-2><img alt=blogger src=http://i438.photobucket.com/albums/qq108/fooble11/image2-small.jpg/><span>How to remove "showing post with label" in Blogger</span></a></li>
<li class=ui-tabs-nav-item id=nav-fragment-3><a href=#fragment-3><img alt=buzz src=http://i438.photobucket.com/albums/qq108/fooble11/new1.jpg/><span>How to add Google Buzz to Blogspot blog</span></a></li>
<li class=ui-tabs-nav-item id=nav-fragment-4><a href=#fragment-4><img alt=chat src=http://i50.tinypic.com/34xfg4m.jpg/><span>Chat live with your blog visitors using Yahoo Pingbox</span></a></li>
</ul>
<!-- First Content -->
<div class=ui-tabs-panel id=fragment-1 style=>
<img alt=mac src=http://i47.tinypic.com/rsbi80.jpg/>
<div class=info>
<h3><a href=#>Install Mac OS X on Intel/AMD PC using iATKOS v7</a></h3>
<p>Description goes here, this is just a test description....<a href=http://www.bloggermint.com/2010/02/install-mac-os-x-on-intelamd-pc-using.html>read more</a></p>
</div>
</div>
<!-- Second Content -->
<div class=ui-tabs-panel ui-tabs-hide id=fragment-2 style=>
<img alt= src=http://i50.tinypic.com/33kprh5.jpg/>
<div class=info>
<h3><a href=#>How to remove "showing post with label" in Blogger</a></h3>
<p>Description goes here, this is just a test description....<a href=#>read more</a></p>
</div>
</div>
<!-- Third Content -->
<div class=ui-tabs-panel ui-tabs-hide id=fragment-3 style=>
<img alt= src=http://i47.tinypic.com/2191lqt.jpg/>
<div class=info>
<h3><a href=#>How to add Google Buzz to Blogspot blog</a></h3>
<p>Description goes here, this is just a test description....<a href=#>read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div class=ui-tabs-panel ui-tabs-hide id=fragment-4 style=>
<img alt= src=http://i48.tinypic.com/10pwp3o.jpg/>
<div class=info>
<h3><a href=#>Chat live with your blog visitors using yahoo</a></h3>
<p>Description goes here, this is just a test description....<a href=#>read more</a></p>
</div>
</div> </div>
6) Selesai
Note : Silahkan Anda ganti link gambar dan keterangan sesuai dengan keinginan Anda
2. Simple jQuery Featured Content Slider Widget for BlogSilahkan Ikuti Petunjuknya :
1) Silahkan anda masuk ke Design --> Edit HTML --> lalu centang kotak "expand widget template"
2) Silahkan Anda cari Code ]]></b:skin> , setelah menemukannya silahkan Anda masukan code di bawah berikut sebelum code diatas
#jFlowSlide{ background:#f8f8f8; font-family: Georgia; } #myController { font-family: Georgia; padding:2px 0; width:610px; background:#000000; } #myController span.jFlowSelected { background:#43A0D5;margin-right:0px; } .slide-wrapper { padding: 5px; } .slide-thumbnail { width:300px; float:left; } .slide-thumbnail img {max-width:300px; } .slide-details { width:290px; float:right; margin-left:10px;} .slide-details h2 { font-size:1.5em; font-style: italic; font-weight:normal; line-height: 1; margin:0; } .slide-details .description { margin-top:10px; } .jFlowControl, .jFlowPrev, .jFlowNext { color:#FFF; cursor:pointer; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px; } .jFlowControl:hover, .jFlowPrev:hover, .jFlowNext:hover { background: #43A0D5; }
3) Sekarang Anda cari code
</head> , lalu masukan code dibawah sebelum code tersebut.
<script language=javascript src=http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js type=text/javascript/>
<script language=javascript src=http://sites.google.com/site/freebloggerhelpbiz/freebloggerhelp/jquery.flow.1.2.auto.js type=text/javascript/>
<script type=text/javascript>
$(document).ready(function(){
$("#myController").jFlow({
slides: "#slides",
controller: ".jFlowControl", // must be class, use . sign
slideWrapper : "#jFlowSlide", // must be id, use # sign
selectedWrapper: "jFlowSelected", // just pure text, no sign
auto: true, //auto change slide, default true
width: "610px",
height: "235px",
duration: 100,
prev: ".jFlowPrev", // must be class, use . sign
next: ".jFlowNext" // must be class, use . sign
});
});
</script>
4) Sekarang Save Template Anda
5) Sekarang Anda masuk Page Element / Edit Laman --> add widget --> pilih HTML, silahkan Anda masukan kode dibawah :
<div class="jflow-content-slider">
<div id="slides">
<-! Slide #1 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 1 Ends -->
<-! Slide #2 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 2 Ends -->
<-! Slide #3 Starts-->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
<!-- Slide # 3 Ends -->
<!-- You can add as many slides as you want above this line -->
</div>
<div id="myController">
<span class="jFlowPrev">Prev</span>
<span class="jFlowControl">1</span>
<span class="jFlowControl">2</span>
<span class="jFlowControl">3</span>
<!-- Increase these numbers as with the increase in your number of slides above -->
<span class="jFlowNext">Next</span>
</div>
<div class="clear"></div>
</div>
6) Selesai
Note : Silahkan Anda ganti Tulisan IMAGE-LINK dengan link gambar Anda, TITLE-OF-THE-SLIDE dengan judul gambar , TEXT-OF-THE-SLIDE dengan keterangan gambar.Untuk menambah slides anda bisa menambahkan code dibawah setelah code <!-- Slide # 3 Ends -->
<div class="slide-wrapper">
<div class="slide-thumbnail">
<img alt="" src="IMAGE-LINK"/>
</div>
<div class="slide-details">
<span style="font-size: large;"><b> TITLE-OF-THE-SLIDE </b></span>
<div class="description">
TEXT-OF-THE-SLIDE
</div>
</div>
<div class="clear"></div>
</div>
juga menambahkan controller
<span class="jFlowControl">3</span> dan ganti dengan no 4, 5 dst.
3. Smart Jquery Featured Slider Widget 4 Blog / WebSilahkan Ikuti Petunjuknya :
1) Silahkan anda masuk ke Design --> Edit HTML
2) Silahkan Anda cari Code </head> , setelah menemukannya silahkan Anda masukan code di bawah berikut sebelum code diatas
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKk-0WZRwIFm55deYC5DMi_kh9zbdN3FA-lueDobjFI20mQ7HaU_3Jjm2Ia43rzgMUoGzPuEw9bVTZs9FdX4QYuxy3_h6PD_yPd9hK-ouLwm6LeJ0v7MY-29DvGRc4l6MSvuW62QKI0x1y/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKk-0WZRwIFm55deYC5DMi_kh9zbdN3FA-lueDobjFI20mQ7HaU_3Jjm2Ia43rzgMUoGzPuEw9bVTZs9FdX4QYuxy3_h6PD_yPd9hK-ouLwm6LeJ0v7MY-29DvGRc4l6MSvuW62QKI0x1y/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>
3) Sekarang Save Template Anda
4) Sekarang Anda masuk Page Element / Edit Laman --> add widget --> pilih HTML, silahkan Anda masukan kode dibawah :
<div id=news-slider>
<ul class=jcarousel-skin-tango id=mycarousel>
<li><a href=#><img src=http://2.bp.blogspot.com/_pZaV-NlP_3s/TFAMLk05DMI/AAAAAAAAAF0/oH_Qd-mcS_I/s1600/slide1.jpg/></a></li>
<li><a href=#><img src=http://1.bp.blogspot.com/_pZaV-NlP_3s/TFAML-hfhII/AAAAAAAAAF8/5AsriuSPkxo/s1600/slide2.jpg/></a></li>
<li><a href=#><img src=http://4.bp.blogspot.com/_pZaV-NlP_3s/TFAMMcW4kII/AAAAAAAAAGE/Eg9gpRvlMAw/s1600/slide3.jpg/></a></li>
<li><a href=#><img src=http://2.bp.blogspot.com/_pZaV-NlP_3s/TFAMMm7N3xI/AAAAAAAAAGM/Bm4RX6kvhhs/s1600/slide4.jpg/></a></li>
<li><a href=#><img src=http://3.bp.blogspot.com/_pZaV-NlP_3s/TFAMNIVEm-I/AAAAAAAAAGU/Hp5RUvKX78U/s1600/slide5.jpg/></a></li>
</ul>
</div>
5) Selesai
Note : Silahkan Anda ganti link gambarnya sesuai dengan gambar Anda,
4. JQuery Featured Content Slideshow WidgetSilahkan Ikuti Petunjuknya :
1) Silahkan anda masuk ke Design --> Edit HTML
2) Silahkan Anda cari Code </head> , setelah menemukannya silahkan Anda masukan code di bawah berikut sebelum code diatas
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js type=text/javascript></script>
<script type=text/javascript>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 6 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$(ul.slideshow).append(<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>);
//Set the opacity of all images to 0
$(ul.slideshow li).css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$(ul.slideshow li:first).css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$(#slideshow-caption h3).html($(ul.slideshow a:first).find(img).attr(title));
$(#slideshow-caption p).html($(ul.slideshow a:first).find(img).attr(alt));
//Display the caption
$(#slideshow-caption).css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval(gallery(),speed);
//pause the slideshow on mouse over
$(ul.slideshow).hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval(gallery(),speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($(ul.slideshow li.show)? $(ul.slideshow li.show) : $(#ul.slideshow li:first));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr(id) == slideshow-caption)? $(ul.slideshow li:first) :current.next()) : $(ul.slideshow li:first));
//Get next image caption
var title = next.find(img).attr(title);
var desc = next.find(img).attr(alt);
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass(show).animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$(#slideshow-caption).animate({bottom:-70}, 300, function () {
//Display the content
$(#slideshow-caption h3).html(title);
$(#slideshow-caption p).html(desc);
$(#slideshow-caption).animate({bottom:0}, 500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass(show);
}
//]]>
</script>
<style type="text/css">
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>
3) Sekarang Save Template Anda
4) Sekarang Anda masuk Page Element / Edit Laman --> add widget --> pilih HTML, silahkan Anda masukan kode dibawah :
<ul class="slideshow">
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZOpw61JSDgehrFSC7V_Cf6UB4YywOGgz5Vh18R9_NfnVDotdIsU-Q_GgcCLsIDRi8jNZ4XQg17MA1F0RY-yL_IevTx08MyC4X-0UdT5cxcPFtMZ_OZktRRYRaNfFPoHCoT3EsfStP8lA/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmb12mBbrmsMCuoDad4rAoxN3dvj5WN-2RQRXipbH3mVlvSm5t-Jya0L6JIfxndHV3oTImzKL5KQi2pY_FhyenyPI0t6DDiTVVRKvCVNqvixW1G3sMPFm1GbQyXAAfrf14lZOFW6y7EC4/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc3sLdJzd41psJrQ5FSZC_7be3dWDgzlLhmN0Fomm80OhMkxkbt60J23DpNOGY2qlkTlRlwkqpCY-PKgPWCvfZNEFTa5kxR1xhyzb3wPAcETYfk-0blyw4KAfOpqpuP4AXivOw-Omlp5A/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXTqlyDfUsXIo-GTpuTlG_5ibBdpWg9ofHPfaZeqtA_Px67FQo99jzoT8lXDT-V5CF5umocU4ANBt302P4bXhE5y154KKDI1CN8wMxgWAaq4vWoTn9WbV1ORhypP-Dhl9bcs1hu1ZNbeg/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>
5) Selesai
Note : silahkan Anda ganti link gambarnya sesuai dengan link gambar Anda, lalu "This is featured post 4 title" dengan judul title Gambar , "Replace This Text With Your Featured Post 4 Description." dengan keterangan gambar.
5. jQuery Featured Post Slider Widget 4 blogSilahkan Ikuti Petunjuknya :
1) Silahkan anda masuk ke Design --> Edit HTML
2) Silahkan Anda cari Code </head> , setelah menemukannya silahkan Anda masukan code di bawah berikut sebelum code diatas
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js type=text/javascript/>
<script type=text/javascript>
//<![CDATA[
//** Created: March 19th, 08
//** Aug 16th, 08- Updated to v 1.4:
//1) Adds ability to set speed/duration of panel animation (in milliseconds)
//2) Adds persistence support, so the last viewed panel is recalled when viewer returns within same browser session
//3) Adds ability to specify whether panels should stop at the very last and first panel, or wrap around and start all over again
//4) Adds option to specify two navigational image links positioned to the left and right of the Carousel Viewer to move the panels back and forth
//** Aug 27th, 08- Nav buttons (if enabled) also repositions themselves now if window is resized
var stepcarousel={
ajaxloadingmsg: <div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /> Fetching Content. Please wait...</div>, //customize HTML to show while fetching Ajax content
defaultbuttonsfade: 0.4, //Fade degree for disabled nav buttons (0=completely transparent, 1=completely opaque)
configholder: {},
getCSSValue:function(val){ //Returns either 0 (if val contains auto) or val as an integer
return (val=="auto")? 0 : parseInt(val)
},
getremotepanels:function($, config){ //function to fetch external page containing the panel DIVs
config.$belt.html(this.ajaxloadingmsg)
$.ajax({
url: config.contenttype[1], //path to external content
async: true,
error:function(ajaxrequest){
config.$belt.html(Error fetching content.<br />Server Response: +ajaxrequest.responseText)
},
success:function(content){
config.$belt.html(content)
config.$panels=config.$gallery.find(.+config.panelclass)
stepcarousel.alignpanels($, config)
}
})
},
getoffset:function(what, offsettype){
return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},
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
},
fadebuttons:function(config, currentpanel){
config.$leftnavbutton.fadeTo(fast, currentpanel==0? this.defaultbuttonsfade : 1)
config.$rightnavbutton.fadeTo(fast, currentpanel==config.lastvisiblepanel? this.defaultbuttonsfade : 1)
},
addnavbuttons:function(config, currentpanel){
config.$leftnavbutton=$(<img src="+config.defaultbuttons.leftnav[0]+">).css({zIndex:50, position:absolute, left:config.offsets.left+config.defaultbuttons.leftnav[1]+px, top:config.offsets.top+config.defaultbuttons.leftnav[2]+px, cursor:hand, cursor:pointer}).attr({title:Back +config.defaultbuttons.moveby+ panels}).appendTo(body)
config.$rightnavbutton=$(<img src="+config.defaultbuttons.rightnav[0]+">).css({zIndex:50, position:absolute, left:config.offsets.left+config.$gallery.get(0).offsetWidth+config.defaultbuttons.rightnav[1]+px, top:config.offsets.top+config.defaultbuttons.rightnav[2]+px, cursor:hand, cursor:pointer}).attr({title:Forward +config.defaultbuttons.moveby+ panels}).appendTo(body)
config.$leftnavbutton.bind(click, function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, -config.defaultbuttons.moveby)
})
config.$rightnavbutton.bind(click, function(){ //assign nav button event handlers
stepcarousel.stepBy(config.galleryid, config.defaultbuttons.moveby)
})
if (config.panelbehavior.wraparound==false){ //if carousel viewer should stop at first or last panel (instead of wrap back or forth)
this.fadebuttons(config, currentpanel)
}
},
alignpanels:function($, config){
var paneloffset=0
config.paneloffsets=[paneloffset] //array to store upper left offset of each panel (1st element=0)
config.panelwidths=[] //array to store widths of each panel
config.$panels.each(function(index){ //loop through panels
var $currentpanel=$(this)
$currentpanel.css({float: none, position: absolute, left: paneloffset+px}) //position panel
$currentpanel.bind(click, function(e){return config.onpanelclick(e.target)}) //bind onpanelclick() to onclick event
paneloffset+=stepcarousel.getCSSValue($currentpanel.css(marginRight)) + parseInt($currentpanel.get(0).offsetWidth || $currentpanel.css(width)) //calculate next panel offset
config.paneloffsets.push(paneloffset) //remember this offset
config.panelwidths.push(paneloffset-config.paneloffsets[config.paneloffsets.length-2]) //remember panel width
})
config.paneloffsets.pop() //delete last offset (redundant)
var addpanelwidths=0
var lastpanelindex=config.$panels.length-1
config.lastvisiblepanel=lastpanelindex
for (var i=config.$panels.length-1; i>=0; i--){
addpanelwidths+=(i==lastpanelindex? config.panelwidths[lastpanelindex] : config.paneloffsets[i+1]-config.paneloffsets[i])
if (config.gallerywidth>addpanelwidths){
config.lastvisiblepanel=i //calculate index of panel that when in 1st position reveals the very last panel all at once based on gallery width
}
}
config.$belt.css({width: paneloffset+px}) //Set Belt DIV to total panels widths
config.currentpanel=(config.panelbehavior.persist)? parseInt(this.getCookie(window[config.galleryid+"persist"])) : 0 //determine 1st panel to show by default
config.currentpanel=(typeof config.currentpanel=="number" && config.currentpanel<config.$panels.length)? config.currentpanel : 0
if (config.currentpanel!=0){
Available link for download
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://gedesitdownblog.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1028/th/102882.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://gedesitdownblog.blogspot.com/2013/05/kumpulan-beberapa-animasi-untuk.html" target="_blank">My Widget</a></center></small></div>12. Naruto
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://gedesitdownblog.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/692/th/69207.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://gedesitdownblog.blogspot.com/2013/05/kumpulan-beberapa-animasi-untuk.html" target="_blank">My Widget</a></center></small></div>13. Gaara
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://gedesitdownblog.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/539/th/53973.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://gedesitdownblog.blogspot.com/2013/05/kumpulan-beberapa-animasi-untuk.html" target="_blank">My Widget</a></center></small></div>14. Labu
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://gedesitdownblog.blogspot.com/" target="_blank"><img border="0" src="http://sig.graphicsfactory.com/Halloween/a.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://gedesitdownblog.blogspot.com/2013/05/kumpulan-beberapa-animasi-untuk.html" target="_blank">My Widget</a></center></small></div>15. Tengkorak
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://gedesitdownblog.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/1/th/152.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://gedesitdownblog.blogspot.com/2013/05/kumpulan-beberapa-animasi-untuk.html" target="_blank">My Widget</a></center></small></div>16. Ekspresi Wajah
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://gedesitdownblog.blogspot.com/" target="_blank"><img border="0" src="http://i.mnpls.com/715/71510.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://gedesitdownblog.blogspot.com/2013/05/kumpulan-beberapa-animasi-untuk.html" target="_blank">My Widget</a></center></small></div>18. Main Taplak
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://gedesitdownblog.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/0/th/72.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://gedesitdownblog.blogspot.com/2013/05/kumpulan-beberapa-animasi-untuk.html" target="_blank">My Widget</a></center></small></div>19. Pasangan
<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href="http://gedesitdownblog.blogspot.com/" target="_blank"><img border="0" src="http://s.myniceprofile.com/myspacepic/229/th/22949.gif" title="My widget" alt="animasi bergerak gif" /></a><small><center><a href="http://gedesitdownblog.blogspot.com/2013/05/kumpulan-beberapa-animasi-untuk.html" target="_blank">My Widget</a></center></small></div>20. Zoombie
Available link for downloadRead more »
