How to Make a Slideshow with a Transparent PNG Frame

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.

A layered slideshow

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:

Layer Breakdown

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.


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.

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.

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.

Posted Thursday, June 25th, 2009 · Back to Top

SPONSOR

Add Comment

36 Comments 38 Mentions

  1. DJ Author Editor

    Very NICE!
    note: the slideshow is not so nice when using IE8

    ·

  2. BeyondRandom Author Editor

    very nice tut!
    now how could I use this on my site?…..hmmmm……..lol
    .-= BeyondRandom´s last blog ..2012 (HD) Movie Trailer =-.

    ·

  3. bob bingenheimer Author Editor

    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!

    ·

  4. bob bingenheimer Author Editor

    sorry, that was the wrong url… I’ve noted the right one above…

    ·

  5. bob bingenheimer Author Editor

    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?

    ·

  6. Phaoloo Author Editor

    Simple and clearly guideline :D
    .-= Phaoloo´s last blog ..FileInspect.com – The Windows Process Library With A Personal Touch =-.

    ·

  7. create own website Author Editor

    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 =-.

    ·

  8. Chris D. Author Editor

    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.

    ·

    • Zach Dunn Author Editor

      @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.

      ·

  9. Chris Author Editor

    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

    ·

  10. Jeevan Author Editor

    PNG is an issue with IE but the extension can be replaced to .gif file with minor code changes.

    ·

  11. Amadex Author Editor

    Hi Zach, could you make available the images source (.PSD’s) so one can change the sizes?!… tks

    ·

  12. Chris Author Editor

    PNG’s can work too, you just need to implement Unit’s PNG fix – http://labs.unitinteractive.com/unitpngfix.php

    ·

  13. Deron Author Editor

    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 :)

    ·

  14. Ahsan Author Editor

    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.

    ·

  15. LA Author Editor

    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.

    ·

  16. Justin Author Editor

    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!

    ·

    • Zach Dunn Author Editor

      @Justin

      That would be Archer

      ·

  17. Justin @ Website SEO Author Editor

    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!

    ·

  18. sidder Author Editor

    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?

    ·

  19. Cláudio Henrique Author Editor

    Hello, I would like to know how do I seem to PNG image, use firefox and not appearing, everything works except the PNG.

    Thanks!

    ·

  20. sean kobuk Author Editor

    For ie6 compatibility check this out.

    http://www.dillerdesign.com/experiment/DD_belatedPNG/

    ·

  21. Pratish Author Editor

    Great tutorial… thanks – sure beats making animated gif files which is what I’ve been doing until now!

    ·

  22. natascha Author Editor

    hi, i think this might be a dumb question, but i’m really new at this web design, and i really want to know more bout jquery, i’ve been trying the things you post, to know more, but i just can’t.

    when i start with the html, and the plug in, and the jquery, do i have to make the design of the index, (for example) and then what? when i put it in the server should i put all of those documents together? please help…

    thnx

    ·

  23. tlmn Author Editor

    Trying to get this working using thesis theme, but am running into problems. If anyone knows the proper way to place the code in the custom functions file, please post it. Thanks!

    ·

  24. Joseph Buarao Author Editor

    thanks for this great tutorial. is this compatible in IE6?

    ·

  25. neil herbert Author Editor

    Could anyone let me know how to make the images link to other websites?

    many thanks.

    ·

  26. Myron Author Editor

    This is very useful post, and i do learn a lot.

    ·

  27. how to make slide show Author Editor

    Make a slide show

    ·

  28. fatih Author Editor

    thank you for this article .. very useful

    ·

  29. Sam Author Editor

    Thanks! I’ll definitely try it out!

    ·

  30. friendzsoft Author Editor

    Nice tutorial.
    Can you give tutorial for content+image based slideshow with jquery?

    Thanks,

    ·

  31. Franz Author Editor

    Hello Zach,

    thanks for that tutorial. I was searching a long time for a tut like this. I’ve only one or two questions which I hope you can answer.
    I want to use three different jpg-files as base and 3 transparent png files. the goal is that a jpg fades in, stays for about 3 secs and after that the the according png-file fades in and both will stay visible for about 5 secs. after this duration the second jpg will fade in while the first jpg + png disappears, stays for 3 seconds and so on…

    hope you can assist in solving this.

    ·

  32. Kasper Author Editor

    I’ve tried to add a link around the img code, but i can’t use the link in pratice.
    - Can someone help me with a solution ??

    The code is:

    The link dosen’t work, /: anyone that have the same problem, or have a solution ??

    ·

  33. Erik Author Editor

    Zach,

    I appreciate the tutorial, worked perfectly. I used it to place a floating logo over top and plan on putting in a menu.

    Question: is there a simple way to force the slideshow to go fullWidth? I wanted to try keeping the edge-holders locked as they are but wanted the slideshow behind to go full width of page.

    Any thoughts would be appreciated.

    ·

  34. saurabh Author Editor

    This is cool. Thank you working beautifully. I was wondering how to include web urls with the slider any ideas? and also i want the slider to be transparent

    ·

 

Build Internet by One Mighty Roar. Since 2008.