About Photo Gallery Page

I am a hobbyist Photographer and it would have been blasphemous not to show off of my pics on my own site.

Keywords: PhotosPhotographyXMLPHP XMLSimple XMLCarousaljQueryPopup

The Code

I am pretty much in love with XML and this was good place to use it. The image, apart from the source url was supposed to also contain some meta-data like the caption, orientation, etc. The XML structure used is:

<photo orientation="1" id="p2">
    <src>images/Photos/Spiti00017.jpg</src>
    <caption>Some Caption</caption>
</photo>

PHP has some really awesome inbuilt functions to read XML. These were really easy to use. No wonder its called SimpleXML. For more information check out the Manual for SimpleXML.

To read an element, all you need is:

$src = $photo->src

To read an attribute, all you need is:

$orientation = $photo->attributes()->orientation

The final code was:

<?php
    $photosFile = simplexml_load_file("../includedFiles/Info.xml");
    $photos = $photosFile->photo;
    foreach($photos as $photo)
    {
        $src = $photo->src;
        $alt = $photo->alt;
        $orientation = $photo->attributes()->orientation;
        $caption = htmlspecialchars($photo->caption, ENT_QUOTES);

        echo "<div class='photo' 
            style='background-image: url(\"$src\"); 
            data-orientation='$orientation' 
            data-caption='$caption'>" . "</div>";
    }
?>

I am using the data-orientation and data-caption attributes to store meta-data. This is a new feature of the HTML5 spec and its really useful!

Data attributes can be read using jQuery simply as:

$self.data("orientation")

The Design

The design for this page had to be pleasing but mundane. Otherwise, no one is going to be interested in the photos! I initially had a different design in mind which included a background filled with an image of my dear Canon SX20. But that started becaming too tacky, even for my own distinguished taste.

So I went to one of the back-up designs I had in mind. The center piece of the new design was supposed to be the thumbnail view. That turned out to be pretty easy to achieve using some good-old jQuery:

$(".photo").hover(function(){
   var $self = $(this);
   var photoWidth = $self.data("orientation") == 1?400:225;

   $self.stop().animate({width:photoWidth}, 300);
   $self.siblings('.photo.active').stop().animate({width:40}, 500).removeClass('active');
   $self.addClass('active');
})

I also wanted a full-size view on clicking a thumbnail image. I had to reach out to jQuery UI Dialog Box for that:

var $photoDialog = $("#photo-dialog").dialog({
    dialogClass: 'photoDialog',
    modal: true,
    width: 840,
    height: 620
});

There are other minor effects on this page that I won't be explaining here. You could just go through the Page Source for that. All in all, what I liked best about this page was that it looked so good without having me to spend too much time on it.


External Links


About Page