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 Image Flip Using jQuery http://webmuch.com/image-flip-using-jquery/ http://webmuch.com/image-flip-using-jquery/#comments Wed, 17 Jun 2009 00:11:42 +0000 Aayush http://webmuch.com/?p=175 In this week's post we will be creating an illusion effect of an image flip using jQuery of course. This thing can be used as a cool gallery kind of a thing. So, hopefully you guys will like it, let's get to it.]]> Alright, first of all this is not a real image flip but sort of an illusion, the image does not flip itself in 3D since jQuery does not provide us with an image rotation or a distort feature for HTML elements. I know their are some image rotation plug-ins out their but they don’t work out very well with animate method of jQuery.

Preview:

Image Flip Using jQuery Preview Image
Note: Image flip with reflection is for demo purposes only, it’s done using the PHP GD Library and it’s source files are also included in the source code, so meddle with them if you like.

DEMO-1 | DEMO-2

HTML Code:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Flip Illusion Using jQuery</title>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>

<body>
<div id="container">
	<h1>Image Flip Illusion Using jQuery</h1>
    <img id="image1" src="images/image1.jpg" />
    <img id="image2" src="images/image2.jpg" />
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="hflip.js"></script>
</body>
</html>

CSS Code:

body{
	background-color:#000;
}
h1{
	color:#FFFFFF;
	font-family:Arial;
	font-size:24px;
	font-weight:bold;
}
#container{
	width:400px;
	margin:0px auto;
	height:380px;
	margin-top:50px}
#image1{
	position:absolute;
	cursor:pointer;
	width:300px;
	height:190px;
}
#image2{
	display:none;
	position:absolute;
	cursor:pointer;
}

As you can see in the above code, I’ve placed the two images in a division and given them absolute positioning to assign their positions in the division.

To achieve the Horizontal flip we are basically reducing the width of the first image to 0 pixels, increasing the left side margin from zero to half it’s width and as soon as we finish that, Increase the width of the second image from zero to it’s actual width and do the opposite for left side margin what we did for the first image i.e reduce it from half the width of the image to zero.

This process takes place when you click on the first image (#image1) and the same process also takes place when you click on second image (#image2) except for the obvious shuffle in their ids.

Just look at the jQuery code below and you will have a better idea of what’s happening:

jQuery:

$(document).ready(function(){
var margin =$("#image1").width()/2;
var width=$("#image1").width();
var height=$("#image1").height();

$("#image2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'});
$("#reflection2").stop().css({width:'0px',height:''+height+'px',marginLeft:''+margin+'px'});

	$("#image1").click(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#image2").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});

	$("#image2").click(function(){
		$(this).stop().animate({width:'0px',height:''+height+'px',marginLeft:''+margin+'px',opacity:'0.5'},{duration:500});
		window.setTimeout(function() {
		$("#image1").stop().animate({width:''+width+'px',height:''+height+'px',marginLeft:'0px',opacity:'1'},{duration:500});
		},500);
	});

});

If you want to perform a Vertical flip the jQuery code for that too is included in the source code.

Feel free to leave comments if you appreciate the tutorial or if you have any queries. You can also criticize the work but don’t be rude.

You can always find some good tutorials and articles on the Resources page. You can always reach it using the menu up-top.

Thanks for Reading!

Download the Source Code

]]> http://webmuch.com/image-flip-using-jquery/feed/ 52 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