The Personal Blog

Mengenai Saya

Foto saya
Manado, sulawesi utara, Indonesia
Hoby ngeblog,Main Band,Adventure dan Billiard..

Mosaic Slideshow With Jquery dan Css

Dengan Perpaduan Jquery Versi 1.4.2 dengan script pembuat slideshow menjadikan slider ini dapat berganti ganti sendiri atau juga dapat di klik..




-Untuk cara membuatnya silahkan ikuti langkah-langkah berikut ini:

1.Login Ke Blogger
2.Pada Dasbor Klik Tata Letak ->> Edit Html
3.Kemudian Copy Jquery Versi 1.4.2 Berikut ini dan letakan di atas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

-Kemudian Masukan Url Gambar anda Pada Script Di bawah ini:

/* 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;
}

-Kemudian Simpan Scrip di atas ke dalam notepad dengan nama terserah anda bisa Ekstensi .Js atau .Txt dan Upload Script anda ke hosting yang anda punya.
-Kemudian Jika Sdh Letakan Link Url Script anda tersebut di bawah script Jquery 1.4.2 di atas dengan format sebagai berikut:

<script src='http://SITUSHOSTINGANDA/NAMA-FILE.js' type='text/javascript'/>

-Lanjut lagi silahkan anda masukan Code Css Berikut ini di atas 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

4.Langkah Terakhir Copy Code Berikut ini dan letakan di Add Gadget/Html javascript posisi yang ingin anda letakan Mosaic Slideshownya...

<div id="mosaic-slideshow" style="margin:0px;">
<div class="arrow left"></div>
<div class="arrow right"></div>
</div>

5.Simpan
-Untuk Mendapatkan hasil yang maksimal Gunakan Gambar dengan ukuran 400x400 pixel pada scrip di atas...

Sumber Artikel Tutorialzine.com

ARTIKEL TERKAIT



2 komentar:

Koko Bota mengatakan...

nice info sobat....

makasih ya dah mampir...

jgn lupa untuk sering-sering mampir di tempat aku ya...

Edit Css mengatakan...

Ok Sob Thx To Share...

Nice Post...

Posting Komentar