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.



1 thought on “masked slideshow – jquery & wordpress”

Leave a Comment

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

Scroll to Top