Awesome Mobile Image Gallery Web App

With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple […]

From our sponsor: Reach inboxes when it matters most with Mailchimp's data-backed email automations. Sign up for Mailchimp now.

With more and more users browsing the web with a mobile device, it’s time to begin with mobile web development. In this tutorial we are going to develop a simple mobile image gallery using the amazing jQTouch jQuery plugin for mobile web development. jQTouch is a jQuery plugin with native animations, automatic navigation, and themes for mobile WebKit browsers like iPhone, iPod Touch, G1, and Pre.


Our little application is going to show some albums in a list view which will reveal a wall of thumbnails once it’s clicked. When a thumbnail is clicked, we get to the full image view where we can navigate through all the photos by either clicking on the navigation buttons or swiping over the image.

This app is best viewed on a mobile device like the iPhone or the iPod Touch, or in a Webkit Browser like Google Chrome or Safari. If you are using the iPhone or the iPod Touch (or the iPad), add this app to your home screen to enjoy the full view and features.

Just like in our previous tutorial, the Fresh Sliding Thumbnails Gallery with jQuery and PHP we will be using PHP to automatically generate albums with PHP from the folder structure.

The great thing about jQTouch is that you don’t really have to worry about much, be it the style or the JavaScript. It has pretty much all the amazing effects that we know from the iPhone as default functionality and it takes care of the right head properties. This makes it really easy to create a mobile device friendly website.

We also have a static version without albums. You can find the demo and the ZIP file at the end of this post.

So, let’s start!

The Markup and JavaScript

The HTML is pretty simple: for each screen we will have a container that becomes visible when we are on that page.
The first screen that we will have in the HTML is the “About” section that get’s visible when clicking (or tapping) on the about button on the top right:

<div id="about" class="selectable">
	<p><img src="codropsIcon.png"/></p>
	<p>
		<strong>Wonderwall Image Gallery</strong>
		<a href="http://www.codrops.com">By Codrops</a>
	</p>
	<p>A web app created with <br /> <strong>jQTouch</strong></p>
	<p><br /><br /><a href="#" class="grayButton goback">Close</a></p>
</div>

The second container that we will have in our HTML structure, will be the part where we dynamically add a list of album links. We get that list automatically from our special folder structure.

The folder structure contains an image folder and a thumbs folder. Each one of those contains folders of albums. They have to be named the same, just like the images inside.

In the thumbnails album folders we will have an XML file called “desc.xml” which can be used to write a description for each image. In this file, we will write the name of the picture and it’s title. The description of each image is not obligatory which means that we can leave out images that don’t have any title or description.

The structure of that XML file will look as follows:

<descriptions>
    <image>
        <name>1.jpg</name>
        <text>Inna 02 © studio.es by Vincent Boiteau</text>
    </image>
    <image>
        <name>2.jpg</name>
        <text>Inna 01 © studio.es by Vincent Boiteau</text>
    </image>
	...
</decriptions>

With the thumbs.php file which we keep in a sub folder called “ajax” we will automatically get those descriptions. For a more detailed explanation of the workings, check out our previous tutorial.

The second container’s HTML structure is going to look like this:

<!-- The list of albums -->
<div id="albums_container" class="current">
	<div class="toolbar">
		<h1>Albums</h1>
		<a class="button slideup" id="infoButton" href="#about">About</a>
	</div>
	<div class="loader" style="display:none;"></div>
	<ul id="albums" class="edgetoedge" style="display:none;">
	</ul>
</div>

The unordered list with the id “albums” will be populated with list items containing the links to the albums.
The toolbar will be at the top of the screen and present in every container. It will have a button to get to the about section and a back link that brings us back to the previous screen.
The first step in the JavaScript is to call the function loadAlbums() which gets the names of the albums with an AJAX request to the PHP side (albums.php):

/* name of the selected album */
    var album 				= '';
    /* index of li where there is the selected image */
    var current				= -1;

    /* 1 step : Load the Albums */
    loadAlbums();

    function loadAlbums(){
        var $loader = $('#albums_container').find('.loader');
        $loader.show();
        var url 		= 'ajax/albums.php';
        /*
        gets the names of the albums with an AJAX request to the PHP side
        */
        $.get(url, function(data) {
            $loader.hide();
            $('#albums').html(data).show();
        },'html');
    }

    /*
    clicking on an album:
    we keep track of which album is currently selected by
    getting the id (album name) of the clicked row
    */
    $('#albums_container').delegate('li','click tap',function(e){
        var $this 	= $(this);
        album 		= $this.attr('id');
    });

The PHP file albums.php looks as follows:

<?php
if(file_exists('../images')){
	$files = array_slice(scandir('../images'), 2);
	if(count($files)){
		natcasesort($files);
		foreach($files as $file){
			if($file != '.' && $file != '..'){
				echo '<li id="'.$file.'" class="arrow"><a href="#thumbs_container">'.$file.'</a></li>';
			}
		}
	}
}
?>

We are scanning the directory called “images” in order to get all the sub folders which are our albums. Note that the each list element link will have a href for the thumbs container. The JavaScript variable “album” will keep track of the current album when we click on one of the list items.


The third container is the section for the thumbnails. Here we will populate an unordered list #thumbs with the small thumbnail images as link elements.

As you can see in the image, the thumbnails will occupy all the screen. We use a centering function that determines how many thumbnails fit into one row given a certain window width. The left margin is calculated according to the left over space.

We also resize the thumbnails if they are bigger than our predefined width and height of 75px. So, if you use thumbnails that are not quadratic and of different sizes, they will be made to fit into the list element.

The thumbnails view has the following structure:

<!-- The list of images (thumbs) -->
<div id="thumbs_container">
	<div class="toolbar">
		<h1>Thumbs</h1>
		<a class="back" href="#albums_container">Albums</a>
		<a class="button slideup" id="infoButton" href="#about">About</a>
	</div>
	<div class="loader" style="display:none;"></div>
	<ul id="thumbs" class="thumbView" style="display:none;">
	</ul>
</div>

In the JavaScript we need to load the thumbnails by making another AJAX request to the PHP side (thumbs.php) which lists us all the images inside of the current album. We also need to keep track of the currently clicked image which we save in the JavaScript variable “current”:

/*
load thumbs when the panel thumbs_container slides in;
hides the thumbs_container when it slides out
*/
$('#thumbs_container').bind('pageAnimationEnd', function(e, info){
	if (info.direction == 'in'){
		loadThumbs();
	}else{
		$('#thumbs').hide();
	}
});

/*
gets the photos information with an AJAX request to the PHP side
then creates and loads each one of the images,
and appends it to the DOM
after that, we need to center the grid of the images
based on how many fit per row
*/
function loadThumbs(){
	var $thumbscontainer = $('#thumbs_container');
	var $loader = $thumbscontainer.find('.loader');
	$loader.show();

	var url = 'ajax/thumbs.php?album='+album;
	$.get(url, function(data) {
		var countImages = data.length;
		var $ul = $('#thumbs').empty();
		var counter = 0;
		for(var i = 0; i < countImages; ++i){
			try{
				var description = data[i].desc[0];
			}catch(e){
				description = '';
			}
			if(description == undefined)
				description = '';
			$('<img alt="'+data[i].alt+'" title="'+description+'"/>').load(function(){
				++counter;
				var $this = $(this);
				/*
				we need to make sure the grid thumbs are no bigger than 75 px
				*/
				resizeGridImage($this);
				var $li = $('<li/>',{
					className	: 'pic'
				});
				var $a = $('<a/>',{
					href	:	'#photo_container'
				});
				$ul.append($li.append($a.append($this)));
				if(counter == countImages){
					$loader.hide();
					$thumbscontainer.append($ul.show());
					autoCenterPhotos();
				}
			}).attr('src',data[i].src);
		}
	},'json');
}

/*
when clicking on an image we keep track of the index
of the image, which is in the alt attribute of the thumb
*/
$('#thumbs_container').delegate('li','click tap',function(){
	current	= $(this).index();
});

The thumbs.php looks as follows:

<?php
	$album 		= $_GET['album'];
	$imagesArr	= array();
	$i			= 0;
	/* read the descriptions xml file */
	if(file_exists('../thumbs/'.$album.'/desc.xml')){
		$xml = simplexml_load_file('../thumbs/'.$album.'/desc.xml');
	}
	if(file_exists('../thumbs/'.$album)){
		$files = array_slice(scandir('../thumbs/'.$album), 2);
		if(count($files)){
			foreach($files as $file){
				if($file != '.' && $file != '..' &&  $file!='desc.xml'){
					if($xml){
						$desc = $xml->xpath('image[name="'.$file.'"]/text');
						$description = $desc[0];
						if($description=='')
							$description = '';
					}
					$imagesArr[] = array('src' 	=> 'thumbs/'.$album.'/'.$file,
										 'alt'	=> 'images/'.$album.'/'.$file,
										 'desc'	=> $description);
				}
			}
		}
	}
	$json 		= $imagesArr;
	$encoded 	= json_encode($json);
	echo $encoded;
	unset($encoded);
?>


Our last container will be for the full image preview. Here we will use another resize function in order to adapt the width and height of the image to fit into the viewport.

We will also add two navigation buttons that will point to the next and previous images in full preview.

To browse through the images we can either use these navigation buttons or swipe over the image (if our mobile device supports that, i.e. iPhone or iPod Touch).

Between the navigation buttons, we will add the description of the current image.

The resize function that we will be using checks if the image is bigger than the window and if it is, the image gets resized accordingly.

The HTML structure for the last container looks as follows:

<!-- The single image container -->
<div id="photo_container">
	<div class="toolbar">
		<h1>Photo</h1>
		<a class="back" href="#thumbs_container">Photos</a>
		<a class="button slideup" id="infoButton" href="#about">About</a>
	</div>
	<div class="loader" style="display:none;"></div>
	<div id="theimage" class="singleimage"></div>
	<div class="descriptionWrapper">
		<p id="description"></p>
		<div id="prev" style="display:none;"></div>
		<div id="next" style="display:none;"></div>
	</div>
</div>

And the JavaScript looks as follows:

/*
    load the large image when the panel photo_container slides in;
    empty the contents of the image element when it slides out
    */
    $('#photo_container').bind('pageAnimationEnd', function(e, info){
        if (info.direction == 'in'){
            var $thumb 		= $('#thumbs_container li:nth-child('+parseInt(current+1)+')').find('img');
            if(!$thumb.length) return;
            loadPhoto($thumb);
        }
        else{
            $('#theimage').empty();
            $('#description').empty();
            $('#prev,#next').hide();
        }
    });

    /* loads a large photo */
    function loadPhoto($thumb){
        var $loader 	= $('#photo_container').find('.loader');
        $loader.show();
        var $theimage 	= $('#theimage');
        $('<img/>').load(function(){
            var $this 	= $(this);
            resize($this);
            $loader.hide();
            var $a=$('<a/>');/*for swipe*/
            $theimage.empty().append($a.append($this));
            $('#description').empty().html($thumb.attr('title'));
            $('#prev,#next').show();
        }).attr('src',$thumb.attr('alt'));
    }

    /* swipe image - navigate right/left */
    $('#theimage').swipe(function(evt, data) {
        if(data.direction=='left')
            navigateNext();
        else
            navigatePrevious();
    });

    /*
    Events for navigating through the images
    The current gives us our current photo,
    so we need to get the next / previous one
    from the thumbs container - these have
    the source for the large photo in the
    alt attribute
    */
    $('#next').bind('click tap',function(){
        navigateNext();
    });
    $('#prev').bind('click tap',function(){
        navigatePrevious();
    });

    /* goes to next image */
    function navigateNext(){
        ++current;
        var $thumb = $('#thumbs_container li:nth-child('+parseInt(current+1)+')').find('img');
        if(!$thumb.length) {
            --current;
            return;
        }
        loadPhoto($thumb);
    }

    /* goes to previous image */
    function navigatePrevious(){
        --current;
        var $thumb = $('#thumbs_container li:nth-child('+parseInt(current+1)+')').find('img');
        if(!$thumb.length) {
            ++current;
            return;
        }
        loadPhoto($thumb);
    }

Initializing jQTouch

After adding the scripts of jQuery and jQTouch we also have to initialize the jQTouch plugin:

var jQT = new $.jQTouch({
    icon		: 'codropsIcon.png',
    cacheGetRequests: true,
    addGlossToIcon	: false,
    startupScreen	: 'codropsSplash.png',
    statusBar	: 'black',
    preloadImages: [
        'themes/img/back_button.png',
        'themes/img/back_button_clicked.png',
        'themes/img/button_clicked.png',
        'themes/img/grayButton.png',
        'themes/img/whiteButton.png',
        'themes/img/loading.gif'
    ]
});

Beside others, we define the icon for the app and the start up screen image. We can also list what images shall be preloaded. There are several parameters that you can configure. You can find all about the initialization options here.

If we use a device where we can rotate the screen, our image preview will look like this:

And now, let’s take a look at the style.

The CSS

The style for this gallery is mainly based on the provided theme in the jQTouch plugin. We did some minor changes to the colors in the default style and added the following style for the gallery:

ul.thumbView{
    list-style:none;
    margin:0px;
    border:none;
}
ul.thumbView li {
    float:left;
    position:relative;
    width:80px;
    height:80px;
    border:none;
    margin:0px;
    padding:0px;
    background:transparent;
    line-height:80px;
    overflow:visible;
}
ul.thumbView li a {
    height:80px;
    margin:0;
    padding:0;
    width:80px;
    text-align:center;
    vertical-align:middle;
    display:table-cell;
    overflow:visible;
}
ul.thumbView li a img{
    border:none;
    vertical-align:middle;
    -webkit-box-shadow:2px 2px 8px #000;
}
div.singleimage{
    text-align:center;
    width:100%;
}
div.singleimage img{
    margin-top:10px;
    -webkit-box-shadow:2px 2px 8px #000;
}
.descriptionWrapper{
    height:40px;
    position:relative;
}
p#description{
    text-align:center;
    color:white;
    text-transform:uppercase;
    font-weight:bold;
    margin:10px 0px 0px 0px;
    padding:0px 45px;
}
div#prev,div#next{
    cursor:pointer;
    position:absolute;
    top:10px;
    width:40px;
    height:40px;
    background-color:black;
    background-repeat:no-repeat;
    background-position:center center;
}
div#prev{
    left:0px;
    background-image:url(img/prev.png);
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}
div#next{
    right:0px;
    background-image:url(img/next.png);
    -webkit-border-top-left-radius:10px;
    -webkit-border-bottom-left-radius:10px;
}
div.loader{
    background:transparent url(img/ajax-loader.gif) no-repeat center center;
    position:absolute;
    top:90px;
    width:100%;
    left:0px;
    height:24px;
}

And that’s it! I hope you enjoyed starting with mobile web development!

We also have a static version of this mobile photo gallery without the album functionality. Check out the static demo or download the ZIP file.

Message from TestkingWe offer guaranteed ccna security training program to help you pass ccna voice exam on time. Complete your ccie certification using certified resources.

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 118

Comments are closed.
  1. Hi,

    wonderful tutorial. I’m trying to wrap this up in phonegap but the Thumbs do not display. Only the loader is showing

    I uploaded the images and thumbs directory as well the php-files to myserver http://www.mydomain.com/wonderwall/

    Changed the url in the .js file to point to my server (url).

    Creating new directories (on the server) work well and are displayed on my iphone. Only those thumbs……

    Anyone an idea how to solve this.

    Thanks in advance,
    Danny

  2. Hi Mary, great job, but i notice that the downloadable version works in different mode between online version.
    On downloadable version the image was not loaded in real time… but i must reload the page to see pictures…
    Where i wrong?
    thanks

  3. I am a noob. Can anyone tell me how I can add another button or add to the album menu? I would like to add a contact page.

  4. Hi.. Brilliant Gallery app.. I am wondering if you can help though.. I am trying to add a front screen menu with some other content.. I created a new container and copied the album_container content and amended it but when i try and link a button to the album container to load the your original first page as the second.. It seems to ruin all your good work.. any suggestions.. I am a bit of a noob so may need some help…

  5. I have put this on a temp site… http://chicfreakz.co.uk/phone2.html I basically just need some advice on how to add a previous container as a menu and then how to use a button to call a function to load the albums as on the 1st page on the example. Also as per someone elses post, on iphone the landscape orientation shrinks pictures.. has anyonebeen able to resolve this ??

  6. Mary Lou, love your work!

    I’ve sucessfully set up the static version. However, is possible to automatically load up a specific image instead of the thumbs by default?

    I have jquery.galler.js detecting whether a parameter is passed via the URL:
    ?gotopage=3

    If the parameter is present, I want it to go to that image. If not, display thumbs.

    I’ve tried simulating a click on a thumbnail with the following code but not working:

    if(getURLParam(“gotopage”)) {

    loadThumbs();
    $(‘#thumbs_container a:nth-child(‘+parseInt(getURLParam(“gotopage”))+’)’).click();
    } else loadThumbs();

    Any help would be greatly appreciated!

  7. i figured it out. i changed the $imagesArr[] = array(‘src’ paths in thumbs.php. i also had a problem with
    the single image container css that i had used from the demo download. i copied it from the tutorial above and everything works now. cool.

  8. is there a way to turn off the reorientation of the screen when you turn a device? i’ve been searching for information on this and coming up empty. i want the gallery to stay in the portrait orientation.

  9. Great little gallery.

    Any ideas how i can use an xml file to provide thumbnail & image details instead of reading the directories?

    Also there seems to be an image loading problem, I need to go back and the forward again to make the images load – any ideas ?

  10. in relation to the post below

    orwell January 29th, 2011 at 09:13 Nice work! Thanks!
    How can i make the landscape version of image to be resizable? landscape version does not resize properly on iPhone.

    Did anyone find a solution to resizing the images when orientation is in landscape mode… ?? Thanks guys..

  11. Resizing images in landscape doesnt work well.
    It would be nice if images height resize to edge of viewport. I try to remove description div and to put 0 for window.height margin but it didnt work 🙁

  12. Hello, When I copy the source code wihtout any changes to my FTP it’s not working when I click in gallery link it’s highlighting but not load next thumbnails page.
    Please help me with this issue.

  13. I had everything working perfectly last week. When checking to demo to someone, the album page no longer links to the thumbnail “page.” To test, I redownloaded tutorial files and uploaded to two different servers, media temple and godaddy. Your files don’t work either. Is there any explanation?

  14. I found the problem. A new version of
    JavaScript Library v1.6 came out May 2, which is incompatible with Wonderwall. The gallery works if you go back to JavaScript Library v1.5.1. Thanks so much for this wonderful gallery.

  15. Hi

    I LOVE this application – and we are planning to use it very soon.
    However, we recently got hacked by foolishly using an insecure joomla component. I know you can never make a completely secure anything on the internet. I am not any kind of security expert or programmer really – so I hope you don’t mind me asking – has the gallery been written with security in mind? Or am I worrying too much…

    Thanks again – really appreciate this application!

    Edward

  16. Is anyone else having issues with large amounts of images in an album? When there are a lot of images, the gallery hangs while trying to create thumbnails.

  17. Hi there, excellent gallery. The only problem I have encountered is that the images do not load on iPhone (os4.3 using Safari) at first. The links are there, but not populated with images. If it is clicked, it takes you to the image which also doesn’t display, until the page is changed and navigated back to… I assume it then fetches the cached image. Is there something I am not noticing? Or a setting that needs to be changed?
    Cheers,
    Dave

  18. I figured it out; if you have a long-ish name for the gallery, it won’t load the images properly. I had named my gallery Comics and Superheroes, which was too long.

  19. Mary this is a great tutorial, but I have the same problem when the site is view in landscape, the images shrink to a pretty tiny size. Looks like some div has a fixed height? any help would be great, thanks

  20. I’ve set this up so it works with some of my images, however, most of the time it’s getting stuck at the loader when trying to pull up my thumbs. the album titles and image file names are the same in both the images and thumbs folders and the xml names match the correct image paths. is there anything that could be causing this? i’ve noticed that just adding a particular image to the thumbs folder can cause the whole thing to freeze up at the loader. any help would be greatly appreciated!

  21. I cannot get any of the links on the about page to work on an iPhone. They just keep refreshing the page. I would like to be able to use this for a portfolio but I need to get visitors back to my home page somehow. Any where and everywhere I add a link to my homepage it does not work…any suggestions?

  22. I am also having the issue of only the loading screen appearing. is there any solution on how to avoid this?

  23. When imgs are a small number, I’d like to have the dots in the lower part, like the carousel in iTunes. One example would be jqm.carousel (demo at http://andrebrov.net/dev/carousel/ ) but, among other things, I don’t like the numers (I’d like smaller dots).
    Can you help reproduce the effect with AMIGWA?

    Thank you!

  24. Sweet gallery.

    I’m also having the resize issues on iphone (iOS 4.x).

    Also, and more importantly to me), I made a sweet splash screen, but can’t seem to get it to come up., I didn’t change the filename or location, only modified the image file (and saved in the same format (.png)), still no dice. Any else get it to work?

  25. Very userful, my only concern is that when there are a lot of photos it become unusable. So for this reason I would like to implement a lazyloading or a pagination… but I’m having trouble on how to do it.. 🙁 Could someone please give me some suggestions? Pleaseee..

  26. This is an excellent tutorial. I learned a lot from it. Thanks a bunch. Bless you!

  27. Hi Mary Lou,

    thanks for this great tutorial. I have a question for you. Viewing the demopage from an iPhone (iOS 4.3.3) and a Samsung Galaxy Ace (Android 2.2.1), I noticed that while on the iPhone the images can not be zoomed into this is possible on the Samsung. Is this deliberate? How could zooming be enabled on the iPhone?

    Thanks again for the tutorial!

  28. Excellent tutorial, Just what I have been looking for for a project. Any ideas how I could use a media rss feed to pull images. EG if I am running WP and have a separate theme for mobile but want to feed Next gen gallery images into it.

    Thanks again!
    J 🙂

  29. Excellent tutorial – Is there any way to control the order of the thumbnails/images?

  30. Hi
    Very good job.
    Is the anytihng special about the pictures because your pictures are coming well on my iPhone but my pictures (.jpg) doesn’t come. The upload don’t stop.
    Thank you et sorry for my bad english.

  31. Sorry
    I found my answer.
    That can help another one.
    When I put the album folder on the server, un new file is crreated automatically : thumbs.db.
    I deleted it and everything is ok.

  32. Hi,

    great job! thank you for this, but it’s possible somehow to show current album name after choosed one instead of the word “thumbs” and “photo”?

  33. Is there a possibilty to control the order of the menu list of the folders. In this moment it shows the folders in alphabetic order (A-Z) and i would like to the by (Z-A).

  34. this is really cool, thanks fort he tut.
    i was just about to find a tut to guide me on jqtouch and ipad gallery for my portfolio.
    thanks.

  35. Peter B, Chris and MJ are correct – the first time thumbnails load, they always load out of order. Single back/forward navigation to the same screen fixes the issue. Peter’s suggestion to add an empty string to the UL doesn’t help. Dear Mary Lou, can you please suggest how to fix this issue?

  36. Here is the updated function loadThumbs() from jquery.gallery.js which makes sure that the thumbnails load in the correct order every single time (courtesy of Jaime Rodriguez):

    function loadThumbs(){
    var $thumbscontainer = $(‘#thumbs_container’);
    var $loader = $thumbscontainer.find(‘.loader’);
    $loader.show();

    var url = ‘ajax/’+album+’.txt’;
    //alert(‘ajax/’+album+’.txt’);
    $.get(url, function(data) {
    var countImages = data.length;
    var $ul = $(‘#thumbs’).empty();
    var counter = 0;

    for(var i = 0; i < countImages; ++i){
    try{
    var description = data[i].desc[0];
    }catch(e){
    description = '';
    }
    if(description == undefined)
    description = '';

    var link = '‘;

    $ul.append(link);

    //load the images into cache
    $(”).load(function(){
    ++counter;

    var $this = $(this);

    if(counter == countImages){
    $loader.hide();
    $thumbscontainer.append($ul.show());
    autoCenterPhotos();
    }
    });
    }

    $(‘#thumbs img’).each(function () {
    resizeGridImage($(this));
    });

    },’json’);
    }

  37. The comment above updates the function to use a static list of files in the album. Here’s the version that works with the dynamic (php) one:

    function loadThumbs(){
    var $thumbscontainer = $(‘#thumbs_container’);
    var $loader = $thumbscontainer.find(‘.loader’);
    $loader.show();

    var url = ‘ajax/thumbs.php?album=’+album;
    $.get(url, function(data) {
    var countImages = data.length;
    var $ul = $(‘#thumbs’).empty();
    var counter = 0;

    for(var i = 0; i < countImages; ++i){
    try{
    var description = data[i].desc[0];
    }catch(e){
    description = '';
    }
    if(description == undefined)
    description = '';

    var link = '‘;

    $ul.append(link);

    //load the images into cache
    $(”).load(function(){
    ++counter;

    var $this = $(this);

    if(counter == countImages){
    $loader.hide();
    $thumbscontainer.append($ul.show());
    autoCenterPhotos();
    }
    });
    }

    $(‘#thumbs img’).each(function () {
    resizeGridImage($(this));
    });

    },’json’);
    }

  38. Mary Lou – great work!
    Can you PLEASE post what data the javascript is looking for from ‘thumbs.php’?
    I am converting from PHP to Coldfusion. I got the Albums.php figured out, but I am having a problem with the thumbs.php file in what kind of data the jquery.gallery.js file is looking for in the loadThumbs(data) function.

    It looks like it’s json, but I created an array of Coldfusion structures, each with a key/value pair as done in the PHP file, then serialized it into a JSON object and passed that.
    But, it’s not working.
    Then I tried creating an XML object, but again, no go.

    Can you show here what the data is supposed to LOOK LIKE and any other info to help in converting this?
    I appreciate it!
    -Mark

  39. Hi Mary, It’ fantastic work.
    Just one thing, i just wanted the change the large imagine view i’d like to see it in fullscreen.
    like viewer iphone , is it possible to change something in .js or css to get it?
    thanks,
    sorry for my english
    my work is on http://www.gerardoraiola.it/mobile

  40. Many thanks but is it possible to generate (on-line) automaticaly thumbnails ? using php

    So, there we need to use a pictures software and after upload thumbs! it’s easy 😉 but very long… to do

  41. I have the problem that Resizing images in landscape doesnt work well. Can I get any tips?

  42. Very beautiful 😉 but please could you tell me which software you had used to crop these pictures ? like this

    I’m trying with some freewares (XNview, FastStone, etc) but result is not great…

    Thanks in advance

  43. Hello, great little program here, nice work. I am having some trouble with thumbs cutting off. I am opening the gallery in an iframe on my existing mobile site, you can view it on the samples area, I am using iphone4 and it is cut off. Is there a trick to force only say 3 thumbs wide so that this won’t happen? I have been looking in the jquery.gallery.js file and think it would be in there somewhere but not sure.
    If you go here on your mobile http://www.exposureclothingmobile.com/gallery you will see it works great, but when called in an iframe in the samples area it cuts off on the right, any ideas for a quick fix? email me a fix if you can.
    THanks!
    S