Submit your widget
HomeSlideshow & ScrollerjQuery Slideshow with a Transparent PNG Frame

jQuery Slideshow with a Transparent PNG Frame

Created 14 years ago   Views 18677   downloads 2831    Author Zach Dunn
jQuery Slideshow with a Transparent PNG Frame
View DemoDownload
100
Share |

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.

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.

You might also like