Posted by Aak
Aak-share.com Updated at: 9:32:00 PM

Membuat Gambar/Image Lightbox Dengan Efek Transisi

No comments:
Image Lightbox Dengan Efek Transisi - Lightbox adalah sebuah halaman yang akan terbuka atau muncul saat gambar di klik. Fungsi dari Lighbox untuk menampilkan gambar dengan ukuran original pada artikel di halaman tersebut, sehingga pengunjung dapat melihat gambar tersebut lebih jelas dan bagi pengguna platform Blogger terdapat fitur ini dan selain itu fitur ini juga bisa digunakan pada platform lain.

Pada Image Lightbox berikut ini memiliki fitur dengan efek transisi, efek tersebut juga bisa ditampilkan pada Stylish Slideshow . Ffek transisi gambar akan tampil jika 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 dibuat oleh Kevin Thornbloom, dan bebas untuk digunakan maupun dimodifikasi secara pribadi dengan lisensi MIT (open source). Lighbox ini juga 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 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 kode CSS di bawah ini lalu  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://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 : kode yang berwarna biru adalah tombol navigasi , ada baiknya Anda Upload kembali agar sama dengan yang di gunakan pada Template Anda agar tidak terbagi dengan penggunaan orang lain.

Selanjutnya Anda cari kode </head> , kemudian salin kode 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 kode Javascript dibawah ini pastekan dibawah kode 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="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 diatas harus di convert/di parse terlebih dahulu agar bisa disave di templatenya, Anda bisa convert/di parse kode tersebut di diatas kolom komentar.

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

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

<a class="sb" href='URL Gambar' title="Lightbox 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!

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments