Fresh Sliding Thumbnails Gallery with jQuery and PHP

In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow […]

In this tutorial we are going to create another full page image gallery with a nice thumbnail area that scrolls automatically when moving the mouse. The idea is to allow the user to slightly zoom into the picture by clicking on it. The thumbnails bar slides down and the image resizes according to the screen size.

The scrolling functionality of the thumbnails bar is based on the great tutorial by Andrew Valums: Horizontal Scrolling Menu made with CSS and jQuery.
Additionally, we will be using PHP to get the images and thumbs automatically from the folder structure. The folders will contain album sub-folders and we will add a select option to the gallery which allows to choose an album.

Just like in the Sliding Panel Photo Wall Gallery with jQuery we will be using a resize function for the image displayed.

We will also add an XML file that (optionally) contains the descriptions of the images.

Another neat functionality that we are going to add is the changing cursor: depending in which mode and in which position of the full image we are, the cursor will change to a left or right arrow (for browsing the pictures), or to a plus or minus sign (for zooming in or out).

The beautiful images in the demo are from the Models 1 – Photoshoots album from Vincent Boiteau’s photostream on Flickr.

We also have a static version of the image gallery without the album option. You can find the demo link and the ZIP file in the end of this post.

And don’t forget to check out the tutorial of the  mobile version of this gallery: Awesome Mobile Image Gallery Web App

So, let’s start!

The Folder Structure

Today we will start this tutorial by the folder structure since it is important for our PHP functionality.

The necessary folders for the PHP to work are the images folder and the thumbs folder. They both need to be located in the root folder (where you will have the index.php file).

Whatever album sub-folder will be in the thumbs folder, also needs to be in the images folder. So, if we have thumbs/album1/22.jpg we also need images/album1/22.jpg which will be the full-size image.

With that organization we will be able to automatically display the album thumbnails and create a select box for all albums.

In each album folder of the thumbs we will also have an XML file with the descriptions for the images. We will call that file desc.xml. Adding the description for images is not obligatory, i.e. we will just read the ones that are there. The structure of the XML file will be the following:

<descriptions>
	<image>
		<name>1.jpg</name>
		<text>This is a nice description</text>
	</image>
	<image>
		<name>2.jpg</name>
		<text>red!</text>
	</image>
	<image>
		<name>3.jpg</name>
		<text>another one...</text>
	</image>
	...
</descriptions>

It is important that we name the images in the name tag correctly.
And also, make sure not to have any other files lying around in those folders.

The Markup and PHP

Let’s take a look at the HTML and also the PHP. We have a simple structure that will be dynamically “filled” by our PHP and JavaScript code:

<div class="albumbar">
	<span>Vincent Boiteau's photostream</span>
	<div id="albumSelect" class="albumSelect">
		<ul>
			<!-- We will dynamically generate the items -->
			<?php
				$firstAlbum = '';
				$i=0;
				if(file_exists('images')) {
					$files = array_slice(scandir('images'), 2);
					if(count($files)) {
						natcasesort($files);
						foreach($files as $file) {
							if($file != '.' && $file != '..') {
								if($i===0)
									$firstAlbum = $file;
								else
									echo "<li><a>$file</a></li>";
								++$i;
							}
						}
					}
				}
			?>
		</ul>
		<div class="title down">
			<?php echo $firstAlbum;?>
		</div>
	</div>
</div>
<div id="loading"></div>
<div id="preview">
	<div id="imageWrapper">
	</div>
</div>
<div id="thumbsWrapper">
</div>
<div class="infobar">
	<span id="description"></span>
</div>

The select box items get generated dynamically: we check the sub-folders in the images folder and put all the names in our items. The first album will be “selected” by default.

When we click on one of the items we will call the thumbs.php (inside the ajax folder) from within the JavaScript. We will get back an array (JSON) with all the information that we need to build our thumbnails. Let’s look at that PHP code first and later we will go through the JS:

$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');
}
/* read the images from the album and get the
 * description from the XML file:
 */
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);

So, we basically get all the thumbnails of the requested album and prepare the information for each img element. The final element that we will then add to our HTML will contain an alt attribute with the full image location as value and a title attribute with the description of the regarding picture as value. The description of the image is taken from the XML file we mentioned before. With an xpath expression we get to the node “name” that contains the image name and then we get the text of the description. In the JS we will then say that the description should be the value of the “title” attribute.

Now, let’s take a look at the style.

The CSS

First, we will add some default styling to the body:

body{
    font-family:Verdana;
    text-transform:uppercase;
    color:#fff;
    font-size:10px;
    overflow:hidden;
    background-color:#f9f9f9;
}

The current background color will be almost white but you can try other colors, it looks really wonderful with some!

Let’s style the album bar for the title of the page:

.albumbar{
    height:24px;
    line-height:24px;
    text-align:center;
    position:fixed;
    background-color:#000;
    left:0px;
    width:100%;
    top:0px;
    -moz-box-shadow:-2px 0px 4px #333;
    -webkit-box-shadow:-2px 0px 4px #333;
    box-shadow:-2px 0px 4px #333;
    z-index:11;
}

And also the info bar which will contain the description of each image:

.infobar{
    height:22px;
    line-height:22px;
    text-align:center;
    position:fixed;
    background-color:#000;
    left:0px;
    width:100%;
    bottom:0px;
    -moz-box-shadow:0px -1px 2px #000;
    -webkit-box-shadow:0px -1px 2px #000;
    box-shadow:0px -1px 2px #000;
}
span#description, .albumbar span{
    text-shadow:0px 0px 1px #fff;
    color:#fff;
}
.albumbar span a{
    color:#aaa;
    text-decoration:none;
}
.albumbar span a:hover{
    color:#ddd;
}

The info bar and the album bar will be fixed and located at the top and bottom of the page.
The select box and the inner list will be styled as follows:

.albumSelect{
    height:18px;
    line-height:18px;
    position:absolute;
    right:5px;
    top:2px;
    width:120px;
}
.albumSelect .title{
    color:#f0f0f0;
    z-index:10;
    border:1px solid #444;
    background-color:#555;
    background-repeat:no-repeat;
    background-position:90% 50%;
    cursor:pointer;
    text-align:left;
    text-indent:10px;
    width:100%;
    position:absolute;
    top:0px;
    left:0px;
}

The title div will have a little triangle as background image. We define two classes, up and down, that we will then set dynamically depending on if the album list is expanded or not:

.down{
    background-image:url(../icons/down.png);
}
.up{
    background-image:url(../icons/up.png);
}

The unordered list with all the albums will be styled as follows:

.albumSelect ul {
    list-style:none;
    display:none;
    padding:0px;
    width:100%;
    border:1px solid #444;
    background-color:#555;
    margin:22px 0px 0px 0px;
    -moz-box-shadow:0px 0px 2px #000;
    -webkit-box-shadow:0px 0px 2px #000;
    box-shadow:0px 0px 2px #000;
}
.albumSelect ul li a{
    text-decoration:none;
    cursor:pointer;
    display:block;
    padding:3px 0px;
    color:#ccc;
}
.albumSelect ul li a:hover{
    background-color:#000;
    color:#fff;
}

The list is set to display:none in the beginning since we only want it to appear when the user clicks on the triangle to expand it.

The loading container will be set to appear at the center of the page, with just a little bit more to the top since we have the thumbnails bar appearing sometimes. Setting top to 40% gives us what we need:

#loading{
    display:none;
    width:50px;
    height:50px;
    position:absolute;
    top:40%;
    left:50%;
    margin-left:-24px;
    background:transparent url(../icons/loading.gif) no-repeat top left;
}

To make the thumbs bar scrollable by moving the mouse we need to give it a special style. The thumbsWrapper will be positioned absolutely and occupy the width of the window. We set the vertical overflow to hidden because we don’t want any scroll bar to appear on the right.
The horizontal overflow will be managed in the JavaScript (it will be hidden).

#thumbsWrapper{
    position: absolute;
    width:100%;
    height:102px;
    overflow-y:hidden;
    background-color:#000;
    bottom:0px;
    left:0px;
    border-top:2px solid #000;
}

The thumbsContainer will be the inner div that will have a width equal to the sum of all the thumbnail widths. We will calculate the width dynamically in the JavaScript, so we don’t define it in the class:

#thumbsContainer{
    height:79px;
    display:block;
    margin: 0;
}

The thumbnail images will have the following style:

#thumbsWrapper img{
    float:left;
    margin:2px;
    display:block;
    cursor:pointer;
    opacity:0.4;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}

We give them a low opacity value since we want to add a hover effect.

The imageWrapper that contains the full image has the following style:

#imageWrapper{
    position:relative;
    text-align:center;
    padding-top:30px;
}

We add a top padding because we have the album bar at the top of the page. We don’t want the image to get hidden by it. The margin 0 auto will center the image horizontally:

#imageWrapper img{
    margin:0 auto;
    -moz-box-shadow:2px 2px 10px #111;
    -webkit-box-shadow:2px 2px 10px #111;
    box-shadow:2px 2px 10px #111;
}

We also create a neat box shadow for all modern browsers 🙂
Some of you might wonder why we set text-align center in the imageWrapper if we have the margin in the image. When we make things appear with the fadeIn function in jQuery, the display of the respective element becomes “block”. For that case our “margin:0 auto” will center the image. But for the case when we put the first image initially we need the inline centering property which is to give the parent “text-align:center”.

And finally, we define the classes for the different cursor types:

.cursorRight{
.cursorRight{
    cursor:url("../icons/next.cur"), url("icons/next.cur"), default;
}
.cursorLeft{
    cursor:url("../icons/prev.cur"), url("icons/prev.cur"),  default;
}
.cursorPlus{
    cursor:url("../icons/plus.cur"), url("icons/plus.cur"), default;
}
.cursorMinus{
    cursor:url("../icons/minus.cur"), url("icons/minus.cur"), default;
}

OK, this is basically a hack and not really nice, but the reason for this ugliness is the browsers’ handling. The first url is the path for FireFox, the second one is for IE and the default value needs to be there again for Firefox. Read more about custom cursors and cross-browser compatibility here.

Now, let’s get to the JavaScript.

The JavaScript

Let’s go step by step through the jQuery code. I will not follow the order like it is in the script but by the usage of the functions. I hope that it will be easier to understand like that.
In our $(function() { } we will add the following JavaScript:

/* name of the selected album, in the top right combo box */
    var album	= $('#albumSelect div').html();
    /* mode is small or expanded, depending on the picture size  */
    var mode = 'small';
    /* this is the index of the last clicked picture */
    var current = 0;

So, we will first declare some variables that we will need later and then we call:

 buildThumbs();

The buildThumbs() function is going to get the current album and generate the images with the accoring source and information:

function buildThumbs(){
	current=1;
	$('#imageWrapper').empty();
	$('#loading').show();
	$.get('ajax/thumbs.php?album='+album, function(data) {
		var countImages = data.length;
		var count = 0;
		var $tContainer = $('<div/>',{
			id	: 'thumbsContainer',
			style	: 'visibility:hidden;'
		})
		for(var i = 0; i < countImages; ++i){
			try{
				var description = data[i].desc[0];
			}catch(e){
				description='';
			}
			if(description==undefined)
				description='';
			$('<img title="'+description+'" alt="'+data[i].alt+'" height="75" />').load(function(){
				var $this = $(this);
				$tContainer.append($this);
				++count;
				if(count==1){
					/* load 1 image into container*/
					$('<img id="displayed" style="display:block;" class="cursorPlus"/>').load(function(){
						var $first = $(this);
						$('#loading').hide();
						resize($first,0);
						$('#imageWrapper').append($first);
						$('#description').html($this.attr('title'));
					}).attr('src',$this.attr('alt'));
				}
				if(count == countImages){
					$('#thumbsWrapper').empty().append($tContainer);
					thumbsDim($tContainer);
					makeScrollable($('#thumbsWrapper'),$tContainer,15);
				}
			}).attr('src',data[i].src);
		}
	},'json');
}

As we mentioned before, we will be using the thumbs.php file to get the info we need. When we are done building all the thumb images we append it to the thumbsWrapper and determine the size of the container with thumbsDim (line 36):

/* adjust the size (width) of the scrollable container
- this depends on all its images widths
*/
function thumbsDim($elem){
	var finalW = 0;
	$elem.find('img').each(function(i){
		var $img 		= $(this);
		finalW+=$img.width()+5;
	//plus 5 -> 4 margins + 1 to avoid rounded calculations
	});
	$elem.css('width',finalW+'px').css('visibility','visible');
}

Then we use makeScrollable (line 37) to make the thumbnail container scrollable by mouse move:

//Get our elements for faster access and set overlay width
function makeScrollable($wrapper, $container, contPadding){
	//Get menu width
	var divWidth = $wrapper.width();

	//Remove scrollbars
	$wrapper.css({
		overflow: 'hidden'
	});

	//Find last image container
	var lastLi = $container.find('img:last-child');
	$wrapper.scrollLeft(0);
	//When user move mouse over menu
	$wrapper.unbind('mousemove').bind('mousemove',function(e){

		//As images are loaded ul width increases,
		//so we recalculate it each time
		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + contPadding;

		var left = (e.pageX - $wrapper.offset().left) * (ulWidth-divWidth) / divWidth;
		$wrapper.scrollLeft(left);
	});
}

The following function takes care of the click event on a thumbnail and also the hover event:

/*
clicking on a thumb loads the image
(alt attribute of the thumb is the source of the large image);
mouseover and mouseout for a nice spotlight hover effect
*/
$('#thumbsContainer img').live('click',function(){
	loadPhoto($(this),'cursorPlus');
}).live('mouseover',function(){
	var $this   = $(this);
	$this.stop().animate({
		'opacity':'1.0'
	},200);
}).live('mouseout',function(){
	var $this   = $(this);
	$this.stop().animate({
		'opacity':'0.4'
	},200);
});

When a thumbnail is clicked we call the function loadPhoto (and we also pass the current cursor mode):

/*
loads a picture into the imageWrapper
the image source is in the thumb's alt attribute
*/
function loadPhoto($thumb,cursorClass){
	current		= $thumb.index()+1;
	$('#imageWrapper').empty();
	$('#loading').show();
	$('<img id="displayed" title="'+$thumb.attr('title')+'" class="'+cursorClass+'" style="display:none;"/>').load(function(){
		var $this = $(this);
		$('#loading').hide();
		resize($this,0);
		if(!$('#imageWrapper').find('img').length){
                  $('#imageWrapper').append($this.fadeIn(1000));
                  $('#description').html($this.attr('title'));
            }
	}).attr('src',$thumb.attr('alt'));
}

When want to adapt the size of the picture when we resize the window:

/* when resizing the window resize the picture */
$(window).bind('resize', function() {
	resize($('#displayed'),0);
});

The resize function is defined as follows:

/* function to resize an image based on the windows width and height */
function resize($image, type){
	var widthMargin     = 10
	var heightMargin    = 0;
	if(mode=='expanded')
		heightMargin = 60;
	else if(mode=='small')
		heightMargin = 150;
	//type 1 is animate, type 0 is normal
	var windowH      = $(window).height()-heightMargin;
	var windowW      = $(window).width()-widthMargin;
	var theImage     = new Image();
	theImage.src     = $image.attr("src");
	var imgwidth     = theImage.width;
	var imgheight    = theImage.height;

	if((imgwidth > windowW)||(imgheight > windowH)){
		if(imgwidth > imgheight){
			var newwidth = windowW;
			var ratio = imgwidth / windowW;
			var newheight = imgheight / ratio;
			theImage.height = newheight;
			theImage.width= newwidth;
			if(newheight>windowH){
				var newnewheight = windowH;
				var newratio = newheight/windowH;
				var newnewwidth =newwidth/newratio;
				theImage.width = newnewwidth;
				theImage.height= newnewheight;
			}
		}
		else{
			var newheight = windowH;
			var ratio = imgheight / windowH;
			var newwidth = imgwidth / ratio;
			theImage.height = newheight;
			theImage.width= newwidth;
			if(newwidth>windowW){
				var newnewwidth = windowW;
				var newratio = newwidth/windowW;
				var newnewheight =newheight/newratio;
				theImage.height = newnewheight;
				theImage.width= newnewwidth;
			}
		}
	}
	if((type==1)&&(!$.browser.msie))
		$image.stop(true).animate({
			'width':theImage.width+'px',
			'height':theImage.height+'px'
			},1000);
	else
		$image.css({
			'width':theImage.width+'px',
			'height':theImage.height+'px'
			});
}

The heightMargin depends on the mode we are in: if the thumbnails bar is out, we have less space so we reduce the allowed height of the image.

The following functions take care of what happens when we select an album:

/* Album combo events to open, close,
and select an album from the combo
*/
$('#albumSelect div').bind('click',function(){
	var $this = $(this);
	if($this.is('.up'))
		closeAlbumCombo();
	else if($this.is('.down'))
		openAlbumCombo();
});
$('#albumSelect ul > li').bind('click',function(){
	var $this 	= $(this);
	album 		= $this.find('a').html();
	buildThumbs();
	var $combo = $('#albumSelect div');
	$this.find('a').html($combo.html());
	$combo.html(album);
	closeAlbumCombo();
	orderCombo($this.parent());
});

And these are the three functions taking care of our self made combo box:

//functions to control the albums combos
function closeAlbumCombo(){
	var $combo = $('#albumSelect div');
	$combo.addClass('down').removeClass('up');
	$combo.prev().hide();
}
function openAlbumCombo(){
	var $combo = $('#albumSelect div');
	$combo.addClass('up').removeClass('down');
	$combo.prev().show();
}
function orderCombo($ul){
	var items = $ul.find('li').get();
	items.sort(function(a,b){
		var keyA = $(a).text();
		var keyB = $(b).text();

		if (keyA < keyB) return -1;
		if (keyA > keyB) return 1;
		return 0;
	});
	$.each(items, function(i, li){
		$ul.append(li);
	});
}

Now we define what happens when we hover over the main image or when we click on it. Depending on where we hover over the image, we want a certain cursor to appear. For that we check where we are with the mouse and apply the regarding class to the image:

/*
when hovering the main image change the mouse icons (left,right,plus,minus)
also when clicking on the image, expand it or make it smaller depending on the mode
*/
$('#displayed').live('mousemove',function(e){
	var $this 	= $(this);
	var imageWidth 	= parseFloat($this.css('width'),10);

	var x = e.pageX - $this.offset().left;
	if(x<(imageWidth/3))
		$this.addClass('cursorLeft')
			 .removeClass('cursorPlus cursorRight cursorMinus');
	else if(x>(2*(imageWidth/3)))
		$this.addClass('cursorRight')
			 .removeClass('cursorPlus cursorLeft cursorMinus');
	else{
		if(mode=='expanded'){
			$this.addClass('cursorMinus')
				 .removeClass('cursorLeft cursorRight cursorPlus');
		}
		else if(mode=='small'){
			$this.addClass('cursorPlus')
				 .removeClass('cursorLeft cursorRight cursorMinus');
		}
	}
}).live('click',function(){
	var $this = $(this);
	if(mode=='expanded' && $this.is('.cursorMinus')){
		mode='small';
		$this.addClass('cursorPlus')
			 .removeClass('cursorLeft cursorRight cursorMinus');
		$('#thumbsWrapper').stop().animate({
			'bottom':'0px'
		},300);
		resize($this,1);
	}
	else if(mode=='small' && $this.is('.cursorPlus')){
		mode='expanded';
		$this.addClass('cursorMinus')
			 .removeClass('cursorLeft cursorRight cursorPlus');
		$('#thumbsWrapper').stop().animate({
			'bottom':'-85px'
		},300);
		resize($this,1);
	}
	else if($this.is('.cursorRight')){
		var $thumb = $('#thumbsContainer img:nth-child('+parseInt(current+1)+')');
		if($thumb.length){
			++current;
			loadPhoto($thumb,'cursorRight');
		}
	}
	else if($this.is('.cursorLeft')){
		var $thumb = $('#thumbsContainer img:nth-child('+parseInt(current-1)+')');
		if($thumb.length){
			--current;
			loadPhoto($thumb,'cursorLeft');
		}
	}
});

When we click on the image, we check which cursor we had, because like that we know which image we have to display next (i.e. the next or the previous one). Our “current” variable helps us keep track of which picture we are currently viewing.

And that’s it! I hope you enjoyed this gigantic tutorial!

Note that in this demo we don’t use very big images, so the “zoom in”/ resize will just show you the full image maximum and never resize the picture beyond its real dimensions. If you use very large images the effect will be a nice experience for users with a large screen.

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

We created a mobile version of this gallery: Awesome Mobile Image Gallery Web App

Message from TestkingJoin our online testking N10-004 web designing course to learn how to improve your website using PHP and jQuery. Download testking 70-640 tutorial and testking 220-701 design guide to learn how to create fresh sliding thumbnails gallery with jquery.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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

Feedback 142

Comments are closed.
  1. Awesome gallery! Has anyone done a fadeOut() feature? I want to use this on my new site but I’d love to have the main image fade out before loading the next one. I’ve been trying to figure out where that should happen but I keep getting the fadeout after the new image is loaded. I’ve tried calling the fadeout with loadPicture as the callback… that doesn’t seem to work. Still a bit new to jQuery… any help would be appreciated.

  2. This tutorial is awesome, the sample data works well, however i’m having some trouble after modified the xml, the thumbnails won’t display anything, I’m using PHP 5 with json support on XAMPP.

    I even tried with Shai Perednik script and the timthumb which have those auto generated xml. That also doesn’t work for me. I even editing the xml with a real xml editor, still no luck 🙁

    Anybody have any suggestion / solutions?

  3. Agreed this is a great gallery. I too would like to be able to link to specific albums.

  4. Mary, Shai and Bali, Great work indeed. I noticed that the timthumb.php creastes a cache folder in the ajax folder and generates all the thumbnails in the cache folder. Is there a way to place all the generated thumbnails in the respective folders in the thumbs folder instead? That way, it won’t call the timthumb.php again and again. Thanks.

  5. fantastic stuff and I’m trying the static demo. There still seems to be a bug when working with Chrome (12.0.742.112)
    If I load the page I get all thumbnails, if I refresh I only get a few. If I then go to the URL bar and hit return it shows all again.
    Is this the browser at fault or some weird caching going on?

  6. integrating album choice button into a jquery menu button any ideas?

    also currently using xnview program to resize my pictures so that they are not 2-4 mb. so that they will maintain aspect ratio but keep them in the 200-400kb range for faster load times. Maybe there is a way to incorporate this into a jquery plugin to do a batch resize to the desired size but keep the aspect?

  7. Will give an update. I fixed it for Chrome and Safari. I was using timthumb to dynamically create thumbnails from the larger image. Worked fine ie IE/FF but Chrome/Safari needed me to also specify the height/width of the thumb in the <img src… statement.

  8. Is there any way, to open the image in the middle of the site, I mean not in the center between left and right, but between album selector box (on the top) and thumbs selector box (on the bottom)?

  9. Hey have used ur gallery but when am inserting the images in both the folder.
    It does not show images in thumb.

  10. Great job Mary !

    Quick question… Why using XML and not a data base ?

    Cheers,

  11. Joe,
    yes, it could be possible but trying to convert to php and embed the would code in my wordpress bugs…look like it as something to do with the ajax part. will try to work on it but I am photographer … not developer…any help is welcome.

  12. hey, this is awesome. is there away to update the URL to the pictures? that way we can link to the picture from elsewhere?

  13. @ Barry

    I am in the same boat you are in where I only get first thumbnail on page refresh in chrome.

    I see you fixed it by adding both height and width to the statement.

    I was wondering if you could the code you used since I have tried defining the height in the thumbs.php in the line of code that generates the imagearray, however that does not seem to fix my problem!

  14. Alright, I got the thumbnails to work in google chrome by using Timthumb and bypassing the browser cache.

    The issue appears to be with google chrome and they way it would cache the thumbs and the way they were being called back. By editing the headers in Timthumb you can force it so that the thumbnails are not cached locally on someone’s comp.

    This is not an ideal solution since it forces the browser to fetch them every time, and if you have a lot of thumbs, could slow the site down some. If I find a better solution or if anyone has any questions on how to adjust the headers in Timthumb to make it work, let me know!

  15. Hi Codrops folks,

    as promised I started integrating you galleries with drupal 7. The second experiment is almost done. see “http://drupal7.babygeorges.com/fresh_sliding_thumbnails_gallery”

    My first experiment now as good see, “http://drupal7.babygeorges.com/ingrandmasgarden”, I will use knowledge gain from 2nd experiment to improve on it.

    Thank you again for such beautiful work!

  16. Fixing some bugs:
    1. Chrome problem (loading only 1 or 2 thumbs when switching albums) – edit jquery.gallery.js line 137 and add there: width=”75″
    2. Sorting of thumbnails is random (everytime you display the album you see different order of thumbnails) – edit jquery.gallery.js add line after line 157 (above …’json’…) with content: $tContainer.sort();

  17. Mike, is indeed a problem with Chrome.. line 137 is unclear for me.. Could you write exactly wich line must be extended? thank you in advance.

  18. Hi,

    Do you think it’s possible to add near the desc a link for download the pictures?

    Thx

  19. thanks for this!! I enjoy it very much, but when I add my images to the folders in the correct way described up here, My images look weird. and nothing appears in the bar below 🙁 no thumbs. even when clicking on the main image, nothing happens… can u tell what I’m doing wrong?
    thanks

  20. Looks great! I downloaded it and tried to take a look in browser, but it just continues to load forever. Is the download ready as is? Am I missing something?

  21. thanks for your great tutorial i am using your script to make my gallery, but i got a problem i could not able to get large image on chrome, i tested it to my local host its works fine in all
    browser but when i upload it to my real server works on IE and Firefox but it dosent display the full image on chrome. on my console box there is a error message :
    GET http://domain.com/gallery/css/icons/plus.cur 404(Not Found)
    when i click this link it display discription:
    Name path: plus.cur (/gallery/css/icons) (Note: i dont have and icons folder in my css dis)
    type: text/html
    Initiator: jquery.min.js
    how can i romover this error thanks for any sussetions thanks

  22. I need to order the images that are displayed
    Always out in random order.
    Someone could solve this problem?

  23. Hi there

    Great tutorial, I was wondering if you had a tutorial for creating this same effect but using asp.net instead of php as our solutions are based on .net and that is the languages I understand.

  24. Fantastic tutorial as usual Mary Lou… whatever happened to youtube videos being able to be shown together with the pics in the album…
    Shai Perednik did you eventually get it to work?

  25. I followed the tutorial and it correctly works on Firefox and IE. Unfortunately it doesn’t work on Chrome, the thumbs don’t appear and the loading gif keeps moving without loading any photo.

    What’s wrong?

  26. Oh and another thing:
    I’ve numbered both the photos and the thumbnails, but every time I refresh the page the order is different. It seems to me there’s no order at all (aleatory). How can I change this?

  27. Thanks for this tutorial! I have one problem: I want to add an autoplay option to this gallery with nice FadeIn and FadeOut effects. That is make pictures to change smoothly one by one.

  28. I thought something like this code would work but it doesn’t:

    function loadPhoto($thumb,cursorClass){
    current = $thumb.index()+1;
    $(‘#imageWrapper’).empty();
    // $(‘#loading’).show();
    $(”).load(function(){
    var $theImage = $(this);
    $(‘#loading’).hide();

    $(‘#imageWrapper’).stop().fadeOut(500,function(){
    var $this = $(this);

    $this.remove();
    resize($theImage);

    $(‘#imageWrapper’).append($theImage.show());
    $theImage.stop().fadeIn(800);
    });

    }).attr(‘src’,$thumb.attr(‘alt’));
    }

  29. I found an appropriated decision:
    function loadPhoto($thumb,cursorClass){
    current = $thumb.index()+1;
    $(‘#imageWrapper’).empty();
    // $(‘#loading’).show();
    $(”).load(function(){
    var $theImage = $(this);
    $(‘#loading’).hide();
    resize($theImage,0);

    if(!$(‘#imageWrapper’).find(‘img’).length){
    $(‘#imageWrapper’).append($theImage.fadeIn(1000, function(){
    $(‘#imageWrapper’).append($theImage.delay(4000).fadeOut(1000));
    }));
    $(‘#description’).html($theImage.attr(‘title’));
    }

    }).attr(‘src’,$thumb.attr(‘alt’));
    }

  30. I love this slideshow but am having problems with the large image size.
    I have added a header with a logo and the large image seems to be cut off at the bottom now. Can anyone suggest any solutions? Thanks

  31. For Chrome thumbs problem:
    open jquery.gallery.js
    and modify line 137 to:
    $(”).load(function(){

    Chrome needs to now width to display it correctly

  32. For fixing displaying thumbs in random order:

    in jquery.gallery.js after line 157 add new line:
    $tContainer.sort();

  33. If you want to sort album list in descending order (for example if you use YYYY-MM-DD as a folder names)
    then edit jquery.gallery.js
    and replace lines 207, 208 to:
    if (keyA keyB) return -1;

  34. Hi! Wonderful tutorial!
    I’ve a little problem with my downloaded files. I can watch the online demo but I can’t see my unzipped file properly. I’ve tried with firefox, chrome and IE8. Please help me.

  35. RANDOM THUMBS PROBLEM
    I added a new line after line 157 $tContainer.sort(); but still continues to do random..

  36. Hello! I can’t solve the THUMBS problem in CHROME the 137 line is: }).attr(‘src’,$thumb.attr(‘alt’)); and I can’t change that, it won’t let me.
    How do you solve this?
    Has anyone solved the maximizing problem in IE( when you click + it changes in a flash without slowing)

    I saw that the dynamic gallery has not the THUMBS problem in CHROME. Can anyone help me changing the path to the files with php ? I don’t know any php.
    Waiting for your answers! thank you very much!!!