Membuat Gallery Slide dengan Jquery

Daripada pusing , belum jelas mau posting apa, mending kita belajar membuat Gallery Slide dengan Jquery. Oke berikut screenshootnya :

Selanjutnya berikut caranya :

1. Buat 3 buah folder yaitu css, gambar, dan js .

2. Kita buat 2 buah file css dan simpan di dalam folder css :

scrollable-button.css

/* this makes it possible to add next button beside scrollable */
.scrollable {
    float:left;
}
/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(img/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    float:left;
    margin:40px 10px;
    cursor:pointer;
    font-size:1px;
}
/* right */
a.right                 { background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover         { background-position:-30px -30px; }
a.right:active     { background-position:-60px -30px; }
/* left */
a.left                { margin-left: 0px; }
a.left:hover         { background-position:-30px 0; }
a.left:active     { background-position:-60px 0; }

/* up and down */
a.up, a.down        {
    background:url(img/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}
/* up */
a.up:hover         { background-position:-30px 0; }
a.up:active         { background-position:-60px 0; }

/* down */
a.down                 { background-position: 0 -30px; }
a.down:hover         { background-position:-30px -30px; }
a.down:active     { background-position:-60px -30px; }
/* disabled navigational button */
a.disabled {
    visibility:hidden !important;
}

scrollable-horizontal.css

/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scrollable {
    /* required settings */
    position:relative;
    overflow:hidden;
    width:450px;
    height:90px;
    /* custom decorations */
    border:1px solid #ccc;
    background:url(img/h300.png) repeat-x;
}
/*
    root element for scrollable items. Must be absolutely positioned
    and it should have a extremely large width to accomodate scrollable items.
    it's enough that you set the width and height for the root element and
    not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}
/* single scrollable item */
.scrollable img {
    float:left;
    margin:3px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    cursor:pointer;
    width:80px;
    height:80px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}
/* active item */
.scrollable .active {
    border:2px solid #000;
    z-index:9999;
    position:relative;
}
    /* end scrollable styling */
body {
    font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
/* get rid of those system borders being generated for A tags */
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}

3. Download file jquery berikut di
sini dan ekstrak di folder js.

4. Masukan gambar yang akan di jadikan slide kedalam folder gambar.

5. Buat file gallery.html

gallery.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="Geany 0.18" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/scrollable-horizontal.css">
    <link rel="stylesheet" type="text/css" href="css/scrollable-buttons.css">
    <script type="text/javascript" src="js/jquery.tools.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
          $("div.scrollable").scrollable();
        $(".items img").click(function() {
             // hilangkan _t dibelakang nama file foto untuk foto yang besar
             // misal foto kecil (air_t.jpg) dihilangkan _t untuk foto besar menjadi (air.jpg)
             var url = $(this).attr("src").replace("_t", "");
             // untuk area gambar besar diberikan efek fade (semi transparan)
             var wrap = $("#image_wrap").fadeTo("medium", 0.5);
             // load foto
           var img = new Image();
              img.onload = function() {
              wrap.fadeTo("fast", 1);
              wrap.find("img").attr("src", url);
             };
             img.src = url;
        }).filter(":first").click();
        });
    </script>
    <style>
        /* style untuk image wrapper (preview image) */
        #image_wrap {
             width:470px;
             margin:15px 0 15px 30px;
             padding:0px 0;
             text-align:center;
             background-color:#transparent;
             border:2px solid #fff;
             outline:1px solid #ddd;
             -moz-ouline-radius:4px;
             -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="text">

      <div id="image_wrap">
         
         <img src="images/blank.gif" width="200" height="200" />
      </div>
      
      <a class="prevPage browse left"></a>
      
      <div class="scrollable">
         
         <div class="items">
        
            <img src="gambar/linux-mint.png">
            <img src="gambar/archlinux-logo.png">
            <img src="gambar/debian-logo2.jpg">
            <img src="gambar/gentoo-linux.jpg">
            <img src="gambar/mandriva-logo.jpg">
            
            <img src="gambar/slackware_logo.png">
            <img src="gambar/start_here_suse.png">
            <img src="gambar/zenwalk-logo.jpg">
            <img src="gambar/linux-mint.png">
            <img src="gambar/gentoo-linux.jpg">
      </div>
    </div>
    
    <a class="nextPage browse right"></a>
    <br clear="all">
</div>
</body>
</html>

6. Ganti tulisan berwarna merah sesuai dengan nama gambar yang ada di folder gambar.

7. Selesai

Selamat Berkreasi..

Abby Acakadud

Membuat Gallery Slide dengan Jquery

1 komentar:

Abby Acakadud

Membuat Gallery Slide dengan Jquery

Share this

1 komentar: