Membuat Lightbox Gallery menggunakan CSS3 dan JQuery

An Awesome CSS3 Lightbox Gallery With jQuery

Dalam aplikasi Lightbox Gallery ini, akan ditampilkan kumpulan foto kecil yang tersebar secara acak yang dapat kita pindah-pindah posisinya. Kalau kita klik slah satu foto tersebut, maka akan muncul jendela yang menampilkan gambar dalam ukuran penuh. Biar lebih jelas silakan klik demo

Dalam membuat Lightbox Gallery yang keren ini, kita akan menggunakan fungsi CSS3, jQuery, jQuery UI (untuk melakukan drag and drop) juga fancybox jQuery plugin lightbox display, dan tentu saja menggunakan PHP dan CSS untuk interaksi dan membuat tampilan.

1. XHTML

Buat file demo.php

<!– The gallery container: –>
<div id=”gallery”><?php
/* PHP code, covered in detail in step 3 */
?>

<!– The droppable share box –>
<div class=”drop-box”>
</div>

</div>

<div class=”clear”></div>

<!– This is later converted to the modal window with the url of the image: –>
<div id=”modal” title=”Share this picture”>
<form>
<fieldset>
<label for=”name”>URL of the image</label>
<input type=”text” name=”url” id=”url” class=”text ui-widget-content ui-corner-all” onfocus=”this.select()” />
</fieldset>
</form>

</div>

2. CSS
Masukkan kode CSS ke dalam head pada file demo.php

<link rel=”stylesheet” type=”text/css” href=”demo.css” />
<link rel=”stylesheet” href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css” type=”text/css” media=”all” />
<link rel=”stylesheet” type=”text/css” href=”fancybox/jquery.fancybox-1.2.6.css”>

Buat file demo.css untuk menyusun tampilan dasarnya

body{
/* Styling the body */
color:white;
font-size:13px;
background: #222222;
font-family:Arial, Helvetica, sans-serif;
}#gallery{
/* The pics container */
width:100%;
height:580px;
position:relative;
}

.pic, .pic a{
/* Each picture and the hyperlink inside it */
width:100px;
height:100px;
overflow:hidden;
}

.pic{
/* Styles specific to the pic class */
position:absolute;
border:5px solid #EEEEEE;
border-bottom:18px solid #eeeeee;

/* CSS3 Box Shadow */
-moz-box-shadow:2px 2px 3px #333333;
-webkit-box-shadow:2px 2px 3px #333333;
box-shadow:2px 2px 3px #333333;
}

.pic a{
/* Specific styles for the hyperlinks */
text-indent:-999px;
display:block;
/* Setting display to block enables advanced styling for links */
}

.drop-box{
/* The share box */
width:240px;
height:130px;
position:absolute;
bottom:0;
right:0;
z-index:-1;

background:url(img/drop_box.png) no-repeat;
}

.drop-box.active{
/* The active style is in effect when there is a pic hovering above the box */
background-position:bottom left;
}

label, input{
/* The modal dialog URL field */
display:block;
padding:3px;
}

label{
font-size:10px;
}

fieldset{
border:0;
margin-top:10px;
}

#url{
/* The URL field */
width:240px;
}

3. PHP
Masukkan kode PHP pada demo.php untuk untuk membuat interaksi

/* Configuration Start */
$thumb_directory = ‘img/thumbs’;
$orig_directory = ‘img/original’;
$stage_width=600;
$stage_height=400;
/* Configuration end */$allowed_types=array(‘jpg’,'jpeg’,'gif’,'png’);
$file_parts=array();
$ext=”;
$title=”;
$i=0;

/* Opening the thumbnail directory and looping through all the thumbs: */
$dir_handle = @opendir($thumb_directory) or die(“There is an error with your image directory!”);
$i=1;

while ($file = readdir($dir_handle))
{
/* Skipping the system files: */
if($file==’.’ || $file == ‘..’) continue;

$file_parts = explode(‘.’,$file);
$ext = strtolower(array_pop($file_parts));

/* Using the file name (withouth the extension) as a image title: */
$title = implode(‘.’,$file_parts);
$title = htmlspecialchars($title);

/* If the file extension is allowed: */
if(in_array($ext,$allowed_types))
{
/* Generating random values for the position and rotation: */
$left=rand(0,$stage_width);
$top=rand(0,400);
$rot = rand(-40,40);

if($top>$stage_height-130 && $left > $stage_width-230)
{
/* Prevent the images from hiding the drop box */
$top-=120+130;
$left-=230;
}

/* Outputting each image: */
echo ‘
<div id=”pic-’.($i++).’” class=”pic” style=”top:’.$top.’px;left:’.$left.’px;background:url(‘.$thumb_directory.’/’.$file.’) no-repeat 50% 50%; -moz-transform:rotate(‘.$rot.’deg); -webkit-transform:rotate(‘.$rot.’deg);”>

<a class=”fancybox” rel=”fncbx” href=”‘.$orig_directory.’/’.$file.’” target=”_blank”>’.$title.’</a>

</div>’;
}
}

/* Closing the directory */
closedir($dir_handle);

4. JQuery
buat file script.js

$(document).ready(function(){
// Executed once all the page elements are loaded
var preventClick=false;
$(“.pic a”).bind(“click”,function(e){/* This function stops the drag from firing a click event and showing the lightbox */
if(preventClick)
{
e.stopImmediatePropagation();
e.preventDefault();
}
});

$(“.pic”).draggable({

/* Converting the images into draggable objects */
containment: ‘parent’,
start: function(e,ui){
/* This will stop clicks from occuring while dragging */
preventClick=true;
},
stop: function(e, ui) {
/* Wait for 250 milliseconds before re-enabling the clicks */
setTimeout(function(){ preventClick=false; }, 250);
}
});

$(‘.pic’).mousedown(function(e){
/* Executed on image click */
var maxZ = 0;

/* Find the max z-index property: */
$(‘.pic’).each(function(){
var thisZ = parseInt($(this).css(‘zIndex’))
if(thisZ>maxZ) maxZ=thisZ;
});

/* Clicks can occur in the picture container (with class pic) and in the link inside it */
if($(e.target).hasClass(“pic”))
{
/* Show the clicked image on top of all the others: */
$(e.target).css({zIndex:maxZ+1});
}
else $(e.target).closest(‘.pic’).css({zIndex:maxZ+1});
});

/* Converting all the links to a fancybox gallery */
$(“a.fancybox”).fancybox({
zoomSpeedIn: 300,
zoomSpeedOut: 300,
overlayShow:false
});

/* Converting the share box into a droppable: */
$(‘.drop-box’).droppable({
hoverClass: ‘active’,
drop:function(event,ui){

/* Fill the URL text field with the URL of the image. */
/* The id of the image is appended as a hash #pic-123 */
$(‘#url’).val(location.href.replace(location.hash,”)+’#’ + ui.draggable.attr(‘id’));
$(‘#modal’).dialog(‘open’);
}
});

/* Converts the div with id=”modal” into a modal window */
$(“#modal”).dialog({
bgiframe: true,
modal: true,
autoOpen:false,

buttons: {
Ok: function() {
$(this).dialog(‘close’);
}
}
});

if(location.hash.indexOf(‘#pic-’)!=-1)
{
/* Checks whether a hash is present in the URL */
/* and shows the respective image */
$(location.hash+’ a.fancybox’).click();
}
});