WebMuch » PHP http://webmuch.com Everything about the web Tue, 16 Feb 2010 10:05:17 +0000 en hourly 1 http://wordpress.org/?v=3.0 Simple jQuery Slideshow with PHP Image Stripe http://webmuch.com/simple-jquery-slideshow-with-php-image-stripe/ http://webmuch.com/simple-jquery-slideshow-with-php-image-stripe/#comments Wed, 27 May 2009 09:16:40 +0000 Aayush http://webmuch.com/?p=97 In this tutorial we will be making a simple jQuery Slideshow with the output image stripe from the last tutorial on PHP GD Library Image Stripe, Thereby making use of it in a real world application.]]> Preview:

Simple jQuery Slideshow with PHP Image Stripe Preview Image

DEMO!


I created the last post on creating an image stripe using PHP GD Library because a friend of mine needed to join some images for his web project and used that technique which I found very interesting, but apart from his use of it, I couldn’t find many real world situations where that technique could be used, but it’s not that I didn’t find any. Therefore this post is dedicated to use that technique in a real world application. So today I will create a slideshow using the output of my last post (Image Stripe using PHP GD Library).

Download the source code of my previous post. In the source code, we only need to change the index.php file and the master.css file as we have nothing to do with the image creation using PHP but only the way we present it to the users.

Index.php:

<!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">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>PHP & jQuery Slideshow</title>
<!-- stylesheets begin -->

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/master.css" />

<!-- stylesheets end -->
</head>

<body>
<div id="wrap">
	<div id="slideshow">
		<a href="#" class="next">
			Next
		</a>
	</div>
</div><!-- end container -->

<!--
There is no link to the image file in the markup
as the link to the image is in the css file as a
background-image of the div#slideshow element.
-->

</body>
</html>

Explanation:

In the above code, the markup is fairly simple to understand. We link to the stylesheets and create a wrapper element (div#wrap) inside which we create a slideshow division which contains an anchor tag, simple enough. Please read the CSS code below for the master stylesheet.

Master.css:

#wrap{
/* a simple enough wrapper */
	width:958px;
	border:1px solid #3b5998;
	border-top:none;
	margin:0 auto;
	background:#b7c4df;
	padding:20px 0;
	overflow:hidden;
}
#slideshow{
	width:600px;
	/* width is the size of at least two visible images in the merged image */
	height:225px;
	background:#ffffff url('../createImage.php') repeat-x;
	/* We link to the createImage.php file itself as the file itself returns the merged image */
	border:1px solid #000;
	margin:30px auto;
	overflow:hidden;
}
a.next{
	float:left;
	width:300px;
	/* To cover the first image out of the two visible */
	height:225px;
	line-height:225px; /*For vertical middle alignment*/
	text-align:center;
	text-decoration:none;
	background:#ffffff;
	font-family:Garamond, Hoefler Text, Palatino, Palatino Linotype, serif;
	font-size:30px;
	font-weight:bold;

	/* Cross Browser Transparency */
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	/* Cross Browser Transparency */
}
#slideshow a{ color:#000; }

Now, Getting back into the making of the slideshow, let’s analyze a little. According to the last tutorial we joined six images with a width of 300 pixels each and a height of 225 pixels each, here according to the CSS above, we are showing the joined image as a repeating background image of an element having a width of 600 pixels hence, showing two of the six images in our stripe. Then we have an anchor tag over the first image of the six with 50% transparency, so it is translucently visible below the anchor.

Moving on, what we want to do here is that we want to animate the background-image to slide leftwards by 300 pixels each time a user clicks on the anchor (which has a class “next” assigned to it) and as the image is repeated on the x-axis there is no end to reach for.

jQuery code for explanation:

Place the following JavaScript code right after closing the body tag in the index.php file.

<script type="text/javascript" language="JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" language="JavaScript">
var count = 1;
$(function(){
	$('#slideshow').css({backgroundPosition: '0px 0px'});
	$('a.next').click(function(){
		var x_position = count*-300;
		//console.log(x_position);
		$('#slideshow').animate({backgroundPosition: ''+x_position+'px 0px'});
		count++;
	});
});
</script>
<!-- scripts end -->

In the above code, we started a count from 1 as we will need to increase the value of background position with each click. But first we set the background position of the division with the id of “slideshow” to zeros. This is a good thing to do as we live in a world where Internet Explorer still survives. Then when the anchor (a.next) is clicked we initiate a function where we catch the count multiplied by 300 in a variable (x_position) and a minus sign for animating leftwards and then we animate the background-position with that value. Finally we increase the count by 1 for the next click, therefore, the first time we click the value of x_position is -300, the second time we click, it is -600 and so on.

Note: make sure to comment out or remove the console.log statement as it creates problems in all the browsers except Firefox.

Thanks for reading.

Download the Source Code

]]> http://webmuch.com/simple-jquery-slideshow-with-php-image-stripe/feed/ 7 Image Stripe Using PHP GD Library http://webmuch.com/image-stripe-using-php-gd-library/ http://webmuch.com/image-stripe-using-php-gd-library/#comments Sat, 09 May 2009 17:01:50 +0000 Aayush http://webmuch.com/?p=73 In this tutorial we will create an image stripe using PHP's file handling capabilities and GD Library. It will read any number of images from a specified folder and join them all to create a single server side generated image stripe. This will provide the basics of File Handling and GD Graphics Library.]]> Preview:

Image Stripe Using PHP GD Library
What we are going to do today is quite simple. We will read a specific directory for all available images in it and merge them into a single image. Sounds simple, well it is.

What We Need:

  • Create a project main folder and create two more folders in it, name them: “css” and “slides” respectively.
  • In the project main folder create two files, name them: “index.php” and “createImage.php” respectively.
  • In the slides folder put in some jpeg images with same width and height. In my case I used 300px width and 225px height.

index.php:

<!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">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>PHP GD Library Image Stripe</title>
<!-- stylesheets begin -->

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/master.css" />

<!-- stylesheets end -->
</head>

<body>

<div id="wrap">
	<h2>PHP Image Stripe</h2>
	<div id="slideshow">
		<img src="createImage.php" title="Image Stripe" alt="Image Stripe" />
	</div>
</div><!-- end wrap -->

</body>
</html>

In the above code the only new thing to you should be the source(src attribute) of the image tag, which is the link of our “createImage.php” file, this is because the file itself when executed outputs an image file. Hope that makes sense, it sure will after you read the excessively documented code of “createImage.php” below.

createImage.php:

<?php
$dirPath = 'slides/'; // The path of the directory
$count = 0; // For counting the number of images in the directory

// To check if this is a valid directory
if (is_dir($dirPath)) {
	// Open the directory and make a directory handler called $db
	if ($dh = opendir($dirPath)) {

		// Report all errors except E_WARNING (warnings)
		error_reporting(E_ALL ^ E_WARNING);

		/*
		 *	We have closed the warnings here as there should be no text
		 *	on a page which should be returning as an image otherwise the
		 *	image will not be produced, instead the name of the file will
		 *	be printed.
		 *
		 *	As we are going to use the getimagesize() method to determine
		 *	whether the passed file is an image or not, the method returns
		 *	false when a non image file is passed as a parameter but also
		 *	produces a warning about the same concern, which is why we have
		 *	to disable the warnings in runtime.
		 */

		/*	We start a while loop which runs until the readdir method returns false
		 *	as there are no more files in the directory.
		 *
		 *	each time the loop runs, it enters the next files name in the
		 *	$src variable.
		 */

	while (($filename = readdir($dh)) !== false) {

		/*	getimagesize() method returns false if the file is not an image file.
		 *	Therefore, we check for it to be true as we have passed the file source
		 *	in it, which we created simply by concatinating the $dirPath before
		 *	the $filename.
		 */

		if(getimagesize($dirPath.$filename))
		{

		/*
		 *	We are taking all the "only-image" file names in an array called $imgSrc.
		 *
		 *	$count keeps increasing by 1 if the file is an image and therefore,
		 *	gives us the number of images in the folder. We can get the number
		 *	of images by getting the length of the array as-well and there maybe
		 *	many more methods. But I like it done this way. It is purely a matter
		 *	of choice.
		 */
			$imgSrc[$count] = $dirPath.$filename;
			$count++;
		}
	}

	/*
	 *	As we are creating a horizontal stripe of images we are only
	 *	concerned with the width. First we need to create an Image
	 *	with the dimentions of our final image, therefore we found the
	 *	only the width of our final image because in our case we have
	 *	a static height of our final image.
	 *
	 *	In my case each image in my slides directory has a width of 300px
	 *	and a height of 225px. Therefore, width for a horizontal stripe of
	 *	all images merged will be the number of images multiplied by 300.
	 *
	 *	Which is exactly what I've taken in a variable called $width.
	 *
	 *	Now, for creating an image we have used the imagecreatetruecolor
	 *	method and the resource handler is stored in the variable
	 *	$outputImage.
	 *
	 *	Note: Remember, the height and width of the JPEG's in the slide folder
	 *	must be the same.
	 */

	$width = 300 * $count;
	$outputImage = imagecreatetruecolor($width, 225);

	/*
	 *	We run a loop with the number of images as the limit,
	 *	in which we  create a resource handler for each image
	 *	in the slides folder and then merge it into the Main
	 *	Image i.e. $outputImage.
	 *
	 *	If the loop runs for the first time the "x-coordinate of destination point"
	 *	is static and hard coded as 300 and then for each increament we multiply 300
	 *	by the loop count, this merges the images one after another horizontally
	 *
	 */

		for($i=0; $i<$count; $i++)
		{
			$temp = imagecreatefromjpeg($imgSrc[$i]);
			if($i==0)
				imagecopymerge($outputImage, $temp, 0, 0, 0, 0, 300, 225, 100);
			else
				imagecopymerge($outputImage, $temp, $i*300, 0, 0, 0, 300, 225, 100);

			/*
			 *	Syntax Explaination
			 *
				imagecopymerge(
						Destination image link resource,
						Source image link resource,
						x-coordinate of destination point,
						y-coordinate of destination point,
						x-coordinate of source point,
						y-coordinate of source point,
						Source width,
						Source height,
						alpha transparency
				)
			*/

		}
	}
}

// For displaying the image as the output.

header('Content-type: image/jpeg');
imagejpeg($outputImage);

// Destroying the resourse handler.
imagedestroy($outputImage);

/*
 *	Reporting all errors. Switching it back on,
 *	as the image has already been produced and displayed.
 */
error_reporting(E_ALL);
?>

Note: Remember, the height and width of the JPEG’s in the slides folder must be the same.
Note: imagecreatetruecolor() method does not support GIF images.

Links:

Thanks for reading!

Download the Source Code

]]> http://webmuch.com/image-stripe-using-php-gd-library/feed/ 0