Minimal GUI Set: More Than 1000 Free Elements, Buttons, Patterns, Icons And Many More

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

Amazing jQuery photo slider

Comments and suggestions in here

What’s up guys?, to continue with our experiment series, our designing and programming team joined forces to create an amazing carousel vintage photo slider with PHP and jQuery. This is definitely a nice photo slider to be applied in different websites so you can showcase your work in a more original way. This tutorial is going to cover the programming part of the carousel (stay close to find out the release time of the design part) so you can learn how we did this fancy photo slider and you can adapt it to your own projects. You can also take a look at the demo to see how it works and download all the source files.


View demo
Download Source

How does it work?

Basically, the carousel is the way for you to interact with the vintage camera and operate it as a photo slider. You can either use the scroll key of your mouse or click over the blue button to animate the carousel and visualize all the different elements that are part of it. Regarding the action, you can either click directly over the front image or utilize the “click” button so the vintage camera can give you a fancy picture of it, pretty cool isn’t it?.

First we have three main layers: The top layer is the camera body, which is basically a DIV container or in more colloquial terms, the part where the picture is created. Then we have the picture frame which is essentially the large image that will be displayed after the click action and finally, the bottom layer contains the camera slot, which is another DIV that emulates a real slot from where the Polaroid emerges.

Carousel01

Regarding the carousel itself, we have two different folders: The first one contains all the blurred versions and the second the regular pictures. Every time the carousel moves following your commands, those images change depending their position, the central picture in front of the carousel will be at 100 % while the left and right pictures will have a size value around 90 %, the others will reduce their size proportionately.

Carousel02

Step 1: Identifying our camera’s elements

Before we proceed with the coding section, we have to define all the graphic elements that are going to be part of our photo slider, so instead of confusing you with tons of words, let’s see a small board where you will see the images that we’re going to use for our exercise.

Carousel03

Inside the imgs folder there will be three different subfolders: Blur, image and thumbnail.

Carousel04

Carousel05

Carousel06

And now let’s see the main pictures that we’re going to use for the creation of our photo slider.

Carousel07

Step 2: Setup the PHP

And now the coding part begins, create a new PHP file and name it index.php so we can proceed. This file will have almost all the code that actually brings our photo slider to life.

    <?php  //This function calls the images and obtains an array with the listed files.  function list_files($path,$extension)  	{  		$folders = array();  		if (is_dir($path)){  			$punt = opendir($path);  			while ($folder = readdir($punt)) {  				if ($folder[0] == '.'){ continue; }  				if (is_file($path.$folder) and preg_match('/.'.$extension.'$/', $folder)){  					$folders[] = $folder;  				}  			}  		}  		closedir($punt);  		sort($folders);  		$po=count($folders);  		return $folders;  }  $path_img='imgs/thubmnail/';/// Assigned route for the default small images, it's at 128.  $path_img_256='imgs/image/';// Assigned route for the big images that are displayed on the picture.  $path_blur='imgs/blur/';// Blur is the assigned route for the images.  $img_pack=list_files($path_img,'png');/// This function that loads the images is named list_files  ?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />  	<title>photo gallery</title>  	<link href="css/style.css" rel="stylesheet" type="text/css" />  	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>  	<!--This script makes reference to http://www.professorcloud.com/mainsite/carousel.htm-->  	<script type="text/JavaScript" src="js/cloud-carousel.1.0.4.js"></script>  	<!--This script makes reference to http://adomas.org/javascript-mouse-wheel/-->  	<script type="text/JavaScript" src="js/jquery.mousewheel.js"></script>  	<script type="text/javascript">  				var img_acttually=''; // Assigned variable for the selected image (the one in front of the carousel)  		var photo_status=false; //  Variable for picture's assignment  		// This function calls all the images first (preloader images)  		$.fn.preload = function() {  		    this.each(function(){  	        $('<img/>')[0].src = this;  		    });  		}  		<?php  		foreach($img_pack as $index => $images)  		{  			if ($index==10)  			{  			break;  			}  			@$img_preload.="'".$path_img_256.$images."','".$path_blur.$images."','".$path_img.$images."',";  		}  		?>  		$([<?php echo trim($img_preload,',');?>]).preload(); // Here goes the images' route for being preloaded.    		$(document).ready(function(){  			/// This jQuery function assigns the parameters.  				$("#carousel2").CloudCarousel({  					xPos:380, /// Position of the horizontal carusel.  					yPos:80, /// Position of the vertical carousel.  					buttonLeft: $('#filp_back'), /// ID's sssignment of the right buttons.  					buttonRight: $('#filp_next'),/// ID's sssignment of the left buttons.  					FPS:60, /// Frames per second.  					autoRotate: 'no', /// Automatic rotation.  					autoRotateDelay: 0, /// Time it takes to move to the next image.  					speed:0.5,// Rotation's speed.  					mouseWheel:true // Enables the mousewheel.  				});  			// This function assigns a click down / mouse down event to the carousel when making click over the frontal image.  			$("#click , .cloudcarousel").bind('mousedown',function(event){  			// Validates if the picture is currently animated to avoid multiple clicks.    				if ($("#picture").is(':animated'))  					{  					 return false;  					}  				var href=image_selected.alt; // Assigns the ALT variable that is the equivalent to the large picture and assigns the picture.  				/// On this part a validation process happens to detect if the picture is outside of the carrousel's center that is making click.  				if ($(this).hasClass("selected")===false && $(this).attr('id')!='click'   )  					{  						return false;  					}  				if (href===img_acttually)  					{  						return false;  					}  				// This is the part that generates the animation that occurs when the picture's paper comes out, it's a large picture that quickly animates depending on the picture's height.  				if (photo_status===false)  					{  						img_acttually=href;  						$("#picture").attr("src",href).bind('load',function(){    							var img_shoot=$("#picture").height()+40;    							$("#picture").animate({"bottom": "-="+img_shoot},'fast',function() {  							photo_status=true;  							});  						});  					}  				else  					{  						img_acttually=href;  						//  If the animation happened for the first time a fading effect is assigned and prints the picture, this span lasts 300 miliseconds.  						$("#picture").hide("fade", {}, 100,function() {  							$(this).css({'display': 'inline', 'bottom': '58px'});  							$(this).attr("src",href);  						});  						var img_shoot=$(this).height()+40;  						$(this).animate({"bottom": "="+img_shoot},100);  					}  				});  			});  	</script>  </head>  <body>  <div class="header" align="center" >  	<img src="img/header_banner.png" border="0"  style="position:relative; z-index:4;" />    </div>  	<div class="container">  		<div id="camera">            	 <!--- Loads the camera's picture defining it in 2 distinct parts.          		1. camera_a.png : Establishes the main camera until the slot section that prints the picture.                  2. camera_b.png : Defines the camera from the slot section to the end of itself.                  Y este id #picture : Prints the picture while displaying an animation effect.  			 -->               <div style="height:70px; width:500px; overflow:hidden; background:url(img/background_1.png);  position:absolute; top:-30px; z-index:5;"></div>  			<img class="camera_a" src="img/camera_a.png" border="0" />  			<div class="show_photo">  	        	<img id="picture" src=""  />  				<img class="camera_b" src="img/camera_b.png" border="0" />  			</div>  		</div>  		<div id="carousel2" style="width:750px; height:300px; float:left;">  			<?php    				foreach($img_pack as $index => $images)  				{  /*			$path_destiny=$path_blur.$images;  					$path_origen=$path_img.$images;  			  	passthru("convert  $path_origen -channel RGBA -blur 0x2  $path_destiny",$result_b);					*/  					if ($index==10)  					{  					break;  					}  						/* Prints the small size pictures with a blur effect and establishes the following parameters:  							1.src--> Blurred image.  							2.title--> Original small size picture.  							3.name--> Blurred image.  							4.alt--> Defines the large image for the animation.  							The class cloudcarousel defines in jQuery the carousel's animation.  						*/  			?>  				<img class="cloudcarousel"   src="<?php echo $path_blur.$images; ?>" title="<?php echo $path_img.$images; ?>"  name="<?php echo $path_blur.$images; ?>"      alt="<?php echo $path_img_256.$images; ?>" border="0" width="128" height="128" />  			<?php  			}  			?>              <!-- On this part the animation buttons are defined, which are the following:              		but3: Moves the carousel to the left.                      but4: Moves the carousel to the right.                      take_photo: Takes a picture from the image located in the front side of the carousel.              -->    		</div>          <div class="functions"  >                      <div class="flip">  	            <div id="filp_back" >                   <img src="img/flip_back.png" />                  </div>                  <div>                    </div>  				<div id="filp_next"  >                    <img src="img/flip_next.png" />                  </div>              </div>    			<div id="click" >              	<img src="img/click_image.png" />    			</div>             	<img class="the_shock_bundle" src="img/the_shock_bundle.png" />          </div>    	</div>    <div class="footer"  >  	<div>  	 	<img class="rss_image"  src="img/rss_image.png" />      </div>  </div>    </body>  </html>    

Step 3: Set up the CSS

Besides the PHP, we will make another file called style.css – which is the part where we can establish the main style of our vintage Polaroid photo slider.

    *{  	margin:0;  	padding:0;  	background:url(../img/background_1.png);    }  div{  	background:transparent;  }  img{  	background:transparent;    }  /* This part defines the main container.*/  .header{  	position:relative;  	background:url(../img/header_textures.png) repeat-x;  	width:100%;  	height:125px;  	overflow:hidden;  	z-index:4;  }  .header img{  	text-align:center;    }  .container{  	position:relative;  	width:1250px;  	height:835px;  	margin:0 auto;  	z-index:3;    }    .functions{  	position:relative;  	left:100px;  	bottom:50px;  	background:url(../img/border_functions.png) no-repeat;  	float:left;  	height:471px;  	width:571px;    }  .flip{  	position:absolute;  	top:50px;  	left:10px;  	background:url(../img/button_flip.png) no-repeat;  	margin:5px 0;  	width:149px; height:33px; overflow:hidden;    }  div.flip div{  	float:left;  	text-align:center;  	width:90px;  	padding:3px 0 0 0;    }    div#filp_back{    	margin:auto 0;  	padding:3px 0 0 0;  /*	background:url(../img/flip_back.png) no-repeat center  ;*/  	width:29px;  	height:33px;    }    div#filp_next{  	margin:auto 0;    	padding:3px 0 0 0;  /*	background:url(../img/flip_next.png) no-repeat center ;*/  	width:29px;  	height:33px;    }  div#click{  	position:absolute;  	top:90px;  	left:10px;    	width:149px; height:38px; overflow:hidden; margin:5px 0;    	cursor:pointer;    }  .the_shock_bundle{  	position:absolute;  	top:250px;  	left:40px;  	z-index:99;    }    		/* Here's where we define the camera's container.*/  	div#camera  	{  		float:left;  		position:relative;  		width:500px;  		height:auto;    	}  	/* A and B part of the camera. */  		.camera_a  		{  			position:absolute;  			top:0;  			z-index:3;  		}  		.camera_b  		{  			position:absolute;  			bottom:0;  			z-index:1;  		}  		div.show_photo{  			position:relative;  			width:500px;  			height:431px;  			margin:0;  		}  		/* Defines the images in CSS. */  img#picture{  	background:#FFF;  	position:absolute;  	bottom:58px;  	left:45px;  	z-index:2;  	border:1px solid #CCC;  }  .footer{  	position:relative;    	background:url(../img/footer_textures.png) repeat-x;  	width:100%;  	height:155px;  	z-index:3;    }  .footer div{  	position:relative;  	width:1008px;  	margin:0 auto;  	z-index:3;    }    /* picture defines the camera's image. */    

And now it’s done, our photo slider is now complete with all its functions fully operating. We hope that you have enjoyed reading this tutorial, it has been tested in all modern browsers displaying a great performance, please leave us your questions and suggestions about what other things you will like to find in our website, thanks for visiting TutorialShock and we will see you next time.


View demo
Download Source


106 Responses to “Amazing jQuery photo slider”

  1. nice photo sliders, thanks for share.

  2. has some bugs. click doesn’t produce photo consistently.

  3. wau! it’s amazing!!!!!!But nowadays you’ll need an explication if you would put it on a website, because people don’t interact to web.However it’s a great use of resources we have.

    • Thanks buddy, this carousel can be easily implemented on your site, as for explaining to people how to use it, you might want to use some of our icons for that purpose :)…

  4. Amazing Article…

    Nice and detailed slider tutorial, thanks :)

    • Thank you Vladimir, does it look well in your browser?, some people have said that they are having problems visualizing it…

  5. really useful slider you sharing. thanks

  6. woah i really love it!

  7. Nicolas Gauthier
    August 13th

    Very nice! Just a little bug when you try to drag an item. I know, it is not supposed to be dragged but the thing is that after you did this, the clicking action is not working anymore.

    • Thanks for the advice Nicolas, we did not test the slider’s behavior after a dragging action, we’re going to take a look at it…

  8. Random
    August 15th

    Very nice but a bit buggy like what the other poster said. Showing incorrect picture.

    I’m using Firefox 5.0.1.

  9. Thanks for this awesome slider. I shared the link on G+

  10. I did not find any bugs using IE9. Looks great. One thing I would add, when clicking of the flip button it would be nice if it just kept going round if you clik and hold. Fun to watch it spin.

  11. Great share! Have yet to give it a go, but thought I would thank you in advance. Looks great. Thanks!

  12. Hi,
    very nice article

    http://www.webdesign-ukblog.com

    thank you

  13. Thank a lot Mate. glad you like it

  14. Rhonda
    October 9th

    This is awesome! love the icons – please release these over at iconshock.com THANX!!!

  15. Nice post… Well Explained.. Nowadays JQuery made our life so simple and stylish.. Post more buddy..
    http://www.hscripts.com/scripts/jquery/tabbed-menu.php

    • hi mate, thanks for the tabbed menu. it’s a great resource you can’t miss on your website or blog :)

  16. I know this web page provides quality dependent posts and extra information, is there any other web site which provides such stuff in quality?

    • WebDesignShock
      January 30th

      Thank you for the recognition to our work. Be on the lookout for upcoming posts on the matter. Best regards

  17. a nice little photo-slider, I’m bookmarking this one for sure!

  18. Dan Jordan
    September 6th

    Beautiful graphics and I love the fluid sliding. Demo works great when I behave myself, but if I get it spinning really fast, it loses track of what image is in the foreground. After it puts up the wrong image, it refuses to work until you refresh the page again.

    [Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:15.0) Gecko/20100101 Firefox/15.0]

  19. thank you

  20. thanks

  21. I loved your blog article. Really Cool.

  22. AFAICT you’ve corveed all the bases with this answer!

  23. In awe of that awnesr! Really cool!

  24. If you want to get read, this is how you shulod write.

  25. IMHO you’ve got the right awnser!

  26. thanks Jory, wise words!

  27. RT @webdesignshock: Amazing jQuery photo slider with a vintage touch http://goo.gl/fb/5uvzQ

  28. Amazing jQuery photo slider with a vintage touch http://cid.im/qzmYzB #awesome

  29. Amazing #jQuery and #PHP photo #slider with a nice vintage touch http://t.co/lQzpK0W (via @webdesignshock)

  30. Amazing #jQuery and #PHP photo #slider with a nice vintage touch http://t.co/0malsom (via @webdesignshock)

  31. Amazing #jQuery and #PHP photo #slider with a nice vintage touch http://t.co/TM4T2iO (via @webdesignshock)

  32. Amazing #jQuery and #PHP photo #slider with a nice vintage touch http://t.co/mvPlEgx (via @webdesignshock)

  33. via @john_1991 Amazing #jQuery and #PHP photo #slider with a nice vintage touch http://t.co/2RNSi6F (via @webdesignshock)

  34. Amazing jQuery photo slider with a vintage touch http://t.co/iWDKoyl

  35. RT @umutm: An original photo slider by @WebDesignShock – http://bit.ly/p73MgM // That is fantastic. *bookmark* #webdesign #jquery

  36. Amazing #jQuery and #PHP photo #slider with a nice vintage touch http://t.co/y5SLeS3 (via @webdesignshock)

  37. RT @umutm: An original photo slider by @WebDesignShock – http://bit.ly/p73MgM

  38. RT @umutm: An original photo slider by @WebDesignShock – http://bit.ly/p73MgM

  39. RT @speckyboy: Amazing jQuery photo slider with a vintage touch http://bit.ly/oQE3iG

  40. RT @linksub: RT @jQueryBot via @martin870 speckyboy: Amazing jQuery photo slider with a vintage touch http://bit.ly/oQE3iG

  41. Amazing jQuery photo slider with a vintage touch http://t.co/kQkPGcY via @webdesignshock

  42. RT @speckyboy: Amazing jQuery photo slider with a vintage touch http://bit.ly/oQE3iG

  43. RT @speckyboy: Amazing jQuery photo slider with a vintage touch http://bit.ly/oQE3iG

  44. Amazing jQuery photo slider with a vintage touch http://t.co/aNPh7TE vía @webdesignshock

  45. RT @speckyboy: Amazing jQuery photo slider with a vintage touch http://bit.ly/oQE3iG

  46. RT @iconshock: Best photo slider ever ! http://j.mp/nbGfvj Please RT

  47. RT @luckytto: Photo slider effect http://t.co/qOV0Sj9 #webdesign

  48. RT @webdesignshock: Best photo slider ever ! http://j.mp/nbGfvj Please RT

  49. Amazing jQuery photo slider with a vintage touch http://t.co/opLq5BR via @webdesignshock

  50. Best photo slider ever! http://j.mp/nbGfvj (via @themeshock) #smsfav

  51. Amazing jQuery photo slider with a vintage touch http://t.co/npiB5Hg @ambiss esse é legal friend :D

  52. Amazing jQuery photo slider with a vintage touch http://t.co/OlgEotR

  53. Amazing jQuery photo slider with a vintage touch http://t.co/V0yAjw3 via @webdesignshock

  54. Amazing jQuery photo slider with a vintage touch http://t.co/xRLmf1c via @webdesignshock

  55. Amazing jQuery photo slider with a vintage touch http://t.co/n1VDlRA http://t.co/gijSY1p via @webdesignshock #jQuery #slider #3dCarousel

  56. Amazing #jQuery photo slider with a vintage touch http://dld.bz/akzJx

  57. RT @csslab: #jQuery photo slider, impressivelly smooth http://t.co/CfwQH9U

  58. Amazing jQuery photo slider with a vintage touch http://t.co/dAhpvU5 via @webdesignshock

  59. Amazing jQuery photo slider http://t.co/I035TgZ via @webdesignshock

  60. Amazing jQuery photo slider http://t.co/WuMCkw4 via @webdesignshock

  61. via @CorneliaMladen Amazing jQuery photo slider http://t.co/6M3cmBi via @webdesignshock

  62. RT @Cinzia_: Amazing jQuery Photo Slider http://ow.ly/62NSY #jquery

  63. Amazing jQuery photo slider http://t.co/oVxlaAF vía @webdesignshock

  64. via @ochinto Amazing jQuery #photo slider http://t.co/Kgh8Zp7y (via @webdesignshock) Please RT

  65. Amazing jQuery #photo slider http://t.co/TTQ04PnM (via @webdesignshock) Please RT

  66. Amazing jQuery #photo slider http://t.co/EsBwzGAi (via @webdesignshock) Please RT

  67. Amazing jQuery #photo slider http://t.co/2kTrI4eb (via @webdesignshock) Please RT

  68. Amazing jQuery #photo slider http://t.co/Mj3kyoSU (via @webdesignshock) Please RT

  69. @DiggSiraj says:

    RT @mz143: Amazing jQuery #photo slider http://t.co/Mj3kyoSU (via @webdesignshock) Please RT

  70. Amazing jQuery #photo slider http://t.co/aAwPRjLP (via @webdesignshock) Please RT

  71. via @gameflank Amazing jQuery #photo slider http://t.co/Kgh8Zp7y (via @webdesignshock) Please RT

  72. @farooko says:

    Amazing jQuery photo slider http://t.co/EPQ75mPU via @webdesignshock

  73. via @farooko Amazing jQuery photo slider http://t.co/Kgh8Zp7y via @webdesignshock

  74. RT @jQueryBot: via @farooko Amazing jQuery photo slider http://t.co/Kgh8Zp7y via @webdesignshock

  75. Amazing jQuery #photo slider http://t.co/iWwHzdyt (via @webdesignshock) Please RT

  76. Amazing jQuery #photo slider http://t.co/SikQvtYX (via @webdesignshock) Please RT

  77. Amazing jQuery photo slider http://t.co/z437UMhX via @webdesignshock

  78. Amazing jQuery photo slider @webdesignshock http://t.co/GsvqQkwm http://t.co/eNIdpckS #slider #carousel #jQuery frontEnd

  79. Amazing jQuery photo slider http://t.co/XWkKocgS vía @webdesignshock

  80. Dalsi z rady zajimavych jQuery slideru/carouselu http://t.co/DxWztg5I #jquery #carousel

Leave a Reply

Comments

*