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.
Date: May 27, 2009
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.
<!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>
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.
RSS
#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.
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.
Comments currently closed.
When hundreds of web sites are designed up every other day, your website need to have something special to attract your potential customers.
Design magazines have always been a great source of inspiration for designers. It brings latest trends and new ideas into the mind of designers.
JavaScript has blossomed so rightly. Since then, there are jquery, Mootools , Scriptallicious, Prototype etc..which really produces cool effects. In todays time, java script is a must have component.
Invoicera has recently unveiled the release of their new fully blown web application with tons of powerful features to further simplify the management of bills and invoices. The new version is a complete makeover and you may probably even fail to recognize it.
After literally years of speculation, Apple’s tablet is here and it’s called the iPad. iPad runs almost 140,000 apps from the App Store. It’s also a useful tool for designers, illustrators and digital artists looking to get creative on the move.
Again it’s time for photoshop tutorials. The tutorials are good as an inspiration for creative ideas. You have to learn how to combine photos and add special effects to turn a normal photograph into a stunning artwork.
Choosing a CMS for your project depends upon the requirement and complexity of the project.
The iPhone is more than just a phone. It combines three devices in one: a revolutionary phone, a wide screen iPod and a groundbreaking Internet device.
CSS definitely provides you the ease of changing the appearance of your entire website by just modifying a single file. What makes the entire process of changing the CSS files more easy is the use of CSS Editors.BestDesignTuts.com has brought to you 14 such CSS Editors which will cut half of the work load of every designer.
404! Error Pages once used to be seen as the most unwanted page that any visitor would like to see, and therefore the designers did not give the required piece of attention to it.
Comments:
Balaji
May 28, 2009
I’ve been thinking about similar topics lately, and it’s good to see that I’m not alone. What do you think about PHP.JS?
Aayush
May 28, 2009
Well Balaji truthfully I didn’t know about PHP.JS until you just told me and from what I see, it seems amazing. I don’t find myself needing PHP functions on client side much often as I haven’t been involved in a big development project, YET. But I’d still like to try this thing.
Thanks for the information though.
endorphine
July 30, 2009
You should return false on the a.click();
Or you can : href=”javascript:void(0);” on the link.
Aayush
July 30, 2009
I know I should! but it wasn’t required here so I didn’t. Thanks anyway for the feedback..
john
August 20, 2009
it would be a lot more use friendly when on the made page i could click on a link and open it in a new tab / or at least be able to copy the link.
At the moment it is irritating enough that i have bothered to write this !
john
August 20, 2009
made = main / index page btw
Aayush
August 20, 2009
well john, I get what you mean. I will make the demo page open in a new tab automatically, but for the time being, you can use the middle click to open the link in a new tab.
thanks for the suggestion.