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".
- 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> :
- Login keBlogger dengan account anda.
- Pergi ke "Tata Letak" kemudian "Edit HTML".
- 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;
}
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 :
- 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEOt86lOuXbuR4qsYDSVSkH8Js4q-vlEZCa2TIL3wRlOhbhNwRubfuOyFcTlcmPXjfH_469Ys1i69JjqE4ahF8rY8XClWBjrFSNOcGFUR1rf9uRGfMa6uP5zs0BFiyGXvN4mWCMzYhytmK/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;
}
/* 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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEOt86lOuXbuR4qsYDSVSkH8Js4q-vlEZCa2TIL3wRlOhbhNwRubfuOyFcTlcmPXjfH_469Ys1i69JjqE4ahF8rY8XClWBjrFSNOcGFUR1rf9uRGfMa6uP5zs0BFiyGXvN4mWCMzYhytmK/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 :
- 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>
<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.
# 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.
Aku simpan dulu sob...
Makasih untuk tutorialnya.
thx 4 share
ntar dicoba ah ^^
Tutorial mantap sobat..
aku bookmark dulu.
wah tutorialnya keren jquery nya...
Wah, keren nih infonya... Thanks bgt..
salam sobat, izin dulu karena sewaktu waktu kami aplikasikan di blog kami.
ok sobat...
ijin coba dulu..
terimaksih banyak, semoga bisa berjalan sesuai dengan turorial ini
selalu ada yang baru ditempat sahabat, terima-kasih sudah berbagi. Salam
Barusan lihat demonya, bagus. Kualitas gambarnya hebat. Tapi kok lambat ya? Atau memang disetting seperti itu? (Atau jangan-jangan komputer saya yang lambat?)
Salam ukhuwah
Nice post, tapi loding blog jadi agak berat kalo pake ini...
BeDa@ kecepatan berganti gambarnya 10 detik mas.. jadi memang terlihar lambat..
Rizki@ iya memang jadi tambah berat sob..kan widget ini bagi yg membutuhkan saja.. kalo di pasang di postingan g akan menambah berat sob..soalnya postingan kan bakal terganti ke yg lebih baru..
thaxs sob..., ane berkunjung lagi nih.. sekaligus minta dukungannya ya
keren artikelnya...
cool cool...mkn gaya saja nih trik2 jQuery plug-innya kang....xixixixixi
Weh.. Coool..
Ntar cari blog yang tepat.. ehehe..
wew! keren neeh,,ane bookmark ya?! makasih sobat...
Trima kasih tutorialnya.
Blog kamu sudah saya cantumin di Daftar Blog DoFollow 2010.
ini bikin blog jadi berat ga yah ?
wih Kerennn demonya...
Mantap Hapia!!
thanks neh tutorialnya sobat... mantab!
pernah bikin kek gini di blog tapi di hapus karena takut blognya berat...
asalamualaikum..
wah boleh juga nech sob slide show nya ari demonya kren yach
simpel...Sukses Slalu!
mantep nih tutorialnya.
Thx bro...demonya aja keren, langsung praktek ah....hehehehe
info yang menarik nih,, coba saya pake ini deh,, hehe
coba ah tapi baca dulu
wah salah link
saya coba ah thx
mas hapiaaa
halo haloo
hmm..........
ini gak bikin blog tambah gendut yah kak??
blogku dah kebanyakan foto
T,T
salam selalu
dari
blogger abnoraml
Wah, bagus banget.
sukses terus buat perkumpulan ini
hmmm...pengen coba mas
tp gak memperberat loading blog ya mas, soalnya blog saya sudah berat banget,hehehe
artikel yang bagus mas
jadi penhen nyoba mas, aga ada slideshow nya,hehe
Gimana kalau kita mau buat di widget sobat?
pak Iwan@ nah kalo mw dibuat disidebar ukurannya harus diperkecil lagi pak... atau sidebarnya harus mempunyai lebar 500px...
thanks for a good article on Mars Rover. i like it.