Membuat Popup Image Gallery Dengan Jquery dan HTML5

Image Popup atau Photo Popup yaitu gambar gambar yang akan menampilkan ukuran yang lebih besar jika salah satu gambar thumbnail nya di klik.
Beberapa hari yang lalu ada seorang follower di twitter yang menanyakan tentang cara membuat gambar popup untuk gallery website.
Untuk itu kita akan mencoba membuatkan nya, lengkap dengan bahan dan cara singkatnya :)

Ingredients

Bahan-bahan yang kita perlukan adalah :
*Kayak mau masak :)

White Carbonfiber Patter dari subtlepattern
Photo dari Bartek Elsner
Jquery
Jquery Lightbox

Untuk penempatan file silahkan download file yang telah kami sediakan dibagian akhir artikel ini

Code HTML (index.html)

Berikut ini kode HTML untuk bagian [head] [/head]

<link rel="stylesheet" type="text/css" href="css/twd-base.css" /> 

<link rel="stylesheet" type="text/css" href="css/style.css" />

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

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

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

<script type="text/javascript">

$(function() {

    $('#gallery a').lightBox();

});

</script>

Bagian ini digunakan mengaktifkan Jquery Lightbox dengan target ID #gallery

<script type="text/javascript">

$(function() {

    $('#gallery a').lightBox();

});

</script>

Code untuk BODY [body] [/body]

<section>

    <div id="gallery">

        <ul>

            <li>

                <a href="photo/1.jpg" title="Satu">

                    <img src="photo/thumb/1.jpg" alt="tutorial web design" />

                </a>

            </li>

            <li>

                <a href="photo/2.jpg" title="Dua">

                    <img src="photo/thumb/2.jpg" alt="tutorial web design" />

                </a>

            </li>

            <li>

                <a href="photo/3.jpg" title="Tiga">

                    <img src="photo/thumb/3.jpg" alt="tutorial web design"/>

                </a>

            </li>

            <li>

                <a href="photo/4.jpg" title="Empat">

                    <img src="photo/thumb/4.jpg" alt="tutorial web design" />

                </a>

            </li>

            <li>

                <a href="photo/5.jpg" title="Lima">

                    <img src="photo/thumb/5.jpg" alt="tutorial web design" />

                </a>

            </li>

            <li>

                <a href="photo/6.jpg" title="Lima">

                    <img src="photo/thumb/6.jpg" alt="tutorial web design" />

                </a>

            </li>

            <li>

                <a href="photo/7.jpg" title="Lima">

                    <img src="photo/thumb/7.jpg" alt="tutorial web design" />

                </a>

            </li>

            <li>

                <a href="photo/8.jpg" title="Lima">

                    <img src="photo/thumb/8.jpg" alt="tutorial web design" />

                </a>

            </li>

        </ul>

    </div>

</section>

Code CSS (css/style.css)

Untuk mempercantik tampilan awal gunakan code css berikut ini, sedangkan untuk popup lightbox tidak perlu dirubah, kecuali jika diinginkan dan diperlukan.

body{background:url('../images/white_carbonfiber.png');}

section{width:672px;margin:20px auto;background:rgba(255,255,255,.3)}

#gallery{padding:10px}

#gallery ul{

    list-style-type:none;

}

#gallery ul li{

    display:inline-block;

    padding:5px;

}

#gallery ul li img:hover{

    opacity:0.8;

}

Untuk hasilnya yaitu gambar yang membesar ketika di klik, silahkan lihat demo dan download source code nya untuk mempelajari lebih lengkap bagaimana penempatan file nya.

Oke sekian tutorial kali ini
Jangan lupa follow twitter kami di @tut_web untuk mendapatkan info terbaru dunia web design & development
Salam web design Indonesia.