Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template
» » » » » CSS3 lightbox gallery with JQuery

CSS3 lightbox gallery with JQuery

CSS , Efeck Gambar , JQuery , Tutorial Blog
Monday 23 June 2014
Belum ada komentar
CSS3 lightbox gallery with JQuery – Sebelum nya saya pernah memposting Membuat gallery gambar efek Pop Up image dengan CSS Hari ini saya akan membahas tentang CSS3 lightbox gallery with JQuery
Agar lebih jelasnya, berikut adalah tutorial tentang cara CSS3 lightbox gallery with JQuery kedalam posting blog:


Simak langkah2 dibawah ini:

1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style> 
body {
    background:#eee;
    margin:0;
    padding:0;
}
.example {
    position:relative;
    background-color:#fff;
    width:700px;
    overflow:hidden;
    border:1px #000 solid;
    margin:20px auto;
    padding:20px;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}

#gallery {
    height:600px;
    position:relative;
    width:100%;
}
#gallery div,#gallery div a {
    height:128px;
    overflow:hidden;
    width:192px;
}
#gallery div {
    background-color:#fff;
    background-position:50% 50%;
    background-repeat:no-repeat;
    border:2px solid #000;
    left:250px;
    padding:5px;
    position:absolute;
    top:200px;

    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;

    -moz-box-shadow:3px 3px 4px #444;
    -webkit-box-shadow:3px 3px 4px #444;
    box-shadow:3px 3px 4px #444;
}
#gallery div a {
    display:block;
    text-indent:-1000px;
}
div#fancy_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 30;
}

div#fancy_loading {
    position: absolute;
    height: 40px;
    width: 40px;
    cursor: pointer;
    display: none;
    overflow: hidden;
    background: transparent;
    z-index: 100;
}

div#fancy_loading div {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 480px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZ-0ockZQHElH42CTvYkc5Lb1Zo-gSfkFk75QFe8d5SjsktbZeOmKGiNQjE_8TWsiZdxjKX4-uJVhe3NBIvN-wXpl5x2pf1CrHluJJcV5pVQ78tn6xk_7uh8NVeSgo08LIuEzhmynjOgz/s1600/fancy_progress.png') no-repeat;
}

div#fancy_outer {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 90;
    padding: 20px 20px 40px 20px;
    margin: 0;
    background: transparent;
    display: none;
}

div#fancy_inner {
    position: relative;
    width:100%;
    height:100%;
    background: #FFF;
}

div#fancy_content {
    margin: 0;
    z-index: 100;
    position: absolute;
}

div#fancy_div {
    background: #000;
    color: #FFF;
    height: 100%;
    width: 100%;
    z-index: 100;
}

img#fancy_img {
    position: absolute;
    top: 0;
    left: 0;
    border:0; 
    padding: 0; 
    margin: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
}

div#fancy_close {
    position: absolute;
    top: -12px;
    right: -15px;
    height: 30px;
    width: 30px;
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Tftb2QIlq7idLYc55Ys5G6BJ9tKpm4u5Inhz0Da5-Liro4SUgsLxYv3U7woUWoXcQrLOKdOJ-glkaqS9hjRWmxrTDanR5RIdwMkyZRgQpGbGJtzKdURGIfM76LkpLRgTcQbpaUGHh9BA/s1600/fancy_closebox.png') top left no-repeat;
    cursor: pointer;
    z-index: 181;
    display: none;
}

#fancy_frame {
    position: relative;
    width: 100%;
    height: 100%;
    display: none;
}

#fancy_ajax {
    width: 100%;
    height: 100%;
    overflow: auto;
}

a#fancy_left, a#fancy_right {
    position: absolute; 
    bottom: 0px; 
    height: 100%; 
    width: 35%; 
    cursor: pointer;
    z-index: 111; 
    display: none;
    background-image: url("data:image/gif;base64,AAAA");
    outline: none;
    overflow: hidden;
}

a#fancy_left {
    left: 0px; 
}

a#fancy_right {
    right: 0px; 
}

span.fancy_ico {
    position: absolute; 
    top: 50%;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    z-index: 112; 
    cursor: pointer;
    display: block;
}

span#fancy_left_ico {
    left: -9999px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsL0a9bQdlpXM3nEe5q2kBGpsi-zBqzpXT3t1QxoY9kCp8AxYHV7ldp-bU90m1-HQSlAdrSPy6kCBuKs4xaSXuWMiwMfjKItJTUih1iDzRCYRO6NsM1OXd3M2HLsKrG0X72auY56KqqLX2/s1600/fancy_left.png') no-repeat;
}

span#fancy_right_ico {
    right: -9999px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfszIcHtD8Y197csUaXVcH1ieYKQk_COwhRIfyGi-GbUsT29qbEH1jewsC2isoU2USywXxn-qvO8tYBdxOr8PXTkbnmPhaqyeOGB3pREuESqdjdPyIZjI4XAQnMYu-RmD1Nu9SDhSVEVQC/s1600/fancy_right.png') no-repeat;
}

a#fancy_left:hover, a#fancy_right:hover {
    visibility: visible;
    background-color: transparent;
}

a#fancy_left:hover span {
    left: 20px; 
}

a#fancy_right:hover span {
    right: 20px; 
}

#fancy_bigIframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

div#fancy_bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 70;
    border: 0;
    padding: 0;
    margin: 0;
}
    
div.fancy_bg {
    position: absolute;
    display: block;
    z-index: 70;
    border: 0;
    padding: 0;
    margin: 0;
}

div#fancy_bg_n {
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlb-dntJIMK5_riFUQ1TewGxd9By8XeYFjO1DEK0hclmLG0fRBk4JpLoSocEzkN9bR8Giy6CTRnd4SD4oGnABbDzSFLEfInDhTmywj05vM0M4nSM4VKbjNzFXl2W3_XT9_pp63jeMGfExY/s1600/fancy_shadow_n.png') repeat-x;
}

div#fancy_bg_ne {
    top: -20px;
    right: -20px;
    width: 20px;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPhZEehdLo4AhU1Sbp1dmVa-7kTo-8lT3U_xtPgnElkdyyXdl6mQchCyMLW7Zln5MxiskyXdIw-IiGKlUg7E0wO1MsdiWlryZDcr1KsLzCYJZbbMEvYwBdFhcG3f2VlWzV9wL_57HR1s0H/s1600/fancy_shadow_ne.png') no-repeat;
}

div#fancy_bg_e {
    right: -20px;
    height: 100%;
    width: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOPK157lRAlBGrrzhZjMadepT07voiM6UWSbj3mWZJiMQfC83MhD2krVvbmYCnvfHFQ9Y4ed5ubO0USZ0w4fk1gu_d8cm4Gzlw_h9R4FoV2D6_zwtZJKO9SUeh12DEU9GZfQzjMnUITO8/s1600/fancy_shadow_s.png') repeat-y;
}

div#fancy_bg_se {
    bottom: -20px;
    right: -20px;
    width: 20px;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ68sAZ3aV_bo8S60DJ6JQahY8LqifSZj5Ent9Gxa6rs7_xrGRxyEV3mPrM7p6mQ62WC3zrn46p_4iCQcxowUIu5W5aLVuBSo58bwXnHCiOW2SJcBwftRWUOdxeIkgR_XmbJ5zRKPBmjbN/s1600/fancy_shadow_se.png') no-repeat;
}

div#fancy_bg_s {
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDOPK157lRAlBGrrzhZjMadepT07voiM6UWSbj3mWZJiMQfC83MhD2krVvbmYCnvfHFQ9Y4ed5ubO0USZ0w4fk1gu_d8cm4Gzlw_h9R4FoV2D6_zwtZJKO9SUeh12DEU9GZfQzjMnUITO8/s1600/fancy_shadow_s.png') repeat-x;
}

div#fancy_bg_sw {
    bottom: -20px;
    left: -20px;
    width: 20px;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRXmANzyqiMpsKupkjZjjDLHTPVorv1Ac8jAvRy5Y9DS2qGGDsBvALVtOqY6feMvDGCMbX9Nl8xqhbIka9gXEcc1F8oUb69YqX84TwQ-fGcMYpckSpFv9v_gd5De3ZVUKkiFW0Tj67GJeG/s1600/fancy_shadow_sw.png') no-repeat;
}

div#fancy_bg_w {
    left: -20px;
    height: 100%;
    width: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLnE62n9T5LHMxMN1yMwPzmAexCjglRrUkiIcrsBf99F4TyARR-C0BmqOFncol96vwZO33i-HqBJp2hWU7sGSOsaideQRBgivhfMpqVEeuBtHl3CsiO6UBOf6VL_gyqm-2zcDRq0RDLHhk/s1600/fancy_shadow_w.png') repeat-y;
}

div#fancy_bg_nw {
    top: -20px;
    left: -20px;
    width: 20px;
    height: 20px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoSS2NX49BKDrFv0vBgKSt-O2fC7MYHq3m4lSBqoNPoB7N36QTfowxzLDoz1hKUlfCn3UwljzsOpJRctgri7O7bnVmL7BzVT81va434hkt-91BZz7vcHCA7IPF24gM64g3e_d99EeO8Mpw/s1600/fancy_shadow_nw.png') no-repeat;
}

div#fancy_title {
    position: absolute;
    z-index: 100;
    display: none;
}

div#fancy_title div {
    color: #FFF;
    font: bold 12px Arial;
    padding-bottom: 3px;
    white-space: nowrap;
}

div#fancy_title table {
    margin: 0 auto;
}

div#fancy_title table td {
    padding: 0;
    vertical-align: middle;
}

td#fancy_title_left {
    height: 32px;
    width: 15px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyVl06RMf5XRO5cT9zPLe6df1gXPbETMPCW5VCdbq0VhA2iV3SZdMsIzcyP7ARskfV4SX8vDvH59jNjyTcTIX8SQxp2QiuIrgQyCTSsF8iO5uQ38K29BBFgLWa5E57x1LFTTkpAhjgRzdz/s1600/fancy_title_left.png') repeat-x;
}

td#fancy_title_main {
    height: 32px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwaBeKaixqFtF6Lc2-djNaucALherI5lPwgDPcIVI4KSWDGZmQbmZd278njEFPxjBiW6AimsOB8-84NTo7HRvNC_o73L1pBe7ukhbT732EYb15lwTtDTW9VgE9LDRYsKKynnUD-V8jvFvB/s1600/fancy_title_main.png') repeat-x;
}

td#fancy_title_right {
    height: 32px;
    width: 15px;
    background: transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6xhP_DOLSYjUf-ogdEPmIvCudyEatjM4wV3qB9mmt_ierxzusQZDE4W4ToV8w2E5p-DryKdOqeQytEAnTduTvlc2dEErp8b8oNQ5saYjc8nS4Jp40MoRrXAXJsIg_JnGl6Q5lOXN_5BiD/s1600/fancy_title_right.png') repeat-x;
}

5. Tekan Ctrl+F cari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/vanzdy/script/jquery-css-transform.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/vanzdy/script/jquery-animate-css-rotate-scale.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/vanzdy/script/jquery.fancybox-1.2.6.pack.js"></script>
<script>
$(document).ready(function(){ // on document ready

    // onload - randomizing photos
    $('#gallery div').each(function() { 
        var iRL = Math.floor(Math.random() * 500);
        var iRT = Math.floor(Math.random() * 350);
        var iMT = Math.floor(Math.random() * 100 - 50);
        $(this).animate({
            left: iRL, 
            top: iRT, 
            rotate: iMT + 'deg',
        }, 2000); 
    }); 

    var bPrevClick = false; // preventing clicking will solve problem with fancybox
    $('#gallery div').draggable({ // making photos draggable
        containment: 'parent',
        start: function(e,ui) {
            bPrevClick = true;
        },
        stop: function(e, ui) {
            setTimeout(function() {
                bPrevClick = false;
            }, 50);
        }
    });
    $('#gallery div a').bind('click',function(e) {
        if (bPrevClick) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });

    $('#gallery div').mousedown(function(e) { // on mouse down
        var iMZ = 0;
        $('#gallery div').each(function() { // searching for max zIndex
            var z = parseInt($(this).css('zIndex'))
            iMZ = (z > iMZ) ? z : iMZ;
        });
        $(e.target).closest('#gallery div').css({ // we will UP actice image
            zIndex: iMZ + 1
        });
    });

    $('a.fancybox').fancybox({ // fancybox initizlization
        zoomSpeedIn: 500, // zoom IN speed
        zoomSpeedOut: 500, // zoom OUT speed
        overlayShow: false // using overlay
    });
});</script>
Note:
Jika script yang saya block warna kuning tersebut sudah terpasang di template sobat, sobat tidak perlu memasang nya kembali cukup copy script yang belum terpasang saja.
6. Simpan Template.

Penerapannya:

Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.
    <div id="gallery">
        <div id="1" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifpK5W32bvvXw7lxWN6jyEUTqreoh7VxMRDAErjD5oKYAJ02MTEkx2QeIwWgrrgwP-JkQ4_zu70DU4f8nljzVGPo63Ek1EzJGagmx5gklhEnu5aFtRkQXQVg_7m6yjt-Q2UrnsAsyTOwUN/s1600/Thumb_Earth+Digital.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXWKQEGNGmUXSfAVGh5EszCfgZNxAliexfmyMUPHPfocCffGNbDhmSw2OZnyEzAGzoQeAGIARtmZ_VRexhrJ1y4GJPzhV0MZSlmDdhzKNhzqLbVSM-bRK57O4by_WcEhqTGtrPDZtvxwrc/s1600/Earth+Digital.jpg" target="_blank">photo 1</a>
        </div>
        <div id="2" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC0gn5Tor5WmKBwHC1ITFBr7JdtQoNEvPUDCRhl2Gys-4R3vMMb_KXVP67nQxpx-npRMtiN2xhp-h0PCx5q7syD2cGaNbICF9EBkIXbZmd0_rKVjBJv9RK5CSuJUgy4SC7sI3U2AapPGdB/s1600/Thumb_Earth+Digital2.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcdE6VehMYapATV-BQ-8Pvf0eIF5okZYusx5CejLBEKis9Tf9ONgdz1mq9ZOsS_0wUqDD_-jeE0I77QfSabJs5L9FPfQLXX80nND8nRV3JdKO7yQ7NIaVElohVsRsw1Q2b7DwgRCQpjQzl/s1600/Earth+Digital2.jpg" target="_blank">photo 2</a>
        </div>
        <div id="3" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf3wSO52USsxtc5u-2acBpv0Njg0sJ6twFfCy-fJsXZzwnCiizd4_W_bd92F-S92iNDR5XJWgUGP6xTUG_w5Mqti6O_fJkx9eK_A8nzJ1kIkLALQ18-bx2ObCvAOEGy6C3FPAIWRoE-yLQ/s1600/Thumb_Earth+Digital3.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEeERmKWFHGA5tZWDkswvfPoJihQpeTRz1VfoZQFjl_Cv4iEx6oxCvfNPgISqxkzq5YvIEbrUT8vYM99tyPURek2WOheX9eWYV_aGpFpWYrwqmE2jSI4uz9AlbV8dkNRcwMCg7FhcPygyh/s1600/Earth+Digital3.jpg" target="_blank">photo 3</a>
        </div>
        <div id="4" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjal52StUyqSvFEmZCxLR2SLB20kyfNEePRGKXsrqwkEKrneyTJTey7ZMHrXhZgMY6ExF3YmIPHEjssvC1e5eESL83AH5nNte0OPL_bv9i2OpKV72Det7DkDkPaGS92tZXrTmbV7fkpjiey/s1600/Thumb_Earth+Digital4.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-7RBxYSiWZszxoIZQFNJC17e2I2VNI5OCxzL38yCOu-X7RD3MX8NttPghr1yKsnE9oJAstCFDSZrp3iumalpcbsFYi0m3T3Ff76phtEwoBTiteh_cEQwM-ccPBA4nVOxIqmTLh-VaeqDx/s1600/Earth+Digital4.jpg" target="_blank">photo 4</a>
        </div>
        <div id="5" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgRvHXml0YVJTx9hI1E_KQfHkWOl7XW2Y9vc_FZWeW382VbCuCsKXRj7YzndD2Z3emYHBW5HgSVULuBWZ65Y5sYyCWEfhtgaWcet50PtbpQa08_zW9iF5P-1KKFUjyOfHPVH_yJe7BYKm5/s1600/Thumb_Earth+Digital5.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8v5h52Yw1iefHLWm4X1ODFW_uOK8PpbGzNnv7Mwy5FutTKx06-GljBXhY8lzGh-I7X7WQdrOE1bJNTG2GUwhSpDrX-scf5kRcpDhqOPiD5N4d0T3bHWImS8-ZRxdOL3Gq5xI8lluLFLMf/s1600/Earth+Digital5.jpg" target="_blank">photo 5</a>
        </div>
        <div id="6" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp4bjL3dwr-T2syoK2uqljYInlcoEpNsTgoL1aNAXh2wVWjsacScrd0EfU812DkYoz45xs7tzM5GxAJHl3HW3z7Xl63QTBQm3KKMVid6M5ZDzeilEQtaZ8WZiawef3hp8fgGzg1xF4Kz6w/s1600/Thumb_Earth+Digital6.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMPspEbLOaHuLDY_kE-TSrwKl6nmvUI1edVpe9l-GVdRd6GYSqhW8wLSjWx4Ncj_3yfY2SyXcXRNZPZ2OVQOaCB_EU4DZzsiO5zvthHwAWpdwOpp1MHaABEqY6rzUySJ4dtBPTsEjyZ61t/s1600/Earth+Digital6.jpg" target="_blank">photo 6</a>
        </div>
        <div id="7" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMZfJhHRkYGXwRkON_MEYi4hjsjCtln2UvhaRCK9GiElB3CNTcCWxtgKYXn098SjHQeLVYLt6XHBVcYdPwof10CKOBCo4dLbRJ4_jGk3bIVm7QXo0bFjSf1XmzuC6Tfti_065HUkAubb3K/s1600/Thumb_Earth+Digital7.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE5XNDIh8IZPxP8EVH_xM8XeczFecBjdDUr6f_bGMm_83-5yPBOiLIn4dMkp79z-aI244bbKPguczywp3Qx46YPw-8bSwEFAg5-FP-XIU_rm8N1c89o0_Lr4QLjoN1n1MzAnZ0fSYQm2M-/s1600/Earth+Digital7.jpg" target="_blank">photo 7</a>
        </div>
        <div id="8" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1v7rjNCAbi5TJ7d0jRYAwhxEYxWCnCWoJ8rzZU8LjZimujmIzW-ZMp-DnoWl5jBkOhco7nh9ia0k7-FEYv0MtXdJEE7Q1GrVBm1fqJWEEm95Mvh4wrRZ9jWFBaes0sgY6uR6MPKTp3dpk/s1600/Thumb_Earth+Digital8.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhyApg4fLdbXh4FhnMS03HPDUszgag9OABbcFnPgeVlgliwYrG8eLZWlMUCcZvk-vNKvj-C0Uzj4IKXcuBm03o2DvTHH4kCxjP5GuCE2AinsZHA4Q6B_1cpDmVd7mC-NKrfl-iBFWhQMrR/s1600/Earth+Digital8.jpg" target="_blank">photo 8</a>
        </div>
        <div id="9" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCReU1ayfp3PqNP5jkmCQbUfkqxBCCfMmMtVInZNvHAVE-TR3AeWTshyaho1f3vCn0919vTUrM8X73KKb2UIiE1N32hWpagBdG_qSc6geVFZpWehZWJecgNISwz1imvZIV2KKHmmwT5OE5/s1600/Thumb_Earth+Digital9.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFgsN5WfshDA8TX1-fJj4hEF5q9V9kTNwBh2pSq_Aq7Uj6LK3h4r8c7x4oNdGrl1EE0ZefxaSnIYiFkbR_Mh0pFvu40wW8Jp0-RF_5AN72ObYh-dZ37-KkxQi_7KwD-giZ8rbEmFdJsT-M/s1600/Earth+Digital9.jpg" target="_blank">photo 9</a>
        </div>
        <div id="10" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9ENBPV1cI-Or7n76Vz_8GI1t2lcmJIa8OejoWXlwISqdE0qrQnST3WZ-Ybxal7fcjFs8naPv2CzRvDWwXSZHQJv_Ql1wnXE9TFSvXvwyRMR6A-xVBuMZZQGAZ0Y4c9YfgW5VlCtETKyhU/s1600/Thumb_Earth+Digital10.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZRyUBTZPTY2b8G6NefvZJLew5gAA7a6PZbOGvdX9dLQ7dpHHXYgcRnq5UPFljl04ZkOdBPDSguVq3JDtkuZ1o3aMXqydK1uDBnN4fOdfHzbrTqf_Smv3g342Gb6s_BCwNjm6hz4kUxl9m/s1600/Earth+Digital10.jpg" target="_blank">photo 10</a>
        </div>
        <div id="11" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-yNoc0DgGeUqFIgjezHHjai60TXsZBzIQ1vTIeIHkzhLln8w4Wl6EILaWvSUxTalZafk1kNmclyjTjA0WPMSvtEKqOmAw9JuxBvQ_8TaVeCITFj8kBT5YZjmeiUkQhQN08xWoUNOpIq7a/s1600/Thumb_Earth+Digital11.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibdiQPMQC3ES19-j_59aHY7-GAx4AEX7HuaCKCuxrWNT8NmsA1H84raGxP2x_tgU6MdzMWY3TAQLudBbZYT7HFjNUmD60eDRgKInHRCIWCSgtmcALW5XU6Osjrp_KrfevXpG4T-RHFFNVR/s1600/Earth+Digital11.jpg" target="_blank">photo 11</a>
        </div>
        <div id="12" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinS8Ng_d3LmyX_ODCAdqWF-AEQ5VPXjFkak4kUxqBA5qQuTgWVCwgjuuUbAVB7JU7ir-0VoUCKCKX4fwrGc6S2LfVEWr6pD3eEILxxEqu8q-6HR01vhEMeSdjuODCCJmESQT8S0c4674Dh/s1600/Thumb_Earth+Digital12.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMiMHb4yloa4QlrPfcwchqWKA7SA69ZK226tUMUfsmIci51yK7YxiQrblLbQRi5I3iBqmE95mNac79eNFqHasUV2nDv26-Rgo6v-g46LKNBzqdj4z-2_ov1cz9ZEUx9wjltMk4hCjNnSgW/s1600/Earth+Digital12.jpg" target="_blank">photo 12</a>
        </div>
        <div id="12" style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDjTYB4xAW-ms5gn9rDbQC6yv2t_-N1qIHIU6_-KwjbXlWcyItbNy4LWA0RcvFBNoIJ_MEsKsX9WCYRJ4IZ_C6mm6iiTDsCcAQ82ZgPPmL5uT0Y4FTWHzRLv05tvpXXY3FJL4kZe5lfpgs/s1600/Thumb_Earth+Digital13.jpg)">
            <a class="fancybox" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKIGoDWvj46jy_Yup5Fab_i70J0DMXpEMQTs5o2ADqw1qhZMObARUXnemmMQh1cqH7NqzKwMWd4nmtm9TBkZ9MRvF77P5lX3gX9Ue0dOvbwxe8YjhgRRaOEGwTvl1eMYNYFCis1MvrFyLj/s1600/Earth+Digital13.jpg" target="_blank">photo 13</a>
        </div>
    </div>
</div>
Keterangan:
Sobat bisa ganti URL gambar dengan gambar lain yang sobat inginkan atau gambar kesukaan sobat.

DEMO nya seperti ini :

Terima kasih telah membaca artikel tentang CSS3 lightbox gallery with JQuery di blog blog sepot jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini diwebbroswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :

Kata Share | Mas Sehat | Ston SEO Responsif Blogger Template