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. 


  1. #sidebar_left #dia_frame {
  2.   width: 240px;
  3.   minheight : 240px;
  4.   _height : 240px;
  5.   clear: both;
  6.   zindex: 90;
  7. }
  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. }
  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 = [];
  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";
  10.     var currentSlide = 0;
  12.   jQuery.mynamespace = {};
  13.  jQuery.mynamespace.counter = currentSlide;
  14.  jQuery.mynamespace.imgs= allImgs;
  16.     function imgRotate() {
  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.     }
  25.     setInterval(imgRotate, 2000);
  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

  1. Terrific work! That is the type of info that are supposed to be shared around the internet.
    Shame on Google for no longer positioning this submit upper!
    Come on over and talk over with my web site . Thanks

  2. I feel that is one of the so much significant information for me.

    And i’m satisfied reading your article. But wanna commentary
    on few basic issues, The web site style is perfect, the articles is really
    excellent : D. Excellent activity, cheers

  3. Just desire to say your article is as astonishing. The clarity in your post is simply cool and i
    could suppose you’re a professional in this subject. Well with your permission let me to
    take hold of your feed to stay up to date with approaching post.

    Thanks one million and please continue the enjoyable work.

  4. I’ve been exploring for a little for any high-quality articles or weblog posts in this sort of area .
    Exploring in Yahoo I finally stumbled upon this site.
    Studying this info So i’m happy to show that I’ve an incredibly
    just right uncanny feeling I found out just
    what I needed. I most without a doubt will make sure to
    don?t omit this web site and give it a look on a continuing basis.

  5. Today, I went to the beach front with my kids.
    I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her
    ear and screamed. There was a hermit crab inside and it pinched her ear.
    She never wants to go back! LoL I know this is totally off
    topic but I had to tell someone!

  6. Howdy, There’s no doubt that your web site could
    be having browser compatibility problems.

    Whenever I look at your site in Safari, it looks fine however
    when opening in IE, it’s got some overlapping issues.
    I merely wanted to provide you with a quick heads up!
    Other than that, fantastic website!

  7. Hey there would you mind stating which blog platform you’re using?
    I’m planning to start my own blog soon but I’m having
    a tough time making a decision between BlogEngine/Wordpress/B2evolution and Drupal.
    The reason I ask is because your design seems different then most
    blogs and I’m looking for something completely unique.
    P.S My apologies for getting off-topic but I had to

  8. A person necessarily assist to make significantly articles
    I might state. That is the first time I frequented your website page and to this
    point? I amazed with the research you made to create this particular put up extraordinary.
    Fantastic activity!

  9. I am really loving the theme/design of your site. Do
    you ever run into any internet browser compatibility problems?
    A small number of my blog visitors have complained about my blog not operating correctly in Explorer but looks great in Safari.

    Do you have any advice to help fix this issue?

  10. I don’t comment, but after browsing a few of the comments here masked slideshow
    – jquery & wordpress | juust. I actually do have some questions for you if it’s allright.
    Could it be only me or does it seem like some of these responses appear like they
    are left by brain dead individuals? :-P And,
    if you are writing at additional online social sites, I’d like to keep up
    with anything new you have to post. Would you post a list
    of every one of your social networking pages like your Facebook page, twitter feed,
    or linkedin profile?

Leave a Reply

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