MyGalleryBox – Plugin Jquery untuk Galeri & Lightbox

Galeri dan lightbox sering kali dibutuhkan para web developer untuk menampilkan kumpulan gambar (album) agar lebih baik. Biasanya Galeri dan lightbox sudah satu paket dalam sebuah plugin javascript atau jquery. Setiap plugin tentu saja memiliki kelebihan dan kekurangan.

Ada banyak sekali plugin untuk galeri dan lightbox diluar sana, yang mungkin lebih baik -dari yang akan saya jelaskan disini-. Namun, belum tentu plugin-plugin tersebut sesuai dengan kebutuhan kita. Karena pada dasarnya, plugin dibuat untuk menyelesaikan masalah secara umum.

Nah, itu pula-lah salah satu alasan yang menyebabkan saya membuat plugin ini. Awalnya, saya sering pakai lightbox-nya fancybox.net. Namun, karena sering kali ada bentrok dengan plugin lain -Biasanya slider-, jadi saya mencoba untuk membuat plugin sejenis sendiri, untuk pertama kalinya.

Jika anda juga tertarik untuk membuat plugin jquery sendiri, saya akan menulis tutorialnya secara lengkap pada posting lain. Nah, supaya tidak tertinggal update, sebaiknya berlangganan dulu dengan blog ini. Simple kok, tinggal isi formulir warna oren di samping kanan. heheh :D.

Mengenai MyGalleryBox

Mygallerybox - jquery plugin

Sebelum saya memperkenalkan plugin ini dengan tulisan, sebaiknya anda sudah melihatnya secara langsung dengan mengklik link Download & demo di atas.

MyGalleryBox tidak jauh beda dengan plugin-plugin galeri & lightbox lainnya. Plugin ini cocok untuk membuat galeri grid dengan fitur lightbox. Desainnya sederhana dan cukup bagus.

Fitur-fitur MyGalleryBox meliputi :

  1. Adanya pilihan grid. Anda bisa membuat galeri grid dengan pilihan jumlah gambar per barisnya tidak terbatas. Jika grid tidak di set, maka secara default galeri grid akan menampilkan 3 gambar per barisnya. Jika galeri yang anda buat tidak ingin bergaya grid, atau ingin membuat grid dengan gaya sendiri, anda cukup men-set pilihan grid dengan nilai “0”.
  2. Navigasinya bisa dengan menggunakan tombol arrow left untuk “sebelumnya”, arrow right untuk “selanjutnya”, dan Escape untuk menutup lightbox.
  3. Ada pilihan lightbox untuk gambar yang tidak termasuk dalam galeri, tapi ingin tetap tampil dalam lightbox ketika di klik.

Untuk Pengguna

Bagi anda yang tertarik menggunakan plugin ini, anda bisa menggunakannya secara bebas baik untuk tujuan komersial maupun personal, selama tidak diperjual-belikan. Untuk cara penggunaannya, anda bisa lihat pada halaman demo. Disana sudah tertera cara penggunannya.

Untuk Developer

Nah, khusus bagi anda yang juga pengembang plugin jquery, saya akan sangat senang jika anda mau membantu mengembangkan plugin ini. Plugin ini tentunya masih sangat sederhana, karena dibuat oleh pemula. Saya akan upload project ini ke github secepatnya agar lebih mudah jika anda ingin menyumbangan walaupun hanya 1 – 2 baris kode.

Untuk memberikan sedikit gambaran, anda bisa melihat kode library js dan css untuk plugin ini.

(function($) {$.fn.mygallery = function ( options ) {

this.addClass(“mygallery”);

var config = $.extend({
grid : 3
}, options );

return this.each(function(i,val) {

$(this).children(“a”).each(function(i,val){
$(this).addClass(“photo”+i);
$(this).attr(“data-id”,+i);
});
if(config.grid != 0 || config.grid != “” || config.grid != false) {
$(this).children(“a”).width($(this).width() / config.grid).css(“padding”,”10px”);

if($(this).find(“img”).height() < $(this).find(“img”).width()) {
$(this).children(“a”).height($(this).children(“a”).width());
$(this).find(“img”).css({“max-width” : “none”, “max-height” : “100%”});
}
else if($(this).find(“img”).height() > $(this).find(“img”).width()) {
$(this).children(“a”).width($(this).children(“a”).height());
$(this).find(“img”).css({“max-height” : “none”, “max-width” : “100%”});
}
}
else {
$(this).children(“a”).addClass(“no-grid”).css({“max-width”:”200px”,”padding”:”10px”,”padding”:”10px”});
}

$(this).children(“a”).click(function(e){e.preventDefault();openPopup($(this),$(this).attr(“data-id”))});
});
}

$.fn.justlightbox = function ( ) {

this.addClass(“justlightbox”).css({“width”:”200px”});

return this.each(function(i,val) {
$(this).click(function(e){
e.preventDefault();
var popup = ‘<div class=”mygallery”><div class=”popup-wrapper”>’;
var imgsrc = $(this).attr(“href”);
var imgtitle = $(this).attr(“title”);
popup += ‘<div class=”popup active”>’;
popup += ‘<a href=”#” class=”popup-close”>X</a>’;
popup += ‘<img src=”‘+imgsrc+'” alt=”‘+imgtitle+'”/>’;
popup += ‘<div class=”caption”>’+imgtitle+'</div>’;
popup += ‘</div>’;
popup += ‘</div></div>’;
$(this).parent().prepend(popup);
$(“.popup-wrapper”).animate({opacity: “1”});
// Close popup
$(“.mygallery .popup-close”).click(function(e) {
e.preventDefault();
$(“.popup-wrapper”).animate({opacity: “0”}).remove();
});
});
});
}

function openPopup(a,active) {
var popup = ‘<div class=”popup-wrapper”>’;

var parent = a.parent();

parent.children(“a”).each(function(i,val){
var imgsrc = $(this).attr(“href”);
var id = $(this).attr(“data-id”);
var imgtitle = $(this).attr(“title”);
var current;
if(active == id) {
current = ” active”;
}
else {
current = “”;
}
popup += ‘<div class=”popup’+current+'” id=”photo’+id+'” data-id=”‘+id+'”>’;
popup += ‘<a href=”#” class=”popup-close”>X</a>’;
popup += ‘<img src=”‘+imgsrc+'” alt=”‘+imgtitle+'”/>’;

var nextsrc = $(this).next().attr(“href”);
var prevsrc = $(this).prev().attr(“href”);

if(nextsrc != null) {
popup += ‘<a class=”next” href=”‘+nextsrc+'”>></a>’;
}
if(prevsrc != null) {

popup += ‘<a class=”prev” href=”‘+prevsrc+'”><</a>’;
}
popup += ‘<div class=”caption”>’+imgtitle+'</div>’;
popup += ‘</div>’;

});

popup += ‘</div>’;
a.parent().prepend(popup);
$(“.popup-wrapper”).animate({opacity: “1”});
// Close popup
$(“.mygallery .popup-close”).click(function(e) {
e.preventDefault();
$(“.popup-wrapper”).delay(“slow”).animate({opacity: “0”}).remove();
});

$(“.mygallery .next”).click(function(e) {
e.preventDefault();
nextto($(this).parent().attr(“data-id”));
});

$(“.mygallery .prev”).click(function(e) {
e.preventDefault();
prevto($(“.active”).attr(“data-id”));
});

}

function nextto(activeid) {
$(“#photo”+activeid).removeClass(“active”);
$(“#photo”+activeid).next().addClass(“active”);
}
function prevto(activeid) {
$(“#photo”+activeid).removeClass(“active”);
$(“#photo”+activeid).prev().addClass(“active”);
}

document.onkeydown = navigatebykey;
function navigatebykey() {
var next = $(“.active”).next().attr(“data-id”);
var prev = $(“.active”).prev().attr(“data-id”) ;
if (event.keyCode == ’27’) {
// Close popup
$(“.popup-wrapper”).animate({opacity: “0”}).remove();
}

if(prev != null) {
if (event.keyCode == ’37’) {
// left arrow
prevto($(“.active”).attr(“data-id”));
}
}

if(next != null) {
if (event.keyCode == ’39’) {
// right arrow
nextto($(“.active”).attr(“data-id”));
}
}

function nextpopup(a,currentimg) {
var imgsrc = a.next().attr(“href”);
var imgtitle = a.next().attr(“title”);

$(“.popup-wrapper”).find(“img”).attr(“src”,imgsrc);
$(“.popup-wrapper”).find(“.caption”).text(imgtitle);
$(“.popup-wrapper”).find(“#prev”).attr(“href”,currentimg);

var nextsrc = a.next().next().attr(“href”);

if(nextsrc != null) {
$(“.popup-wrapper”).find(“#next”).attr(“href”,nextsrc);
}
else {
$(“.popup-wrapper”).find(“#next”).remove();
}
}

}

}(jQuery));

.mygallery {
overflow: hidden;
position: relative;
margin-left: -10px;
color: #777;
}.mygallery >a{
display:block;
float: left;
overflow: hidden;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-box-sizing:border-box;
position: relative;
}.mygallery >a img {
position: absolute;
}
.mygallery >a.no-grid {
float: none;
}
.mygallery >a.no-grid img {
position: relative;
}

.mygallery .popup-wrapper {
position: fixed;
text-align: center;
top:0;
left:0;
bottom:0;
right:0;
opacity: 0;
background-color: rgba(0,0,0,0.7);
z-index: 9999;
}
.mygallery .popup-wrapper .popup {
margin: 7vh auto;
position: absolute;
display: none;
background-color: #fff;
padding:10px;
border-radius: 3px;

}
.mygallery .popup-wrapper .popup.active {
position: relative;
display: inline-block;
}

.mygallery .popup-wrapper .popup img{
max-height: 500px;
position: relative;
}

.mygallery .popup-close {
position: absolute;
z-index: 99;
top:-10px;
right:-10px;
font-family: sans-serif;
background-color: #333;
color: #fff;
font-size: 13px;
padding:7px 10px;
border-radius: 50%;
float: none;
text-decoration: none;
border:1px solid #aaa;
}

.mygallery .next, .prev {
color: #fff;
background-color: #222;
text-decoration: none;
padding:7px 10px;
font-family: sans-serif;
text-transform: uppercase;
position: absolute;
top:45%;
z-index: 99;
border:1px solid #aaa;
}
.mygallery .prev {
left:-50px;
}
.mygallery .next {
right: -50px;
}

/* just light box */

a.justlightbox {
overflow: hidden;
position: relative;
display: block;
}
a.justlightbox img{
max-width: 100%;
}

Sekian untuk posting kali ini. Semoga pluginnya bermanfaat, jangan lupa di share :).

~Muhammad Syakirurohman~

6 Comments

  1. plugin yang sangat bagus,, tapi captionnya hanya terbatas pakai tag h3, apakah captionnya tidak bisa ditambah seperti keterangan gambar atau link ?

  2. mas kalo class=”example1″ di taro kok hasil gambarnya kecil” dan ga teratur?

  3. terima kasih atas sharingnya bray..

  4. Hmmm….. Keren gan Gallery Lightboxnya, saya ikut menggunakan.
    Silahkan Lihat hasilnya melalui link saya. Tapi saya gunakan mulai post yang saya publikasikan 16 June 2017, karena mau input class pada artikel-artikel sebelumnya harus edit satu-persatu. Tapi nanti pasti saya gunakan pada semua artikel, karena untuk blog tutorial, keberadaan image lightbox menurut saya penting.

    Silahkan page source dan lihat css serta js karya agan di sana.

    Ok gan… Makasih banyak atas karya ciptaanya yang dapat membantu saya.

    Salam dan Terimakasih

Tinggalkan Balasan