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');
		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.



2 thoughts on “masked slideshow – jquery & wordpress”

  1. I wanted to thank you once again for your amazing web-site you have created here.
    It really is full of ideas for those who are
    definitely interested in that subject, especially this very post.
    You’re really all so sweet and thoughtful of others plus reading
    your website posts is a wonderful delight with me.
    And exactly what a generous surprise! Mary and I will have excitement making
    use of your ideas in what we should instead do in a few weeks.

    Our checklist is a kilometer long which means that your tips
    will definitely be put to good use.

Leave a Comment

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

Scroll to Top