masked slideshow – jquery & wordpress

I agreed to make a wordpress template for a friends’ site. As extra feature they wanted a slide show in the sidebar with a half transparent mask.

I trolloped around the net a little and this seems the most basic sidebar slideshow :


I make a new 240×240 image in photoshop and use a radial gradient from transparent to white, making the center of the picture transparent, and export it as ‘mask.png’, 24bit.

In my sidebar_left.php I make three divs, one is the container dia_frame,

the other two are the overlay and the slideshow div.

<div id="dia_frame">
      <div id="dia_show"></div>
       <div id="dia_overlay"></div>

I give he frame the z-order 90, the mask the z-order 92, the slideshow is z-order 91. That makes sure the overlay is rendered on top of the slideshow.

Both the overlay and show div are relative positioned. 


  #sidebar_left #dia_frame {  width: 240px;  min-height : 240px;  _height : 240px;  clear: both;  z-index: 90;  }  #sidebar_left #dia_frame #dia_show {  width: 240px;  min-height: 240px;  _height: 240px;  position: relative;  float: right;  z-index: 91;  }  #sidebar_left #dia_frame #dia_overlay {  width: 240px;  position : relative;  background: url(images/mask.png) no-repeat;   min-height : 240px;  _height : 240px;  z-index: 92;  }  

That sets up the xhtml and css frame in the side bar. Then I go make the slideshow. I grab some graphics of flowers and store them in the themes images folder.

With jQuery in header.php I make an array containing the image urls, and with a timer, cycle the slideshow background graphics :

  jQuery(document).ready(function() {  var allImgs = [];  allImgs[0] = "/images/one.png";  allImgs[1] = "/images/two.png";  allImgs[2] = "/images/three.png";  allImgs[3] = "/images/four.png";  allImgs[4] = "/images/five.png";  var currentSlide = 0;  jQuery.mynamespace = {};  jQuery.mynamespace.counter = currentSlide;  jQuery.mynamespace.imgs= allImgs;   function imgRotate() {  jQuery('#dia_show').css('background', 'url(' + jQuery.mynamespace.imgs[jQuery.mynamespace.counter] +  ') no-repeat right');  jQuery.mynamespace.counter++;  if(jQuery.mynamespace.counter > 4) {   jQuery.mynamespace.counter = 0;  };  }  setInterval(imgRotate, 2000);  });  


That’s the basic setup

IE5 and IE6 dont support PNG transparency, so for these there are a number of workarounds. supersleight by drew mclellan is reprogrammed to work with jQuery, for wordpress that seems the best option.



1 thought on “masked slideshow – jquery & wordpress”

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top