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.

Live in action

Download

Thanks.