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. 

 

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

 

 

Posted in wordpress and tagged , , .

One Comment

Leave a Reply

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