How to Make a Slideshow with a Transparent PNG Frame
Today’s tutorial is headed back to the basics.
We’re focusing on a common question for those inexperienced to working with layered PNG’s in web layouts. The end result probably won’t do much new to excite veterans, but it will hopefully save you a headache in the long run — especially if you’re new to the idea.
Side Note: The slideshow today was inspired after building one for the new One Mighty Roar site, which will be up in a matter of days. In the mean time you can consider this a “teaser” of sorts.
The Goal
By the end of this tutorial we’ll have created a basic slideshow that uses a combination of PNG transparency and layered positioning to create the effect of each slides being held in by the bottom corners.
Download Project Files
If you’re following along step by step, this project will make use of several custom images and the jQuery Cycle plugin for slide shows. You’ll need to download both to keep up.
If you’re more interested in getting a copy of the results, you can just download the completed project files using the link above.
Why not a GIF?
I’m not suggesting that the PNG is a complete replacement for the GIF. That being said, there is a difference that makes the PNG format better to use in most transparency cases. The PNG format can display a varying level of transparency (e.g. 50%) while the GIF can only display transparency as “on” or “off”. As a result it’s often better to work with PNG, especially when semi-transparent elements like fading gradients and shadows are involved.
The Stack Up
Here’s a look at how this slideshow comes together:
As you can see it’s made of three different layers, but only the PNG will require some extra work. Layers two and three will be made up of an unordered list where each item contains an image. Also, don’t be concerned about the “raggedness” of the PNG layer image — it won’t matter when everything is placed.
The HTML
Start by making a new HTML document. After loading in the jQuery assets and pointing to the stylesheet, we’ll need to build the slideshow structure. I’ve done it here with an unordered list named “slideshow” that has been nested inside the “billboard” div, which will house the backdrop image for the show.
Below that is a div called “edge-holders” which we will use to display our PNG image containing the corners. Don’t worry about its positioning yet; we’ll be fixing it in the CSS.
<!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"/> <title>Slideshow with PNG Frame Layer</title> <link rel="stylesheet" href="png-slideshow.css"/> <!--Load in jQuery Assets--> <script src="http://code.jquery.com/jquery-latest.js"></script> <script src="js/jquery.cycle.all.min.js"></script> </head> <body> <div id="top-zone"> <div id="billboard"><!--Container for slideshow elements--> <ul class="slideshow"> <li><img src="images/slide-one.jpg" alt="Baffling, isn't it?"/></li> <li><img src="images/slide-two.jpg" alt="What's the metric system?"/></li> </ul> </div> <div class="edge-holders"><!--Overlay onto slideshow--></div> </div><!--End of Top Zone--> </body> </html>
The CSS
There are a couple notable things going on in this CSS. Once you’ve copied the code below into your project files, meet down below for further explanation.
*{margin:0; padding:0; border:0;}
body{background:#FAFAFA;}
/* Slideshow & Billboard Images */
#top-zone{overflow:hidden; width:960px; margin:0 auto; height:420px;} /*Here to keep images hidden in IE mostly*/
#billboard{width:940px; height:400px; margin:10px 10px 20px 10px; overflow:hidden; background:url('images/billboard-bg.jpg') no-repeat top center;}
.slideshow{width:920px; height:360px; margin:10px; overflow:hidden;}
.slideshow li{list-style:none; float:left; display:inline; position:relative;}
.edge-holders{width:940px; height:400px; background:url('images/edge-holders.png') no-repeat top center; position:relative; margin:10px; z-index:10; top:-420px;}Adding a position of “relative” to key slideshow elements allows us to position it freely without having to mess with margins and padding.
Remember how the edge-holders div was below the slideshow area before? With a combination of z-index (to keep it on the top layer) and positioning, we’ve now placed it directly on top of the whole thing.
By now you can see a much more layered effect going on without having to save awkwardly shaped slides. Notice that only the slides themselves are being loaded in through actual image tags. Since the slideshow structure images are design helpers, it makes more sense to simply include them as background images instead.
You’d probably be fine removing some of the “overflow:hidden” styles placed on these elements. I only have them in place to ensure that it plays well with more complicated layouts, but it still may be excessive.
The jQuery
Since the focus of this tutorial is not on the jQuery side of things, we’ll be keeping it simple. The code below simply takes the contents of our “slideshow” class unordered list and makes a slideshow out of each item using a sliding transition. It can be pasted into the head tag of your HTML page, or added into an external javascript file.
<script type="text/javascript">
$(document).ready(function(){
$('.slideshow').cycle({
fx: 'scrollLeft',
speed: 1000,
timeout: 7000
});
});
</script>Internet Explorer and Overflow Hidden
Internet Explorer does many things well. CSS is not one of them. In order to get the overflow hidden working correctly with images in Internet Explorer, you must make sure that the element has a defined height. In the case of this slideshow the “top-zone” div tag is responsible for this fix.
A Word on Backwards Compatibility
It seems that whenever PNG format is brought into the equation, a concern about compatibility inevitably comes up. Let’s be clear: the PNG format works with all popular modern browsers. When you hear about “PNG fixes”, they are typically referring to methods that allow old browsers to display the transparency correctly. Most commonly this includes Internet Explorer 6, which is at a <15% usage and plummeting.
Because of this, I won’t be covering how to fix these problems for older browsers. A simple Google search should offer plenty of help if this applies to you.
Discussion
June 26th, 2009 at 6:07 AM
Very NICE!
note: the slideshow is not so nice when using IE8
June 26th, 2009 at 2:38 PM
very nice tut!
now how could I use this on my site?…..hmmmm……..lol
.-= BeyondRandom´s last blog ..2012 (HD) Movie Trailer =-.
June 26th, 2009 at 9:46 PM
This is very nifty, and I’ve been able to implement it to a certain extent, and then, since I’m not a programmer, I’m at a loss… if you go to the link I put in website you’ll see where I’m at… but how can I make it stop on each slide and then go to the next slide on an image click? And how can I put a link on each slide to the website featured? Thanking you in advance… it’s a steep learning curve, this js stuff!
June 26th, 2009 at 9:51 PM
sorry, that was the wrong url… I’ve noted the right one above…
June 26th, 2009 at 10:30 PM
I hope you enjoy this conversation… you don’t have to do anything; I just keep going…
I have now figured out how to add links to the slides… and I really don’t need to stop the slideshow until after the last slide… in other words, just play once… where do I set that?
June 26th, 2009 at 11:27 PM
Simple and clearly guideline :D
.-= Phaoloo´s last blog ..FileInspect.com – The Windows Process Library With A Personal Touch =-.
June 28th, 2009 at 11:29 AM
i recently saw this scripts in many websites and i always ask my self how their web designers make them . today i know how thx a lot Zach Dunn
.-= create own website´s last blog ..Monetize your Website =-.
June 28th, 2009 at 6:21 PM
Everyone should note that those browser statistics from w3schools are not accurate at all. They lean towards the web development users, not general users. Most general users will buy a pc with Windows and not ever install another browser.
June 28th, 2009 at 6:51 PM
@Bob
That’s the sort of question I would take on over to the plugin page itself, as it falls outside of the confines of this tutorial. The documentation and community for jQuery Cycle is wonderful though, so you should be able to find yourself an answer.
@ Chris D
Thanks for bringing that up! For your individual projects, I wouldn’t live or die by the results posted on W3Schools alone.
It is often a good starting point, but ultimately it will be up to the statistics of your site. This site receives a very low percentage of IE6 users, but again that could be because the average reader is so attuned to current web technologies.
In short, even though Internet Explorer 6 is on its last legs but you can’t always count on all sites have such low usage. Hopefully as IE8 gets spread out it will fade into a very forgotten past.
June 28th, 2009 at 10:48 PM
Nice tutorial i really learned a lot my only question is how would you go about making the container 965px and making the image like maybe 200 or smaller , Without causing over flow issues. Because once i change the size the whole thing is bugged.
Thanks alot
C
June 30th, 2009 at 2:59 PM
PNG is an issue with IE but the extension can be replaced to .gif file with minor code changes.
August 9th, 2009 at 2:15 PM
Hi Zach, could you make available the images source (.PSD’s) so one can change the sizes?!… tks
August 13th, 2009 at 10:38 AM
PNG’s can work too, you just need to implement Unit’s PNG fix – http://labs.unitinteractive.com/unitpngfix.php
October 24th, 2009 at 6:35 PM
THANK you for this article Zach.
I spent the last couple hours (more) trying to figure out why my png would not overlay on top of a picture I had. I looked at your code and saw you used a negative margin to get it up there. Solved my problem, a smack the forehead moment :)
December 17th, 2009 at 4:01 PM
I would like to say one thing, you should add workarounds for IE6 browser.
I would greatly appreciate that. My site i am developing works well in all other browsers but IE6.
January 7th, 2010 at 11:26 AM
I added absolute positioning to the slideshow li selector (instead of relative) and that seemed to solve my problem in ie7 with all of the slides briefly appearing on load.
April 27th, 2010 at 4:07 PM
Out of curiosity, what font are you using in the images – for the titles and the subtitles?
Thanks for this tutorial; I’m just getting a handle on jquery and keeping it simple so that the focus can be on the overlaying of an image over the slider made this much easier!
April 27th, 2010 at 4:58 PM
@Justin
That would be Archer
April 27th, 2010 at 10:29 PM
Mr. Zach, thanks so much! I was running around the web and the closest that I could find was Alexandria, but when I started playing with it in Photoshop… ehh… nowhere near. You guys have done a great job of putting together the most useful, concise, easy to understand posts on the net. Its a breath of fresh air to not have to sift through hundreds of useless junk to find the few gems. Thanks for the rapid response too!
June 14th, 2010 at 2:16 PM
Cool I have now figured out how to add links to the slides… and I really don’t need to stop the slideshow until after the last slide… in other words, just play once… where do I set that?
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.