Pretty Cycling Images and URLs - Wed, Dec 8, 2010
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)
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.