Weekly freebies in your inbox.

Freebies By Design Shock

Flat GUI: Spectacular set with more than 500 elements, 30 different colors and 100 vectors icons, totally editable files.

Divisors Mega Pack: 150 editable and repeteable vector divisors with sources in PSD

Form Templates: 250 login, register, newsletter, contact and social login templates with sources in PSD

Facebook Covers: 150 professional facebook covers with sources in Photoshop

Wooden texture pack: 300 + tileable wooden textures, several wood styles included.

Hades PSD Gui: Menus, tabs, sliders, buttons, icons, scrollbars, players, widgets, text elements.

Mega Ribbons Pack: 100 different ribbon styles, 30 color variation, with sources in PSD

Shock Handwritten Font: A beautiful, and exclusive free font you can download now

Pricing tables and business icons: 50 designs, 20 colors,112 icons, with PSD sources

More than 50 Full Folder and Brochure Templates with sources files in PSD

Invoice Templates and business templates, 15 free with sources in PSD, Ai and InDesign

MEGA Business Characters: More than 1000 characters, with sources files in AI

3D text effect for Photoshop, 50 3D styles and actions pack for photoshop.

Full iPad Gui pack (Retina display) 5 styles, 150 elements per style, sources files in PSD.

Monster mascots with source files, more than 1 million combinations

The most impressive Button Pack Ever: 2000 buttons, 100 design styles, 5 color variations

Ares GUI set: A full 3D GUI pack, more than a thousand 3D styled interface elements

Huge business pack: 50 business card designs, including PSD sources

Badges Galore: more than 100 badges, 5 different styles, 30 different colors.

FancyTables: Several styles and colors, including PSD, CSS and Bootstrap versions.

‹ ›

Friends

Weekly freebies in your inbox

Amazing jQuery photo slider

Aug 8th/2011

102

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.