» » Lightbox dengan Efek Transisi

02 Juni 2019
0

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.

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 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. 
    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/AVvXsEi_X7Jgus6oXv6UY8_TDYorvrUqqmdIG0ZZFAP7cvljCR9p_6Wwf6wHRHj6N10BxqDeK4TeOQEGtwJPVFIXMzikFxGcNQWZzMI9io9735oVmnJpHeel1WOhaQuesw8pFwqhlwdSupajAbef/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/AVvXsEiFMbDrqAdALAR6HzvHM-CEyjFPzcnIOi7z1P7BBGicrXdxP5KAP9wegFD5cKNNJEu9UthzN2T3txJ-EuGBYi4jEfld-JRQgNZ2QWFsAFmP2HfP4Nu7nqNFpA1kWPasCWH1SUEF1o5Zq8M6/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/AVvXsEiFMbDrqAdALAR6HzvHM-CEyjFPzcnIOi7z1P7BBGicrXdxP5KAP9wegFD5cKNNJEu9UthzN2T3txJ-EuGBYi4jEfld-JRQgNZ2QWFsAFmP2HfP4Nu7nqNFpA1kWPasCWH1SUEF1o5Zq8M6/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/AVvXsEjhMynD6noSnKnf1PrpBoO59Weevw807szpuNHR0RWtkr9ymvAgcoKJjMLw1ZQbkiImpjsZzE_ceOUsKageVWTPsUKUIvy5y_0hopMKwzXwth9EBftVbIx5WFhYxLnR2FgPgf-CkFeSTZag/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> 
    <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> 
    <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.
By - Juni 03, 2019
Labels:

0 comments:

Posting Komentar

Langganan: Posting Komentar (Atom)