Membuat Slideshow Thumbnail Dengan JQuery
Sabtu, 13 November 2010
Label: A-Blogosfer
Perhatikan slide di samping, akan terlihat dua buah slide. slide yang sebelah kiri menunjukan keterangan postingan dan gambarnya
slide yang sebelah kanan adalah slide navigasi, yang apabila diklik akan mucul keterangan dan gambarnya pada slide sebelah kiri. Kali Ini Kita Akan Bahas Tentang "Membuat Slideshow Thumbnail Dengan JQuery" sekali lagi tentang "Membuat Slideshow Thumbnail Dengan JQuery" (sengaja 2x untuk nambah Kata Kunci di Google tentang Membuat Slideshow Thumbnail Dengan JQuery)
Baiklah mari kita mulai.
Klik 'Layout' pada blogger, dan pergi ke "edit HTML", dan kemudian centang tulisan 'Expand Widget Templates' setelah itu cari kode "]]></b:skin>" dalam template kamu,
Lalu kopi-kan style CSS berikut diatas kode tersebut:
<style>
body {
color:#333333;
font-family:arial,helvetica,sans-serif;
font-size:9pt;
line-height:1.4em;
text-align:left;
}
/* ---------[ Slideshow ]--------- */
#home-top {
width:950px;
background:#fff;
padding:15px 15px 5px;
overflow:hidden;
border-bottom:1px solid #ddd;
}
#slideshow {
width: 940px;
margin: 0 0 10px;
padding:0;
background:#000;
height:250px;
overflow:hidden;
border:5px solid #000;
}
#slideshow ul {
background:transparent;
margin: 0;
padding: 0;
list-style-type: none;
}
/* ---------[ Slideshow Slides ]--------- */
#slideshow .slides {
width:540px;
overflow: hidden;
float:left;
color:#fff;
}
#slideshow .slides ul {
float:left;
overflow: hidden;
width:540px;
height:250px;
}
#slideshow .slides li {
display:none;
left:-99999em;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}
.js #slideshow .slides li {
margin: 0;
padding: 0;
list-style-type: none;
width:540px;
height:250px;
display:block;
overflow: hidden;
background:#000;
position:relative;
z-index:1;
}
.js #slideshow .slides li .entry {
width:530px;
padding: 5px;
overflow: hidden;
position:absolute;
bottom:0;
left:0;
background:#000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}
#slideshow .slides li .entry p {
margin: 0;
}
#slideshow .slides li .entry h2 a,
#slideshow .slides li .entry h2 a:link,
#slideshow .slides li .entry h2 a:visited,
#slideshow .slides li .entry h2 a:hover,
#slideshow .slides li .entry h2 a:active {
font-size:12pt;
line-height: 1.1em;
margin:0;
color:#fff !important;
margin: 0;
letter-spacing:0;
}
/* ---------[ Slideshow Navigation ]--------- */
#slideshow ul.slides-nav {
height:250px;
width:395px;
margin:0;
padding: 0;
float:right;
overflow:hidden;
}
#slideshow .slides-nav li {
display:block;
margin:0;
padding:0;
list-style-type:none;
display:block;
}
#slideshow .slides-nav li a {
width:375px;
font-family:arial,helvetica,sans-serif;
display:block;
margin:0;
padding:10px;
list-style-type:none;
display:block;
height:30px;
color:#999;
font-size:8pt;
overflow:hidden;
background: #1A1A1A;
line-height:1.35em;
}
slides.ul li {
background-attachment:scroll;
background-color:transparent;
background-position:center top;
background-repeat:no-repeat;
display:block;
height:250px;
left:0;
opacity:1;
position:absolute;
top:0;
width:540px;
z-index:6;
}
.js #slideshow .slides-nav li.on a {
background: #292929 url(http://i604.photobucket.com/albums/tt130/metalner/simplex-darkness/featbg.gif) top left no-repeat;
color:#fff;
}
.js #slideshow .slides-nav li a:hover,
.js #slideshow .slides-nav li a:active {
color:#fff;
}
#slideshow .slides-nav li a img.post-thum,
#slideshow .slides-nav li a img.thumbnail {
float:left;
margin: 0 10px 0 0;
border:0;
padding:1px;
background:#999;
width:28px;
height:28px;
}
.js #slideshow .slides-nav li.on a img.post-thum,
.js #slideshow .slides-nav li.on a img.thumbnail {
background:#fff !important;
}
</style>
karena effect slide ini berdasarkan padaJquery plugin dinamai Cycle, jadi setelah kode CSS di atas
kita harus memasukan kerangka Jquery dan Cycle plugin.
Kemudian tambahkan kode javascript di bawah ini setelah kode "]]></b:skin>":
Klo yang diatas (Style cssnya) sebelum kode "]]></b:skin>", nah klo yang di bawah ini (Javascript) setelah kode "]]></b:skin>"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script src="http://wp-genius.solostreamsites.com/wp-content/themes/wp-genius-dev/js/jquery.cycle.js" type="text/javascript"></script>
kamu bisa mendownload kedua java scipt di atas, dan meletakannya di hostingan milik kamu. Kemudian letakan kode berikut setelahnya:
<script type="text/javascript">
$slideshow = {
context: false,
tabs: false,
timeout: 7000, // time before next slide appears (in ms)
slideSpeed: 1000, // time it takes to slide in each slide (in ms)
tabSpeed: 1000, // time it takes to slide in each slide (in ms)
fx: 'fade', // the slide effect to use
init: function() {
// set the context to help speed up selectors/improve performance
this.context = $('#slideshow');
// set tabs to current hard coded navigation items
this.tabs = $('ul.slides-nav li', this.context);
// remove hard coded navigation items from DOM
// because they aren't hooked up to jQuery cycle
this.tabs.remove();
// prepare slideshow and jQuery cycle tabs
this.prepareSlideshow();
},
prepareSlideshow: function() {
// initialise the jquery cycle plugin -
// for information on the options set below go to:
// http://malsup.com/jquery/cycle/options.html
$('div.slides > ul', $slideshow.context).cycle({
fx: $slideshow.fx,
timeout: $slideshow.timeout,
speed: $slideshow.slideSpeed,
fastOnEvent: $slideshow.tabSpeed,
pager: $('ul.slides-nav', $slideshow.context),
pagerAnchorBuilder: $slideshow.prepareTabs,
before: $slideshow.activateTab,
pauseOnPagerHover: true,
pause: true
});
},
prepareTabs: function(i, slide) {
// return markup from hardcoded tabs for use as jQuery cycle tabs
// (attaches necessary jQuery cycle events to tabs)
return $slideshow.tabs.eq(i);
},
activateTab: function(currentSlide, nextSlide) {
// get the active tab
var activeTab = $('a[href="#' + nextSlide.id + '"]', $slideshow.context);
// if there is an active tab
if(activeTab.length) {
// remove active styling from all other tabs
$slideshow.tabs.removeClass('on');
// add active styling to active button
activeTab.parent().addClass('on');
}
}
};
$(function() {
// add a 'js' class to the body
$('body').addClass('js');
// initialise the slideshow when the DOM is ready
$slideshow.init();
});
</script>
Terakhir Klik 'Save Template'
Untuk kegiatan di "edit HTML sudah selesai.
Nah sekarang coba pergi ke >> Layout >> Page element, kemudian tambahkan 'Add a Gadget' di atas postingan kamu, baru kemudian kopikan kode yang di bawah ini:
<div id="home-top" class="clearfix">
<div id="slideshow" class="clearfix">
<div class="slides">
<ul class="clearfix" style="position: relative;">
<li id="main-post-1" style="background: transparent url(URL-Image1) " >
<div class="entry"><h2 class="post-title"><a href="link to entry1">title of entry 1</a></h2>
<p>post summary of entry 1</p></div>
</li>
<li id="main-post-2" style="background: transparent url(URL-Image2) " >
<div class="entry"><h2 class="post-title"><a href="link to entry2">title of entry 2</a></h2>
<p>post summary of entry 2</p></div>
</li>
<li id="main-post-3" style="background: transparent url(URL-Image3) " >
<div class="entry"><h2 class="post-title"><a href="link to entry3">title of entry 3</a></h2>
<p>post summary of entry 3</p></div>
</li>
<li id="main-post-4" style="background: transparent url(URL-Image4) " >
<div class="entry"><h2 class="post-title"><a href="link to entry4">title of entry 4</a></h2>
<p>post summary of entry 4</p></div>
</li>
<li id="main-post-5" style="background: transparent url(URL-Image5) " >
<div class="entry"><h2 class="post-title"><a href="link to entry5">title of entry 5</a></h2>
<p>post summary of entry 5</p></div>
</li>
</ul>
</div>
Kode di atas adalah untuk menampilkan slide bagian kiri; yang akan menampilkan gambar,judul, dan keterangan post
dan berikutnya kode untuk menampilkan slide bagian kanan; yang menampilkan judul postingan dengan Thumbnail.
Letakan kode di bawah setelah kode di atas:
<ul class="slides-nav">
<li class="clearfix" id="post-1"> <a class="" href="#main-post-1"><img width="150px" height="150px" src="thumbnail of post 1" class="thumbnail"/>title of post 1</li>
<li class="clearfix" id="post-2"> <a class="" href="#main-post-2"><img width="150px" height="150px" src="thumbnail of post 2" class="thumbnail"/>title of post 2</li>
<li class="clearfix" id="post-3"> <a class="" href="#main-post-3"><img width="150px" height="150px" src="thumbnail of post 3" class="thumbnail"/>title of post 3</li>
<li class="clearfix" id="post-4"> <a class="" href="#main-post-4"><img width="150px" height="150px" src="thumbnail of post 4" class="thumbnail"/>title of post 4</li>
<li class="clearfix" id="post-5"> <a class="" href="#main-post-5"><img width="150px" height="150px" src="thumbnail of post 5" class="thumbnail"/>title of post 5</li>
</ul>
</div>
</div>
Perhatikan kode slide kiri dan slide kanan diatas, kamu akan melihat masing-masing attribute dari <a> untuk kode slide kanan menuju ke attribut <li> ke kode slide sebelsh kiri
contohnya:
disebelah kiri menampilkan:
<li id="main-post-1".....>
dan di sebelah kanan menampilkan:
<a href="#main-post-1".....>
jadi maksudnya, jika kita klik link di slide sebelah kanan, maka slide di sebelah kiri akan menampilkan kontennya.
slide di sebelah kanan mengontrol slide di sebelah kiri.
semua kode dari slide-slide tersebut tidak akan bekerja apabila tidak di inisialisasikan dalam satu variable.
Ok. Terakhir klik save widget, dan cek apakah slidenya sudah jalan.
0 komentar:
Posting Komentar