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

 

  1. #sidebar_left #dia_frame {
  2.   width: 240px;
  3.   minheight : 240px;
  4.   _height : 240px;
  5.   clear: both;
  6.   zindex: 90;
  7. }
  8.  
  9. #sidebar_left #dia_frame #dia_show {
  10.  width: 240px;
  11.  minheight: 240px;
  12.  _height: 240px;
  13.  position: relative;
  14.  float: right;
  15.         zindex: 91;
  16. }
  17.  
  18. #sidebar_left #dia_frame #dia_overlay {
  19.  width: 240px;
  20.  position : relative;
  21.  background: url(images/mask.png) norepeat;
  22.    minheight : 240px;
  23.   _height : 240px;
  24.  zindex: 92;
  25. }

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 :

  1. jQuery(document).ready(function() {
  2. var allImgs = [];
  3.  
  4.  allImgs[0] = "/images/one.png";
  5.  allImgs[1] = "/images/two.png";
  6.  allImgs[2] = "/images/three.png";
  7.  allImgs[3] = "/images/four.png";
  8.  allImgs[4] = "/images/five.png";
  9.  
  10.     var currentSlide = 0;
  11.  
  12.   jQuery.mynamespace = {};
  13.  jQuery.mynamespace.counter = currentSlide;
  14.  jQuery.mynamespace.imgs= allImgs;
  15.  
  16.     function imgRotate() {
  17.  
  18.         jQuery('#dia_show').css('background', 'url(' + jQuery.mynamespace.imgs[jQuery.mynamespace.counter] +  ') no-repeat right');
  19.   jQuery.mynamespace.counter++;
  20.   if(jQuery.mynamespace.counter > 4) {
  21.    jQuery.mynamespace.counter = 0;
  22.   };
  23.     }
  24.  
  25.     setInterval(imgRotate, 2000);
  26.  
  27. });

 

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.

 

 

Posted in wordpress and tagged , , .

One Comment

Leave a Reply

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