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

  1. Fantastic goods from you, man. I’ve consider your stuff prior
    to and you are simply extremely excellent. I actually like
    what you have obtained right here, really like what you are stating
    and the way in which wherein you are saying it.
    You’re making it entertaining and you continue to care for to
    stay it sensible. I can not wait to learn much more
    from you. This is actually a tremendous website.

  2. You couuld certainly seee your skills in the article
    you write. The world hopes for even more passionate
    writers like youu who are not afraid to say how they believe.

    Always go after your heart.

  3. Hi my friend! I wish to say that this article is amazing,
    nice written and come with almost all important infos.
    I would like to peer extra posts like this .

  4. My partner and I stumbled over here from a different page and thought I may as well check
    things out. I like what I see so now i am following you.
    Look forward to looking over your web page for a second time.

  5. This design is wicked! You most certainly know how to keep a reader amused.
    Between your wit and your videos, I was almost moved
    to start my own blog (well, almost…HaHa!) Great job.
    I really enjoyed what you had to say, and more than that, how you presented it.
    Too cool!

  6. Hey there! I could have sworn I’ve been to this blog before but after reading through some of the post I realized
    it’s new to me. Nonetheless, I’m definitely
    happy I found it and I’ll be book-marking and checking back frequently!

  7. Pretty section of content. I just stumbled upon your web site
    and in accession capital to assert that I acquire actually enjoyed
    account your blog posts. Anyway I will be subscribing to
    your feeds and even I achievement you access consistently fast.

  8. Awesome blog you have here but I was wondering if you knew of
    any discussion boards that cover the same topics talked about here?
    I’d really love to be a part of community where I can get opinions from other knowledgeable individuals
    that share the same interest. If you have any suggestions, please let me know.

    Bless you!

  9. Having read this I believed it was very informative. I appreciate you taking the time and
    energy to put this information together. I once again find myself personally spending way
    too much time both reading and leaving comments.
    But so what, it was still worth it!

  10. This is the right web site for anybody who
    hopes to find out about this topic. You know so
    much its almost tough to argue with you (not that I actually would want to…HaHa).
    You definitely put a brand new spin on a topic which has been written about for years.
    Great stuff, just great!

  11. Thanks for the auspicious writeup. It in reality was a enjoyment account it.
    Glance complex to more added agreeable from you! By the way, how could we keep up
    a correspondence?

  12. Excellent article. Keep writing such kind of information on your site.
    Im really impressed by your blog.
    Hello there, You’ve done a great job. I’ll definitely digg it and in my
    view recommend to my friends. I am sure they will be benefited from
    this site.

  13. Hello There. I discovered your weblog using msn. This is an extremely smartly written article.
    I’ll be sure to bookmark it and come back to read extra of your useful info.
    Thank you for the post. I will definitely return.

  14. Great article! That is the kind of info that are meant to be
    shared across the web. Disgrace on the search engines for no longer positioning this submit
    higher! Come on over and discuss with my website .
    Thanks =)

  15. Excellent pieces. Keep writing such kind of information on your page.
    Im really impressed by your blog.
    Hey there, You have done a great job. I will definitely digg it and individually suggest to my
    friends. I’m sure they’ll be benefited from this website.

  16. It’s a pity you don’t have a donate button! I’d certainly donate to this excellent blog!

    I guess for now i’ll settle for book-marking and adding your RSS
    feed to my Google account. I look forward to fresh updates and will
    talk about this site with my Facebook group. Chat soon!

  17. I’ve been surfing online greater than 3 hours nowadays, but I never found any fascinating article like yours.

    It’s pretty price sufficient for me. In my view, if all webmasters and bloggers made good content as you
    probably did, the internet can be a lot more helpful than ever before.

  18. Have you ever considered about adding a little bit more than just your articles?
    I mean, what you say is fundamental and everything.
    However just imagine if you added some great photos or video clips to give your posts more, “pop”!
    Your content is excellent but with images and clips, this site could definitely be one of the most
    beneficial in its field. Awesome blog!

  19. Wonderful website you have here but I was wanting to know if you knew of any forums that cover the same
    topics talked about here? I’d really love to be a part of group where
    I can get opinions from other experienced individuals
    that share the same interest. If you have any recommendations,
    please let me know. Appreciate it!

  20. Hello! I know this is kinda off topic but I was wondering which blog platform are you using for this website?
    I’m getting tired of WordPress because I’ve had problems with hackers and I’m looking at
    alternatives for another platform. I would be awesome if you could point me in the direction of a good platform.

  21. Yesterday, while I was at work, my cousin stole my apple ipad and tested to see if it can survive a 25
    foot drop, just so she can be a youtube sensation. My iPad is now broken and she has 83 views.
    I know this is totally off topic but I had to share it with someone!

  22. I really like your blog.. very nice colors & theme.
    Did you design this website yourself or did you hire someone to do it for you?
    Plz reply as I’m looking to construct my own blog and would like
    to find out where u got this from. thanks a lot

  23. Write more, thats all I have to say. Literally, it seems as though you relied on the video
    to make your point. You obviously know what youre talking about,
    why waste your intelligence on just posting videos to your weblog when you could be
    giving us something informative to read?

  24. Hello I am so happy I found your web site, I really found you by accident, while I was searching on Digg for something else, Anyhow I am here now and would just like to say thanks for a fantastic
    post and a all round thrilling blog (I also love the theme/design),
    I don’t have time to go through it all at the minute but I have book-marked it and also added your RSS feeds, so when I have time I will be back to read much more, Please do keep up the awesome work.

  25. I think that is among the so much significant information for me.
    And i am happy studying your article. But wanna remark on some basic things, The web site style
    is perfect, the articles is really great : D.
    Just right process, cheers

  26. Magnificent goods from you, man. I’ve understand your stuff previous to and you are just too magnificent.
    I actually like what you have acquired here,
    certainly like what you are saying and the
    way in which you say it. You make it entertaining and you still care for to keep it wise.
    I can’t wait to read far more from you. This is really
    a wonderful site.

  27. hello!,I love your writing very so much! percentage we keep up a correspondence
    more about your article on AOL? I require an expert in this house to unravel my problem.
    May be that’s you! Taking a look forward to look you.

  28. My brother recommended I might like this web site. He was entirely right.
    This post actually made my day. You can not imagine just
    how much time I had spent for this info! Thanks!

  29. This is the right website for everyone who wishes to understand this
    topic. You understand a whole lot its almost tough to argue with you (not that I really would want to…HaHa).

    You definitely put a new spin on a subject which has been written about for many years.
    Wonderful stuff, just excellent!

  30. hey there and thank you for your info – I have certainly picked up
    something new from right here. I did however expertise several technical issues using this website, since
    I experienced to reload the web site many times previous to I could get it to load properly.
    I had been wondering if your hosting is OK? Not that I am complaining, but slow loading instances
    times will very frequently affect your placement in google and can damage your quality score if advertising and
    marketing with Adwords. Anyway I am adding this RSS to my email and can look out for a lot more of your respective exciting content.
    Make sure you update this again soon.

Leave a Reply

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