Kategori Random

Memasang JQuery Isotope pada tampilan portofolio item

Posted : 30 Januari 2015 | 19:24:28 , Dibaca 1662 kali

JQuery Isotop adalah plugin Jquery yang membantu kita dalam menampilkan view beberapa image secara resvonsive dan menarik. Jadi sekali klik maka galeri akan langsung tampil, tanpa diproses ulang lagi.

Gambar Tampilan Akhir Isotope

Penggunaan Jquery Isotope biasa banyak digunakan pada portofolio image yang banyak. Dengan menggunakan plugin ini kita dapat membagi-bagi kategori (filter) ke beberapa kategori.

Struktur filenya dapat dilihat seperti dibawah ini.

Baik mari kita mulai, Pertama buat sebuah file .html dan buatkan codenya seperti dibawah ini.

<!DOCTYPE html>
<html>
<head>
<title>jQuery Isotope</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.isotope.js" type="text/javascript"></script>


<script type="text/javascript">

//isi script js nya
</script>
</head>

<body>


</body>
</html>

 

Kemudian sisipkan code dibawah ini diantar tag <script> .. </script>

$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    });
});

 

Kemudian code dibawah ini adalah untuk file css nya buat sebuah folder css agar lebih rapi, dan buat persis seperti code dibawah

 

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 100px;
  box-shadow: 1px 1px 10px #DDD;
}
header{
  height: 60px; background: #006666; color: #FFF;
  padding: 10px; border-bottom: 2px solid #33FF00;
}

.portfolioFilter{
  margin-top: 20px;
  height: 100px; padding: 10px;

}

.portfolioFilter a {

    color:#FFF; background: #006699;
    text-decoration:none;
    border: 1px solid;
    padding: 10px;
}

.portfolioFilter a.current {
  background: #00CC99;
    font-weight:bold;
}

img {
    margin:5px; width: 400px; height: 250px;
}

.isotope-item {
    z-index: 2;
}
.isotope-hidden.isotope-item {
    pointer-events: none;
    z-index: 1;
}
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}
.isotope {
    -webkit-transition-property: height, width;
    -moz-transition-property: height, width;
    transition-property: height, width;
}
.isotope .isotope-item {
    -webkit-transition-property: -webkit-transform, opacity;
    -moz-transition-property: -moz-transform, opacity;
    transition-property: transform, opacity;
}

Oke sampai saat ini masi bisa kan, kita lanjutkan kembali dengan menyisipkan code dibawah diantara <body> ... </body>

<header>
 <h1>jQuery Isotope Image Galeri</h1>
</header>
<div class="portfolioFilter">
    <a href="#" data-filter="*" class="current">All Categories</a>
    <a href="#" data-filter=".teknologi">Teknologi</a>
    <a href="#" data-filter=".places">Places</a>
    <a href="#" data-filter=".food">Food</a>
    <a href="#" data-filter=".objects">Objects</a>
</div>

<div class="portfolioContainer">
    <div class="teknologi">
        <img src="images/cloud.jpg" alt="image">
    </div>

    <div class="places objects">
        <img src="images/eiffel1.jpg" alt="image">
    </div>

    <div class="teknologi">
        <img src="images/cloud2.jpg" alt="image">
    </div>

    <div class="food">
        <img src="images/pastel.jpg" alt="image">
    </div>

    <div class="people places">
        <img src="images/place1.jpg" alt="image">
    </div>

    <div class="places objects">
        <img src="images/place2.jpg" alt="image">
    </div>

    <div class="teknologi">
        <img src="images/teknologi.jpg" alt="image">
    </div>

    <div class="food">
        <img src="images/food.jpg" alt="image">
    </div>

    <div class="food">
        <img src="images/jeruk.jpg" alt="image">
    </div>

</div>

Dan jika kita gabungkan code lengkapnya adalah sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<title>jQuery Isotope</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/jquery.isotope.js" type="text/javascript"></script>
<script type="text/javascript">

$(window).load(function(){
    var $container = $('.portfolioContainer');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false
        }
    });

    $('.portfolioFilter a').click(function(){
        $('.portfolioFilter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
         });
         return false;
    });
});

</script>
</head>
<body>
<header>
 <h1>jQuery Isotope Image Galeri</h1>
</header>
<div class="portfolioFilter">
    <a href="#" data-filter="*" class="current">All Categories</a>
    <a href="#" data-filter=".teknologi">Teknologi</a>
    <a href="#" data-filter=".places">Places</a>
    <a href="#" data-filter=".food">Food</a>
    <a href="#" data-filter=".objects">Objects</a>
</div>

<div class="portfolioContainer">
    <div class="teknologi">
        <img src="images/cloud.jpg" alt="image">
    </div>

    <div class="places objects">
        <img src="images/eiffel1.jpg" alt="image">
    </div>

    <div class="teknologi">
        <img src="images/cloud2.jpg" alt="image">
    </div>

    <div class="food">
        <img src="images/pastel.jpg" alt="image">
    </div>

    <div class="people places">
        <img src="images/place1.jpg" alt="image">
    </div>

    <div class="places objects">
        <img src="images/place2.jpg" alt="image">
    </div>

    <div class="teknologi">
        <img src="images/teknologi.jpg" alt="image">
    </div>

    <div class="food">
        <img src="images/food.jpg" alt="image">
    </div>

    <div class="food">
        <img src="images/jeruk.jpg" alt="image">
    </div>

</div>

</body>
</html>

 

Penggunaannya agar bisa diakses pada class cukup ditambahkan aja apa nama filternya. Jika satu gambar pengen dibuat jadi bebera filter bisa ditambah dengan nama class filternya dipisahkan dengan spasi.

Dan coba anda jalankan bagaimana hasilnya cukup menarik bukan. Sekian tutorial kali ini.

Semoga bermanfaat.

Source Code | Demo

Postingan Terkait
» Membuat Text Slider Testimonial dengan JQuery Cycle Plugin ( 10 Mar 2015 | 16:06:41 , 2716 hits )
» Sorter Data Tabel MySQL berdasarkan judul dengan JQuery Table.Sorter ( 23 Feb 2015 | 09:42:55 , 3508 hits )
» Membuat SyntaxHighlighter pada website ( 30 Jan 2015 | 04:28:10 , 1305 hits )
» HTML5 ( 20 Jan 2012 | 04:08:00 , 1493 hits )
» jQuery Mobile ( 20 Jan 2012 | 04:08:00 , 1822 hits )