Cara Membuat Gambar Lightbox dengan Efek Transisi

By |Updated: November 10, 2016 0 Comment

Image atau gambar lightbox, Ada banyak versi untuk membuat gambar atau bahkan menampilkan video dalam lightbox, sementara bagi pengguna platform Blogger terdapat fitur ini, tetapi dengan tampilan standar. Namun fitur ini juga bisa digunakan pada platform lain.

Umumnya versi ini bekerja di semua browser modern, bekerja dengan baik jika menggunakan chrome.

Fitur ini akan menampilkan gambar dengan efek transisi, jika tombol navigasi di klik pada gambar sebelum atau berikutnya. Sebenarnya efek transisi dapat dirubah dengan jenis lain dalam gaya pengaturan CSS tersendiri.

DEMO

Fitur ini pada dasarnya akan menampilkan gambar apapun dengan menambahkan “class” di link gambar, sehingga fungsi ini bisa bekerja dengan benar. Dapat juga menambahkan beberapa judul atau keterangan gambar, selengkapnya dapat dilihat dalam halaman demo.

Cara membuat gambar lightbox dengan efek transisi

Jika menggunakan platform Blogger dan untuk menghindari konflik dengan versi Blogger (jika ada) maka disarankan menonaktifkan settingan “showcase image with lightbox” di dashboard, dan untuk platform website lain sepertinya tidak masalah.

lightbox

Image: lightbox

Lightbox ini dimodifikasi dari responsif JQuery “smoothbox” yang dibuat oleh Kevin Thornbloom, dan bebas untuk digunakan maupun dimodifikasi secara pribadi dengan lisensi MIT (open source).

Dirancang dengan efisien, ramah dan kompatibel dengan browser modern besar seperti Chrome, Firefox, Safari, Opera dan Internet Explorer. Kode ini sudah minified dan dioptimalkan dengan efisiensi dan script itu sendiri memiliki berat yang sangat ringan, ukuran kecil sebagai 2kb dalam versi minified.

Berikut adalah langkah-langkah cara membuat gambar lightbox:

1. Masukan kode berikut diatas/sebelum ]]></b:skin> atau </style> pada CSS style di bagian head.

CSS gambar lightbox flexible

body, html {
    height:100%;
    width:100%;
}
/* wrapper */.smoothbox {
    position: fixed;
    top:0;
    left:0;
    background:rgb(0,0,0);
    background: rgba(0, 0, 0, 0.9);
    height:100%;
    width:100%;
    z-index: 9999;
}
/* wrapper after loading */.sb-load {
    background:rgb(0,0,0);
    background:url("https://lh6.googleusercontent.com/-FM9P-BVPqos/Ut_vz4S__ZI/AAAAAAAAJZ0/LneOszA_Qf0/s128/loading.gif") center no-repeat rgba(0,0,0,.9);
}
/* vertical centering */.smoothbox-table {
    top:0;
    height:100%;
    width:100%;
    display:table;
}
.smoothbox-centering {
    display:table-cell;
    vertical-align:middle;
    top:0;
    height:100%;
    width:100%;
}
/* horizontal centering sizing */.smoothbox-sizing {
    display:none;
    position: relative;
    margin: 0 auto;
    padding: 0px;
    width: 80%;
}
/* item wrapper */.sb-items {
    margin: 0 auto;
    width: auto;
    padding: 0;
    list-style: none;    
    border-radius: 2px;
    display: table;
}
.sb-items:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
/* items */.sb-item {
    left: 0;
    top:0;
    width: 100%;
    max-height: 80%;
    float: left;
    margin-right: -100%;
    position: relative;
    zoom: 1;
    border-radius: 2px;
    box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 1), 0px 0px 17px 9px #E0FF00;
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 500ms ease-out;
    -moz-transition:all 500ms ease-out;
    -o-transition:all 500ms ease-out;
    -ms-transition:all 500ms ease-out;
    transition: all 500ms ease-out;
    max-width: 800px;
    max-height: 550px;
}
.no-trans {
    -webkit-transition:none;
    -moz-transition:none;
    transition:none;
}
.sb-item img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 2px;
    position: relative;
    max-width:800px;
    max-height: 550px;
}
/* forward animation */.sb-item-ani {
    top: 100px;
    opacity:0;
    -webkit-transform: scale(.3) rotate(720deg);
    -moz-transform: scale(.3) rotate(720deg);
    -o-transform: scale(.3) rotate(720deg);
    -ms-transform: scale(.3) rotate(720deg);
    transform: scale(.3) rotate(720deg);
}
/* back animation */.sb-item-ani2 {
    top:50px;
    -webkit-transform: rotate(720deg) scale(.3);
    -moz-transform: rotate(720deg) scale(.3);
    -o-transform: rotate(720deg) scale(.3);
    -ms-transform: rotate(720deg) scale(.3);
    transform: rotate(720deg )scale(.3);
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity:0;
}
.sb-caption {
    position: absolute;
    bottom: 0px;
    width: 100%;
    background:rgb(0,0,0);
    background: rgba(0, 0, 0, 0.9);
    color: #CCC;
    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
    z-index: 1;
    text-align: center;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    opacity:0.8;
}
/* buttons */.sb-nav {
    position:absolute;
    bottom:-40px;
    width: 100%;
    margin: 0 auto;
    display: none;
    z-index: 10;
    text-align: center;
    font-size: 0;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    zoom:1;
}
.sb-nav:hover {

}
.sb-prev {
    display: inline-block;
    background:#000 url("https://lh4.googleusercontent.com/-AF3ZN7tP85Q/Ut_vz2d5QPI/AAAAAAAAJZ4/4Pb7gJjAYHc/s128/button-square.png") no-repeat -12px -70px;
    position: relative;
    margin-right:1px;
    width: 30px;
    height: 23px;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity:0.3;
}
.sb-next {
    display: inline-block;
    background:#000 url("https://lh4.googleusercontent.com/-AF3ZN7tP85Q/Ut_vz2d5QPI/AAAAAAAAJZ4/4Pb7gJjAYHc/s128/button-square.png") no-repeat -11px -15px;
    position: relative;
    margin-right:1px;
    width: 30px;
    height: 23px;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    opacity:0.3;
}
.sb-cancel {
    display: inline-block;
    background:#fff url("https://lh5.googleusercontent.com/-Ia0m45SW5tk/Ut_vz3iq0jI/AAAAAAAAJZw/dkV2UWaELdw/s128/close.gif") no-repeat 4px 4px;
    position: relative;
    margin-right:1px;
    width: 24px;
    height: 23px;
    -webkit-transition:all .15s ease-out;
    -moz-transition:all .15s ease-out;
    transition:all .15s ease-out;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity:0.3;
}
.sb-nav a:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity:1;
}

Catatan: Cobalah tanpa di edit.

Warna Biru adalah links gambar navigasi dan sebaiknya link tersebut di ganti/di upload ke tempat masing-masing supaya tidak terbagi-bagi dengan pemakaian orang lain.

2. Masukan kode berikut diatas/sebelum </head>

JQuery gambar lightbox flexible

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js' type='text/javascript'/>

Catatan: Jika sudah menggunakan JQuery versi lain, maka lewati langkah ini.

3. Masukan kode javascript berikut di atas </head>

Javascript gambar lightbox

<script type='text/javascript'>
/*!
 * Smoothbox
 * http://kthornbloom.com/smoothbox.php
 *
 * Copyright 2013, Kevin Thornbloom
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
$(document).ready(function(){$(".sb").click(function(b){var a=$(this).index(".sb");$("body").append('<div class="smoothbox sb-load"><div class="smoothbox-table"><div class="smoothbox-centering"><div class="smoothbox-sizing"><div class="sb-nav"><a href="#" class="sb-prev sb-prev-on" alt="Previous"></a><a href="#" class="sb-cancel" alt="Close"></a><a href="#" class="sb-next sb-next-on" alt="Next"></a></div><ul class="sb-items"></ul></div></div></div></div>');$.fn.reverse=[].reverse;$(".sb").reverse().each(function(){var d=$(this).attr("href");if($(this).attr("title")){var c=$(this).attr("title");$(".sb-items").append('<div class="sb-item"><div class="sb-caption">'+c+'</div><img src="'+d+'"/></div>')}else{$(".sb-items").append('<div class="sb-item"><img src="'+d+'"/></div>')}});$(".sb-item").slice(0,-(a)).appendTo(".sb-items");$(".sb-item").not(":last").hide();$(".sb-item img:last").load(function(){$(".smoothbox-sizing").fadeIn("slow",function(){$(".sb-nav").fadeIn();$(".sb-load").removeClass("sb-load")})});b.preventDefault()});$(document).on("click",".sb-cancel",function(a){$(".smoothbox").fadeOut("slow",function(){$(".smoothbox").remove()});a.preventDefault()});$(document).on("click",".sb-next-on",function(a){$(this).removeClass("sb-next-on");$(".sb-item:last").addClass("sb-item-ani");$(".sb-item:last").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd",function(){$(".sb-item").eq(-2).addClass("no-trans").fadeIn("fast");$(this).removeClass("sb-item-ani").prependTo(".sb-items").hide();$(".sb-item:last").removeClass("no-trans");$(".sb-next").addClass("sb-next-on");$(".sb-item").unbind()});a.preventDefault()});$(document).on("click",".sb-prev-on",function(a){$(this).removeClass("sb-prev-on");$(".sb-item:last").hide();$(".sb-item:first").addClass("sb-item-ani2 no-trans").appendTo(".sb-items");$(".sb-item:last").show().removeClass("no-trans").delay(1).queue(function(b){$(".sb-item:last").removeClass("sb-item-ani2");b()});$(this).addClass("sb-prev-on");a.preventDefault()})});if(!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)){jQuery(function(a){a("a[href]").filter(function(){return/.(jpg|png|gif)$/i.test(this.href)}).sb({},null,function(b){return(this==b)||(this.parentNode&&(this.parentNode==b.parentNode))})})};
</script>

Catatan: Untuk Platform Blogger, Kode tersebut diatas harus di convert/di parse terlebih dahulu agar bisa disave di templatenya, Masuk Ke Tool Konversi/Parse Disini.

4. Kemudian Save template.

5. Masukan class=”sb” di bagian HTML posting pada gambar  mana saja yang diinginkan untuk tampil dalam lightbox, dan masukan keterangan “title” untuk melengkapi. Contoh seperti dibawah.

HTML gambar lightbox flexible

<a class="sb" href='...images/blackberry.jpg' title="blackberry" ><img src="images/blackberry.jpg" /></a>

Warna Oranye adalah keterangan gambar, bebas.

6. Selesai, silahkan lihat hasilnya. Mudah-mudahn bisa bermanfaat.

Tags:
ratingsratingsratingsratingsratings (No Ratings Yet)
loadingLoading...

Leave a Reply

Your email address will not be published. Required fields are marked *