Preview:
View Demo Download Source Code
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).
Index.php:
[html]PHP & jQuery Slideshow
<!– stylesheets begin –>
<!– stylesheets end –></pre>
<div id=”wrap”>
<div id=”slideshow”><a class=”next” href=”#”>
Next
</a></div>
</div>
<pre>
<!– 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. –>
[/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:
[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; }
[/css]
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">// <![CDATA[
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.