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:



”” ””


{code type=css}

*{margin:0; padding:0;outline:none}
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000}
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} li{float:left; border:1px solid #666666; margin:5px 7px;} li a{padding:1px; overflow:hidden; display:block} li a img{width:100px; height:100px; opacity:0.2}


JS Code and stylesheet link which should be placed into head section:

{code type=html}

// <![CDATA[
$(document).ready(function() {

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) );
$(‘’).html(”); // clear old issues
var url = $(this).find(‘link’).text();
var alt = $(this).find(‘alt’).text();

  • ‘).html(‘<a href=”images/fullscreen/’+url+'” rel=”prettyPhoto
    //lightbox code for gallery after parsing xml
    $(“.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;
    if((startIndex) <= 0) $(this).hide();

    if(totalIssues – startIndex > howMany) $(‘#nextButton’).show();
    $(‘#nextButton’).click(function() {
    startIndex += howMany;
    if( startIndex < totalIssues) {                         //startIndex += howMany;


    if((startIndex + howMany) >= totalIssues) $(this).hide();
    if(totalIssues – startIndex > howMany) $(‘#prevButton’).show();
    displayIssues(); // display for the first time (ajax call);
    // ]]>

    Its not fully tested. Perfectly tested in FF.

    Live in action



    Leave a Reply

    Your email address will not be published. Required fields are marked *