Membuat efek lightbox pada gambar
Kamu tentu sudah tahu dengan efek lightbox. Efek ini sering kita temukan pada situs-situs bintang 5. Pada dasarnya efek ini di terapkan untuk pengganti slideshow pada blog.
Memang kode-kode yang di gunakan untuk mendapatkan tampilan seperti ini cukup terbilang luar biasa banyaknya. Namun semua itu dapat terobati setelah efeknya bekerja di blog.
Untuk mendapatkan tampilannya, kita harus memadukan CSS, Jquery, Java Script dan Sebaris HTML sebagai penyangga tampilannya.
Berikut Demonya. Klik gambar untuk melihatnya dalam ukuran penuh!!!
Jquery
Jika sudah menggunakan Jquery, langkah ini bisa dilewati. Jika belum, kamu dapat menggunakannya melalui kode yang ada di bawah ini.
<script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript">
Kode CSSnya
#lightbox {
margin:0 auto;
width:600px;
}
#lightbox ul {
overflow:hidden;
}
#lightbox ul li {
float:left;
padding:10px;
background:#fff;
margin:0 20px 20px 0;
list-style-type:none;
position:relative;
cursor:pointer;
}
#lightbox ul li:nth-child(even) {
margin-right:0;
}
#lightbox ul li img {
display:block;
}
#lightbox .image_title {
width:250px;
height:175px;
background:rgba(0,0,0,0.5);
position:absolute;
top:0;
left:0;
display:table;
opacity:0;
transition:all 0.5s;
}
#lightbox .title {
color:#fff;
background:rgba(0,0,0,0.5);
text-transform:uppercase;
font-size:14px;
text-align:center;
display:table-cell;
vertical-align:middle;
transform:scale(0.2);
transition:all 0.25s;
}
#lightbox .title::before {
content:'\f00e';
font-family:FontAwesome;
font-size:30px;
color:#fff;
display:block;
line-height:36px;
}
#lightbox li:hover {
box-shadow:inset 0 0 10px 1px rgba(0,0,0,0.75);
}
#lightbox li:hover .image_title {
opacity:1;
}
#lightbox li:hover .title {
transform:scale(1);
}
.lb_backdrop {
background:rgba(0,0,0,0.9);
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
.lb_canvas {
background:#FFF;
width:50px;
height:50px;
position:fixed;
top:0;
left:0;
box-shadow:0 0 20px 5px #000;
padding:10px;
}
.lb_canvas.loading {
background:#FFF;
}
.lb_controls {
width:400px;
background:rgba(0,0,0,0.75);
position:fixed;
bottom:10px;
color:white;
left:0;
right:0;
margin:0 auto;
}
.lb_controls span {
line-height:30px;
height:30px;
}
.lb_controls span.inactive {
opacity:0.25;
}
.lb_previous,
.lb_next {
position:absolute;
top:0;
padding:5px 12px;
font-size:14px;
background:black;
cursor:pointer;
}
.lb_previous {
left:0;
border-right:1px solid rgba(255,255,255,0.1);
}
.lb_next {
right:0;
border-left:1px solid rgba(255,255,255,0.1);
}
.lb_title {
text-align:center;
display:block;
font-size:14px;
text-transform:uppercase;
padding:5px 0;
font-weight:bold;
}Untuk ikon saat di hover, saya menggunakan Font Awesome. Jika ingin mengganti ikonnya, kamu dapat menggantinya pada element #lightbox .title::before.
Java Script
$(document).ready(function(){
var item, img, title, large_img;
var CW, CH, CL, CT, hpadding, vpadding, imgtag;
var lb_loading = false;
var doc = $(document);
$("#lightbox li").click(function(){
if(lb_loading) return false;
lb_loading= true;
item = $(this);
img = item.find("img");
title = item.find(".title").html();
$("#lightbox li.active").removeClass("active");
item.addClass("active");
large_img = new Image();
large_img.src = img.attr("data-large") ? img.attr("data-large") : img.attr("src");
if($(".lb_backdrop").length < 1)
{
var lb_backdrop = '<div class="lb_backdrop"></div>';
var lb_canvas = '<div class="lb_canvas"></div>';
var lb_previous = '<span class="lb_previous"><</span>';
var lb_title = '<span class="lb_title"></span>';
var lb_next = '<span class="lb_next">></span>';
var lb_controls = '<div class="lb_controls">'+lb_previous+lb_title+lb_next+'</div>';
var total_html = lb_backdrop+lb_canvas+lb_controls;
$(total_html).appendTo("body");
}
if($(".lb_backdrop:visible").length == 0)
{
$(".lb_backdrop, .lb_canvas, .lb_controls").fadeIn("slow");
}
if(!large_img.complete)
$(".lb_canvas").addClass("loading").children().css("opacity", "0.5")
if(item.prev().length == 0)
$(".lb_previous").addClass("inactive");
else
$(".lb_previous").removeClass("inactive");
if(item.next().length == 0)
$(".lb_next").addClass("inactive");
else
$(".lb_next").removeClass("inactive");
CW = $(".lb_canvas").outerWidth();
CH = $(".lb_canvas").outerHeight();
CL = ($(window).width() - CW)/2;
CT = ($(window).height() - CH)/2;
$(".lb_canvas").css({top: CT, left: CL});
$(large_img).load(function(){
CW = large_img.width;
CH = large_img.height;
hpadding = parseInt($(".lb_canvas").css("paddingLeft")) + parseInt($(".lb_canvas").css("paddingRight"));
vpadding = parseInt($(".lb_canvas").css("paddingTop")) + parseInt($(".lb_canvas").css("paddingBottom"));
CL = ($(window).width() - CW - hpadding)/2;
CT = ($(window).height() - CH - vpadding)/2;
$(".lb_canvas").html("").animate({width: CW, height: CH, top: CT, left: CL}, 500, function(){
imgtag = '<img src="'+large_img.src+'" style="opacity: 0;" />';
$(".lb_canvas").html(imgtag);
$(".lb_canvas img").fadeTo("slow", 1);
$(".lb_title").html(title);
lb_loading= false;
$(".lb_canvas").removeClass("loading");
})
})
})
doc.on("click", ".lb_previous", function(){ navigate(-1) });
doc.on("click", ".lb_next", function(){ navigate(1) });
doc.on("click", ".lb_backdrop", function(){ navigate(0) });
doc.keyup(function(e){
if($(".lb_backdrop:visible").length == 1)
{
if(e.keyCode == "37") navigate(-1);
else if(e.keyCode == "39") navigate(1);
else if(e.keyCode == "27") navigate(0);
}
});
function navigate(direction)
{
if(direction == -1)
$("#lightbox li.active").prev().trigger("click");
else if(direction == 1)
$("#lightbox li.active").next().trigger("click");
else if(direction == 0)
{
$("#lightbox li.active").removeClass("active");
$(".lb_canvas").removeClass("loading");
$(".lb_backdrop, .lb_canvas, .lb_controls").fadeOut("slow", function(){
$(".lb_canvas, .lb_title").html("");
})
lb_loading= false;
}
}
})Kode HTMLnya
<div id="lightbox"> <ul> <li> <img src="url gambar 1" data-large="url gambar 1"/> <div class="image_title"> <h5 class="title">Judul Gambar 1</h5> </div> </li> <li> <img src="url gambar 2" data-large="url gambar 2"/> <div class="image_title"> <h5 class="title">Judul Gambar 2</h5> </div> </li> <li> <img src="url gambar 3" data-large="url gambar 3"/> <div class="image_title"> <h5 class="title">Judul Gambar 3</h5> </div> </li> <li> <img src="url gambar 4" data-large="url gambar 4"/> <div class="image_title"> <h5 class="title">Judul Gambar 4</h5> </div> </li> <li> <img src="url gambar 5" data-large="url gambar 5"/> <div class="image_title"> <h5 class="title">Judul Gambar 5</h5> </div> </li> <li> <img src="url gambar 6" data-large="url gambar 6"/> <div class="image_title"> <h5 class="title">Judul Gambar 6</h5> </div> </li> </ul> </div>
Untuk kode HTMLnya,
<img src="url gambar 1" data-large="url gambar 1"/>, <img src="url untuk thumbnail atau gambar ukuran kecil" data-large="url gambar ukuran gambar asli"/>.
Semua kode mungkin saja butuh penyesuaian lebih lanjut agar lebih sempurna saat di tampilkan.
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.