Photoflip slideshow effect with jQuery

Cliff Boit on September 6, 2011 in CSS, JQUERY, Tutorials | 3 comments

• Tweet
• Email

• Tweet
• Email

In today’s short tutorial we will create a slideshow from our previous Creating a css3 and jQuery photoflip tutorial you can view it here
In the previous tutorial we created a tutorial that was controlled by clicking the next link which took the top most image in a stack and placed it at the bottom of the stack, today we are going to automate the flipping through of the images by adding a simple autoadvance function.

Tweet

Demo

Download

The technique

Load all the images from the PHP backend and begin a flipping effect slideshow

Loading images

load_images.php

We use php’s glob to scan a directory for images and echo the name as a json string.

jQuery script

Loading images

var markup = {
			 slideshow_container : $('


'),
			 next : $(''),
			 loading : $('


')
			}
			markup.loading.hide().appendTo('body').fadeIn();
			markup.slideshow_container.find('img').remove();
			$.post("load_images.php",function (msg) {
				var image_count	= msg.length;//length of the data received from php json
				for(var i = 0; i < image_count; i++){ //loop
					var image_source = msg[i];
					var count 	= 0;
					$('').load(function(){ //pass each msg into an img attribute
						var image = $(this);
						count++; //post-increment count
						var rotate	= Math.ceil(Math.random()*-25);
						image.appendTo(markup.slideshow_container); //append
					if(count < image_count){ //rotate the images if they are more than one
							image.css({
								'transform'			:'rotate('+ rotate +'deg)',
								'-moz-transform'	:'rotate('+ rotate +'deg)',
								'-webkit-transform'	:'rotate('+ rotate +'deg)'
							});
						}//end if
						//after loading all the images
						if(count == image_count){
			markup.loading.fadeOut();
			markup.slideshow_container.hide().appendTo('body').fadeIn();
						}
					}).attr('src',image_source);//end img load function
				}//end for

		},'json');//end post function

For a breakdown on this, please refer to the previous tutorial.

Flipping through photos

(function autoAdvance(){
		markup.next.trigger('click',[true]);
			var top = markup.slideshow_container.find('img:last'); //topmost image in the album_container i.e index 0
			var rotate	= Math.ceil(Math.random()*-25); //degrees to rotate our images
			var next_top = top.prev(); //the image after the topmost i.e index 1
			if(top.is(':animated')){
				return false;
			}
			//store the top and left margins of the top most images
			var margins = {
				marginLeft	: top.css('margin-left'),
				marginTop	: top.css('margin-top')
			}

			//animate the topmost image with an album flip effect and insert it before the bottom most image in the stack
			//and give it the margins of the image before animation
			//rotate the topmost image into view and give it zero rotation
			top.animate({
				marginLeft : 250,
				marginTop : -385
			},500,function(){
				top.insertBefore(markup.slideshow_container.find('img:first'))
					   .css({
							'transform'			:'rotate('+rotate+'deg)',
							'-moz-transform'	:'rotate('+rotate+'deg)',
							'-webkit-transform'	:'rotate('+rotate+'deg)'
						})
					   .animate({
							'marginLeft':margins.marginLeft,
							'marginTop'	:margins.marginTop
							},500,function(){
								next_top.css({
									'transform'			:'rotate('+0+'deg)',
									'-moz-transform'	:'rotate('+0+'deg)',
									'-webkit-transform'	:'rotate('+0+'deg)'
								});
					   });
			});
		timeOut = setTimeout(autoAdvance,4000);
   })();

To autoadvance the slideshow, we need to simulate a click event on the next link which starts the transition.
After all the transition / animation of the topmost image has occurred we schedule a time out in 4 seconds where the autoadvance function is called again after four seconds.

and finally

Share this and help make this site even better

Hope you liked it now it is your turn to play your part.
Happy coding . . . . . . . . .