Catatan Hadi : Membuat Slideshow Mosaic Pada Website

Sebelumnya saya pernah menulis mengenai Membuat simple slideshow pada website, Membuat simple slideshow-2 pada website, dan kali ini kita akan membuat Slideshow mosaic pada website. Cukup banyak website-website yang menggunakan slideshow mosaic ini, terutama dalam website teknologi, Selain website teknologi, anda juga bisa menggunakannya untuk gallery foto, gallery makanan, atau untuk hal yang lain. karena dengan menggunakan slideshow mosaic ini, saya yakin website anda akan menjadi jauh lebih menarik dibandingkan sebelumnya.

Jika anda ingin mencobanya,

ikutilah tahap demi tahap agar semuanya berjalan tanpa error.

Sebelumnya siapkanlah beberapa gambar terlebih dahulu yang akan ditampilkan,

setelah itu buatlah file css dengan nama style.css, dan tuliskan programnya sperti ini:

body{
 background:url("../../gambar/401275_522167764460940_709106150_n.jpg") repeat-x yellow;
}


#mosaic-slideshow{
 height:365px;
 margin:auto;
 position:relative;
 width:670px;
}

.mosaic-slide{
 left:80px;
 position:absolute;
 top:10px;
 border:10px solid #555;
 -moz-border-radius:20px;
 -webkit-border-radius:20px;
 border-radius:20px;
}

.tile{
 height:60px;
 width:60px;
 float:left;
 border:1px solid #555;
 border-width:0 1px 1px 0;
 background-color:#555;
}

.arrow{
 width:35px;
 height:70px;
 background:url("arrows.png") no-repeat;
 position:absolute;
 cursor:pointer;
 top:50%;
 margin-top:-35px;
}

.arrow.left{
 left:15px;
 background-position:center top;
}

.arrow.right{
 right:15px;
 background-position:center -140px;
}


h1{
 padding:15px 0;
 text-align:center;
 text-shadow:2px 1px 11px yellow;
 font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}

untuk gambar next dan pref, bisa anda desain sendiri menggunakan photoshop, coreldraw atau editor lainnya. jika ingin langsung jadi. bisa menggunakan gambar dibawah ini:

simpan file css tersebut,

sekarang buatlah file baru, misalnya dengan nama slideshow3.html.

buatlah programnya seperti ini:

<html>
<head>
 <title>slideshow3 - blog tutorial</title>
</head>

<body><center>
<h1>Meyda Sefira</h1>
<b><font color="black" size="5">slideshow3 - Hadi Kurniawan</font></b>
<div id="main">
 <div id="mosaic-slideshow">
  <div class="arrow left"></div>
  <div class="arrow right"></div>
 </div>
</div>
<center><b><font color="black" size="4">BLOG TUTORIAL: algoritma-cyber.blogspot.com</font></b></center>
</body>
</html>

Jika anda jalankan slideshow3.html tersebut,

maka akan keluar output seperti gambar dibawah ni:

pasti anda bingung programnya puanjang banget yah, tapi outputnya cuma tulisan. hehe.

itu karena anda belum memanggil file style.css yang pertama kita buat tadi.

untuk itu pada file slideshow3.html, tambahkan kode berikut untuk memanggil css yang telah kita buat, letakan dibawah kode </title>

<link rel="stylesheet" href="style.css">

simpan dan jalankan kembali file slideshow3.html tersebut.

jika berhasil, akan keluar output seperti gambar dibawah ini:

sekarang buatlah file baru dengan skript.js.
buatlah program untuk menampilkan gambar yang akan ditampilkan dan untuk membuat efek mosaicnya.


/* The slide images are contained in the slides array. */
var slides = new Array('../../gambar/559932_522322174445499_377680841_n.jpg',
        '../../gambar/270165_10150328604611285_4118081_n.jpg',
        '../../gambar/401275_522167764460940_709106150_n.jpg',
        '../../gambar/141880_475.jpg',
        '../../gambar/734184_517850131589242_1957186392_n.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 3 seconds */
 
 var auto;
 
 auto=setInterval(function(){
  next();
 },10*300);
});

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:5,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=60, tabheight=60;

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 program anda.
dan sekarang kembali lagi pada file slideshow3.html.
tambahkan skrip berikut untuk memanggil skirpt.js yang baru saja dibuat.

<script type="text/javascript" src="script.js"></script>

sekarang tinggal satu langkah lagi untuk menjalankan slideshow tersebut.
anda membutuhkan 1 library jquery, yaitu : jquery.min.js
bisa anda download dilink dibawah ini:

DOWNLOAD DISINI

Jika sudah, masih dalam file slideshow3.html,
tambahkan skrip berikut untuk memanggil jquery.min.js yang baru saja didownload

<script type="text/javascript" src="jquery.min.js"></script>

simpan program anda.
dan sekarang coba anda jalankan lagi.
jika berhasil akan kluar output seperti gambar dibawah ini:

Catatan Hadi

Pages

Kamis, 18 April 2013

Membuat Slideshow Mosaic Pada Website

Tidak ada komentar:

Posting Komentar