Pretty Cycling Images and URLs

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='http://www.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&amp;uid=0&amp;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.