Membuat Mosaic SlideShow Di Blog

Diposkan oleh Hery Prasetyo Friday, April 30, 2010
بسم الله الرحمن الرحيم

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.

Membuat Mosaic SlideShow Di Blog
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 :

Membuat Mosaic SlideShow Di Blog

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> :

<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.


Jika postingan ini dirasa berguna bagi yang lain. silahkan share untuk berbagi.

Dapatkan Update Terbaru Dari HAPIA Mesir, Masukan Email Anda :

HAPIA Mesir Readers

Bookmark and Share

Direkomendasikan Untuk Dibaca :

33 Responses to Membuat Mosaic SlideShow Di Blog

  1. Rock Says:
  2. Aku simpan dulu sob...
    Makasih untuk tutorialnya.

     
  3. thx 4 share
    ntar dicoba ah ^^

     
  4. Tutorial mantap sobat..
    aku bookmark dulu.

     
  5. wah tutorialnya keren jquery nya...

     
  6. Wah, keren nih infonya... Thanks bgt..

     
  7. aryadevi Says:
  8. salam sobat, izin dulu karena sewaktu waktu kami aplikasikan di blog kami.

     
  9. sehat-mu Says:
  10. ok sobat...
    ijin coba dulu..
    terimaksih banyak, semoga bisa berjalan sesuai dengan turorial ini

     
  11. selalu ada yang baru ditempat sahabat, terima-kasih sudah berbagi. Salam

     
  12. BeDa Says:
  13. 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

     
  14. Rizki Says:
  15. Nice post, tapi loding blog jadi agak berat kalo pake ini...

     
  16. HAPIA Mesir Says:
  17. 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..

     
  18. yayah Says:
  19. thaxs sob..., ane berkunjung lagi nih.. sekaligus minta dukungannya ya

     
  20. Pak Tani Says:
  21. keren artikelnya...

     
  22. Beben Says:
  23. cool cool...mkn gaya saja nih trik2 jQuery plug-innya kang....xixixixixi

     
  24. Oemar Says:
  25. Weh.. Coool..
    Ntar cari blog yang tepat.. ehehe..

     
  26. ryan-ss Says:
  27. wew! keren neeh,,ane bookmark ya?! makasih sobat...

     
  28. Trima kasih tutorialnya.

    Blog kamu sudah saya cantumin di Daftar Blog DoFollow 2010.

     
  29. Rizky2009 Says:
  30. ini bikin blog jadi berat ga yah ?

     
  31. akhatam Says:
  32. wih Kerennn demonya...
    Mantap Hapia!!

     
  33. buwel Says:
  34. thanks neh tutorialnya sobat... mantab!

     
  35. achen Says:
  36. pernah bikin kek gini di blog tapi di hapus karena takut blognya berat...

     
  37. Bunglon Blog Says:
  38. asalamualaikum..
    wah boleh juga nech sob slide show nya ari demonya kren yach
    simpel...Sukses Slalu!

     
  39. ahmadi amrun Says:
  40. mantep nih tutorialnya.
    Thx bro...demonya aja keren, langsung praktek ah....hehehehe

     
  41. zoel Says:
  42. info yang menarik nih,, coba saya pake ini deh,, hehe

     
  43. coba ah tapi baca dulu

     
  44. wah salah link
    saya coba ah thx

     
  45. Syam Oby Says:
  46. mas hapiaaa
    halo haloo

    hmm..........
    ini gak bikin blog tambah gendut yah kak??
    blogku dah kebanyakan foto
    T,T

    salam selalu
    dari
    blogger abnoraml

     
  47. Ega-Priatma Says:
  48. Wah, bagus banget.
    sukses terus buat perkumpulan ini

     
  49. hmmm...pengen coba mas
    tp gak memperberat loading blog ya mas, soalnya blog saya sudah berat banget,hehehe

     
  50. artikel yang bagus mas
    jadi penhen nyoba mas, aga ada slideshow nya,hehe

     
  51. Bang Iwan Says:
  52. Gimana kalau kita mau buat di widget sobat?

     
  53. HAPIA Mesir Says:
  54. pak Iwan@ nah kalo mw dibuat disidebar ukurannya harus diperkecil lagi pak... atau sidebarnya harus mempunyai lebar 500px...

     
  55. thanks for a good article on Mars Rover. i like it.

     

Post a Comment