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:

Portfolio

”” ””

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.

    Leave a Reply

    %d bloggers like this: