|
Membuat mosaic slide show di blog. bagi sebagian blogger yang ingin membuat slide sendiri untuk memuat koleksi foto-fotonya dan ingin ditampilkan di blog. mungkin dengan menggunakan mosaic slide show ini akan lebih terlihat atraktif.

Dengan perpaduan JQuery versi 1.4.2 dengan script pembuat slide show menjadikan slider ini dapat berganti-ganti sendiri atau juga dapat di klik untuk mengganti foto/gambar.
Untuk contoh Membuat mosaic slide show silahkan klik tombol demo dibawah ini :

Berikut cara membuat Membuat mosaic slide show di blog dengan metode yang paling mudah :- Login keBlogger dengan account anda.- Pergi ke "Tata Letak" kemudian "Edit HTML".- Centang "Expand Template Widget".- Sebelumnya pastikan blog anda telah tertanam didalamnya JQuery versi 1.4.2, jika belum silahkan copy JQuery versi 1.4.2 dibawah ini dan letakkan dibawah <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
- Masukan link URL foto/gambar anda pada script berikut :
/* The slide images are contained in the slides array. */ var slides = new Array('http://LINK-URL-FOTO1.jpg', 'http://LINK-URL-FOTO2.jpg', 'http://LINK-URL-FOTO3.jpg', 'http://LINK-URL-FOTO4.jpg', 'http://LINK-URL-FOTO5.jpg', 'http://LINK-URL-FOTO6.jpg');
$(document).ready(function(){ /* This code is executed after the DOM has been completely loaded */
$('.arrow.left').click(function(){ prev();
/* Clearing the autoadvance if we click one of the arrows */ clearInterval(auto); });
$('.arrow.right').click(function(){ next(); clearInterval(auto); });
/* Preloading all the slide images: */
for(var i=0;i<slides.length;i++) { (new Image()).src=slides[i]; }
/* Shoing the first one on page load: */ transition(1);
/* Setting auto-advance every 10 seconds */
var auto;
auto=setInterval(function(){ next(); },10*1000); });
var current = {}; function transition(id) { /* This function shows the individual slide. */
if(!slides[id-1]) return false;
if(current.id) { /* If the slide we want to show is currently shown: */ if(current.id == id) return false;
/* Moving the current slide layer to the top: */ current.layer.css('z-index',10);
/* Removing all other slide layers that are positioned below */ $('.mosaic-slide').not(current.layer).remove(); }
/* Creating a new slide and filling it with generateGrid: */ var newLayer = $('<div class="mosaic-slide">').html(generateGrid({rows:7,cols:8,image:slides[id-1]}));
/* Moving it behind the current slide: */ newLayer.css('z-index',1);
$('#mosaic-slideshow').append(newLayer);
if(current.layer) { /* Hiding each tile of the current slide, exposing the new slide: */ $('.tile',current.layer).each(function(i){ var tile = $(this); setTimeout(function(){ tile.css('visibility','hidden'); },i*10); }) }
/* Adding the current id and newLayer element to the current object: */ current.id = id; current.layer = newLayer; }
function next() { if(current.id) { transition(current.id%slides.length+1); } }
function prev() { if(current.id) { transition((current.id+(slides.length-2))%slides.length+1); }
}
/* Width and height of the tiles in pixels: */ var tabwidth=50, tabheight=50;
function generateGrid(param) { /* This function generates the tile grid, with each tile containing a part of the slide image */
/* Creating an empty jQuery object: */ var elem = $([]),tmp;
for(var i=0;i<param.rows;i++) { for(var j=0;j<param.cols;j++) { tmp = $('<div>', { "class":"tile", "css":{ "background":'#555 url('+param.image+') no-repeat '+(-j*tabwidth)+'px '+(-i*tabheight)+'px' } }); /* Adding the tile to the jQuery object: */ elem = elem.add(tmp); }
/* Adding a clearing element at the end of each line. This will clearly divide the divs into rows: */ elem = elem.add('<div class="clear"></div>'); }
return elem; }
- Simpan script diatas dalam notepad dan simpan dengan dengan nama terserah anda dan ekstensi .js atau .txt dan upload script anda ke hosting yang anda punya. - Letakkan link URL script anda tersebut dibawah JQuery 1.4.2 diatas dengan format sebagai berikut :
<script src='http://SITUSHOSTINGANDA/NAMA-FILE.js' type='text/javascript'/>
- Masukan code CSS berikut dan letakkan diatas code ]]></b:skin> :
#mosaic-slideshow{ /* The slideshow container div */ height:400px; margin:0 auto; position:relative; width:570px; }
.mosaic-slide{ /* This class is shared between all the slides */ left:70px; position:absolute; top:10px; border:10px solid #555;
/* CSS3 rounded corners */ -moz-border-radius:20px; -webkit-border-radius:20px; border-radius:20px; }
.tile{ /* The individual tiles */ height:50px; width:50px; float:left; border:1px solid #555; border-width:0 1px 1px 0; background-color:#555; }
.arrow{ /* The prev/next arrows */ width:35px; height:70px; background:url("http://2.bp.blogspot.com/_QeR8kbaWhLU/S9p3d5NeVBI/AAAAAAAAAtU/qxgjGNRSPQQ/s1600/arrows.png") no-repeat; position:absolute; cursor:pointer; top:50%; margin-top:-35px; }
.arrow.left{ left:10px; background-position:center top; }
.arrow.left:hover{ background-position:center -70px; }
.arrow.right{ right:10px; background-position:center -140px; }
.arrow.right:hover{ background-position:center -210px; }
.clear{ /* This class clears the floats */ clear:both; }
- Simpan template anda.
- Kemudian copy paste code berikut ditempat yang ingin anda telatkan mosaic slide show tersebut :
<div id="mosaic-slideshow" style="margin:0px;"> <div class="arrow left"></div> <div class="arrow right"></div> </div>
- Dan simpan.
# Untuk hasil yang maksimal, gunakan gambar dengan ukuran 400X400 pixel pada script diatas.
Untuk tutorial originalnya bisa di baca di Making a Mosaic Slideshow With jQuery & CSS.
Selamat mencoba dan happy blogging.
|
Trim's..