I recently tossed up my little cycling badge of things I like (to the left) and in the process I had to do some CSS/jQuery “research”.
I found THIS really helpful guide that nicely explained everything, but it wasn’t precisely what I wanted. I found that in using the code as given there, all the images would grossly load in a stack and images of different sizes would remain visible in the stack as they cycled. I also didn’t really like the idea of the fading animations being tied to the IMG tag, I wanted to use a more generic DIV container instead, after all I like writing code I can easily re-use later.
Read beyond the break for the code..
The Code
So, here’s the code I’ve come up with after fiddling around for a while. (Demo: Pretty Cycling Divs Example)
<!-- ################################################# #### PRE-REQUISES (jQuery library) #################################################Â --> <script type='text/javascript' src='https://dawning.ca/wp-includes/js/jquery/jquery.js?ver=1.4.2'></script><!-- POINT AT jquery --> <!-- ################################################# #### CSS SECTION #################################################Â --> Â <style> #thingsilike { position:relative; height:140px; align:center; } #thingsilike DIV{ position:absolute; top:0; left:0; z-index:8; height: 120px; visibility:hidden; } #thingsilike DIV A IMG { max-height:120px; max-width: 190px; border-style: none; /* frak-off, stupid Web1.0 link boarders from hell */ } #thingsilike DIV.active { z-index:10; visibility:visible; } #thingsilike DIV.last-active { z-index:9; } </style> <!-- ################################################# #### LOCAL JAVASCRIPT / jQuery SECTION #################################################Â --> <script type="text/javascript"> function slideilikeSwitch() { var $active = jQuery('#thingsilike DIV.active'); if ( $active.length == 0 ) $active = jQuery('#thingsilike DIV:last'); var $next = $active.next().length ? $active.next() : jQuery('#thingsilike DIV:first'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1500, function() { //fade next in $active.removeClass('active last-active'); }); $active.animate({opacity: 0.0}, 1500, function() { //fade active out $active.removeClass('active last-active'); }); } jQuery(function() { setInterval( "slideilikeSwitch()", 4000 ); });Â Â Â Â Â // x000 miliseconds == x seconds </script> <!-- ################################################# #### HTML SECTION - Put your DIVs in here.. #################################################Â --> <div align="center" style="float:center;" id="thingsilike"><!-- thingsilike div --> <!-- Donate to Wikipedia --> <DIV> <a href="http://wikimediafoundation.org/wiki/Support_Wikipedia/en"><img border="0" alt="Support Wikipedia" src="http://upload.wikimedia.org/wikipedia/commons/4/4b/Fundraising_2009-square-treasure-en.png" /></a> </DIV> <!-- Use Firefox --> <DIV> <a href='http://www.mozilla.com?from=sfx&uid=0&t=561'><img src='http://sfx-images.mozilla.org/firefox/3.6/125x125.png' alt='Spread Firefox Affiliate Button' border='0' /></a> </DIV> <!-- Use Ubuntu --> <DIV> <a href="http://www.ubuntu.com"><img src="http://wiki.ubuntu.com/WebsiteButtons?action=AttachFile&do=get&target=ubuntu_button_alt_180x59.png" alt="Ubuntu" /></a> </DIV> <!-- Use GIMP --> <DIV> <a href="http://www.gimp.org/"><img src="http://s3.amazonaws.com/static-dawning-ca/GIMP_Logo.png" alt="GNU Image Manipulation Program"/></a> </DIV> <!-- Use WordPress --> <DIV> <a href="http://wordpress.org"><img src="/pics/wordpress.jpg" alt="Wordpress" /></a> </DIV> <!-- Use Apache --> <DIV> <a href="http://httpd.apache.org/"><img src="/pics/apache-vi.jpg" alt="Apache Web Server" /></a> </DIV> </div><!-- / thingsilike div -->
Suffice to say I think that’s delicious and I expect to use that in a ton of places in to the future. I also opted to change the CSS ID name used for the whole thing as the one buddy picked on that example seemed so generic that a WordPress plugin or some other code could come in to conflict, if only in the future. So I picked something a little more specific to my particular use case.