Membuat Gambar/Image Lightbox Dengan Efek Transisi

Image Lightbox Dengan Efek Transisi - Lightbox yaitu sebuah halaman yang akan terbuka atau muncul dikala gambar di klik. Fungsi dari Lighbox untuk menampilkan gambar dengan ukuran original pada artikel di halaman tersebut, sehingga pengunjung sanggup melihat gambar tersebut lebih terang dan bagi pengguna platform Blogger terdapat fitur ini dan selain itu fitur ini juga sanggup dipakai pada platform lain.

Pada Image Lightbox berikut ini mempunyai fitur dengan imbas transisi, imbas tersebut juga sanggup ditampilkan pada Stylish Slideshow . Ffek transisi gambar akan tampil jikalau tombol navigasi di klik pada gambar sebelum atau berikutnya. Pada prinsipnya Image Lighbox akan menampilkan gambar apapun dengan menambahkan Class pada URL gambar .

Lightbox ini dimodifikasi dari responsif JQuery "smoothbox" yang dibentuk oleh Kevin Thornbloom, dan bebas untuk dipakai maupun dimodifikasi secara langsung dengan lisensi MIT (open source). Lighbox ini juga dirancang dengan efisien, ramah dan kompatibel dengan browser modern besar menyerupai Chrome, Firefox, Safari, Opera dan Internet Explorer. Kode ini sudah minified dan dioptimalkan dengan efisiensi dan script itu sendiri mempunyai berat yang sangat ringan, ukuran kecil sebagai 2kb dalam versi minified jadi tidak memberatkan Loading Blog .

Memasang Image Lightbox dengan Efek Transisi

Bagi pengguna platform Blogger untuk menghindari konflik dengan versi Blogger maka disarankan menonaktifkan settingan showcase image with lightbox di dashboard , dan cara pemasangannnya :

Buka Editor Template, kemudian salin instruksi CSS di bawah ini kemudian  pastekan diatas  ]]></b:skin> , gunakan CTRL+F untuk memudahkan pencarian .

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmVTxRC8xBP0vPnls9t7BfxwjK6RG410NYYJ64iY7Rx7_yiHR1ckZLjv_yySWWals7t86e2WfGzxy5wbPHWcY45o9NrlLAvHTVgEG-cGRz30oaKhqw6K4Jar9MoYvYKWVz2nGIHu8wb1Xk/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxwSbayeXWewC9jgCii75F_E_wOYpViB0oUl9_A9iEx1oesfaD3hefdQukCVZrYaTqUtXOgEzAMJWUfQW3FYmJ9F-WRyyE9benhUzG32jqOHP3kZB_RLBW1Fku4UmVCuXiJZNtBsjOIh-/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigxwSbayeXWewC9jgCii75F_E_wOYpViB0oUl9_A9iEx1oesfaD3hefdQukCVZrYaTqUtXOgEzAMJWUfQW3FYmJ9F-WRyyE9benhUzG32jqOHP3kZB_RLBW1Fku4UmVCuXiJZNtBsjOIh-/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEad3Ut5yOfEF9QdWioPe3g9xY_kj9GZKe0srxWea3bPotyW-k4VA9Ry2lmn9EgFHiaG4x9ycPxBEYW8YUBh2gbLu5TVl6p37uw6k9X6TiSJPZKmGI5CbZEAF6Omf7QQjPGag1F_bb_imU/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 : instruksi yang berwarna biru yaitu tombol navigasi , ada baiknya Anda Upload kembali biar sama dengan yang di gunakan pada Template Anda biar tidak terbagi dengan penggunaan orang lain.

Selanjutnya Anda cari instruksi </head> , kemudian salin instruksi dibawah ini dan terapkan sebelumnya .

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

Catatan : Apabila pada Template Anda sudah Ada Jquery ini lewati langkah ini , baik itu versi dibawahnya maupun diatasnya .

Masih pada head , Anda copy instruksi Javascript dibawah ini pastekan dibawah instruksi diatas atau sebelum </head>

<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=" Lightbox yaitu sebuah halaman yang akan terbuka atau muncul dikala gambar di klik Membuat Gambar/Image Lightbox Dengan Efek Transisi "></a><a href="#" class="sb-cancel" alt=" Lightbox yaitu sebuah halaman yang akan terbuka atau muncul dikala gambar di klik Membuat Gambar/Image Lightbox Dengan Efek Transisi "></a><a href="#" class="sb-next sb-next-on" alt=" Lightbox yaitu sebuah halaman yang akan terbuka atau muncul dikala gambar di klik Membuat Gambar/Image Lightbox Dengan Efek Transisi "></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 diatas harus di convert/di parse terlebih dahulu biar sanggup disave di templatenya, Anda sanggup convert/di parse instruksi tersebut di diatas kolom komentar.

*Jika sudah Anda lakukan dan sudah Anda pasangkan , kemudian simpan Template

Selanjutnya pemasangan HTML , intinya pemasangan HTML ini yaitu untuk instruksi pemanggil yaitu dengan menambahkan kode class="sb" pada URL Gambar  .  Anda salin instruksi dibawah ini pada Mode HTML posting , atau Anda sanggup menambahkannya pada gambar lain yang diinginkan untuk tampil dalam lightbox .

<a class="sb" href='URL Gambar' title="Membuat Gambar/Image Lightbox Dengan Efek Transisi " ><img src="URL Gambar" /></a>

Catatan : Kode berwarna biru isikan url gambar , dan ubah pada title sesuai dengan yang Anda kehendaki .

Salam luar biasa.

Semoga bermanfaat!


Sumber http://www.websiteedukasi.com/