Create a dynamic image gallery using ajax, jquery and php (XML also)

This is a tutorial to create a dynamic image gallery using jQuery ajax and php mainly. To reduce burden, I added a normal script to read directory. In gallery.php file it will read the directory and will generate a xml file which will be thrown directly to the index file (actually ajax in index file will request to execute this file and read the generated the XML formatted data). A lightbox plugin is also used in this script. Let’s have a look:
HTML:
CSS:
{code type=css}
*{margin:0; padding:0;outline:none}
.clr{clear:both;}
a{text-decoration:none;}
@font-face{src:url(‘../fonts/Agency_FB.ttf’);font-family:agency;}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000}
ul{list-style-type:none;}
h1, h2, h3, h4{font-family:agency;}
h2{font-size:20px; border-bottom:5px solid #CCCCCC;}
#wrapper{margin:0 auto;width:500px;}
#lightbox{padding:10px;background:url(../images/portfolio.png) repeat;margin-top:10px;border-radius:15px;border:3px solid #CCCCCC;overflow:hidden}
ul.gallery li{float:left; border:1px solid #666666; margin:5px 7px;}
ul.gallery li a{padding:1px; overflow:hidden; display:block}
ul.gallery li a img{width:100px; height:100px; opacity:0.2}
{/code}
JS Code and stylesheet link which should be placed into head section:
{code type=html}
// <![CDATA[
$(document).ready(function() {
$.ajax({
type: “GETâ€,
url: “gallery.phpâ€,
dataType: “xmlâ€,
success: function(xml){
//pagination for gallery photos
var startIndex = 0; // gets edited via ui
var howMany = 4; // constant of how many per page, but you could make this a ui changeable thing too
var issues = $(xml).find(‘item’); //the resulting issues from the xml
var totalIssues = issues.length;
var displayIssues = function() { // display the issues
var issuesPaginated = issues.slice( startIndex , (startIndex + howMany) );
$(‘ul.gallery’).html(â€); // clear old issues
issuesPaginated.each(function(){
var url = $(this).find(‘link’).text();
var alt = $(this).find(‘alt’).text();
$(‘
‘).html(‘<a href=â€images/fullscreen/’+url+'†rel=â€prettyPhoto
[gallery1]
â€>’).appendTo(‘ul.gallery’);
});
//lightbox code for gallery after parsing xml
$(“area[rel^=’prettyPhoto’]â€).prettyPhoto();
$(“.gallery:first a[rel^=’prettyPhoto’]â€).prettyPhoto({animation_speed:’slow’,theme:’light_square’,slideshow:3000, autoplay_slideshow: false});
$(“.gallery:gt(0) a[rel^=’prettyPhoto’]â€).prettyPhoto({animation_speed:’slow’,slideshow:10000, hideflash: true});
$(“#custom_content a[rel^=’prettyPhoto’]:firstâ€).prettyPhoto({
custom_markup: ‘
‘,
changepicturecallback: function(){ initialize(); }
});
$(“#custom_content a[rel^=’prettyPhoto’]:lastâ€).prettyPhoto({
custom_markup: ‘
‘,
changepicturecallback: function(){ _bsap.exec(); }
});
$(‘.gallery a img’).hover(function() {
$(this).stop().animate({opacity:1}, 1000);
}, function() {
$(this).stop().animate({opacity:0.2}, 1000);
});
}
$(‘#prevButton’).click(function() {
startIndex -= howMany;
if( startIndex >= 0) {
//startIndex += howMany;
displayIssues();
if((startIndex) <= 0) $(this).hide();
if(totalIssues – startIndex > howMany) $(‘#nextButton’).show();
}
});
$(‘#nextButton’).click(function() {
startIndex += howMany;
if( startIndex < totalIssues) {Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â Â //startIndex += howMany;
displayIssues();
if((startIndex + howMany) >= totalIssues) $(this).hide();
if(totalIssues – startIndex > howMany) $(‘#prevButton’).show();
}
});
displayIssues(); // display for the first time (ajax call);
}
});
});
// ]]>
{/code}
Its not fully tested. Perfectly tested in FF.
Thanks.