Question

I’m not exactly sure how to tackle this one. I’ve checked out the jQuery “Cycle” plugin, but haven’t seen any exmaples of what I really need.

How would you achieve fading in a list of thumbnails from the HTML (maybe something like:

<ul id="container">
    <li class="thumbnail"> <a href="www.link1.com"> <img src="1.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link2.com"> <img src="2.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link3.com"> <img src="3.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link4.com"> <img src="4.jpg"/></a> </li>
    <li class="thumbnail"> <a href="www.link5.com"> <img src="5.jpg"/></a> </li>
     ...more
</ul>

I’ve created a sample .GIF to explain what i’m trying to do:

-There are a total of 4 boxes showing at all times

-Jquery will pull the next image on the list, and fade it into one of the 4 boxes (random box every time). (image will fade in over the last image in the box).

-This should only happen if there are more than 4 images inside the list. (stay static if we only have 4)

-Would like to have the ability to add more images via HTML, not inside the JS…

—-UPDATE——
Kalle seems to have the correct solution, the only thing missing is the ability to control how many visible thumbnails you see at all times.

Answer 1

I worked 5 (+ 2, ver 1.1) hours on your question. The biggest problem was the switch between two elements. It turns out, that there isn’t any “swapping” function.. So I made an alternative.. You cant make this fading transition any better, but it is fairly close your GIF. If you want just to swap them nice and dirty, without any fade.. then that’s very easy to make.

Anyways, I composed into a plugin:

JoeShuffle v1.1

A simple jQuery plugin to shuffle list. Very easy to install and use. Works like any other jQuery plugin. Just add jQuery to your page, include the script with necessary css file. Then, call it to some list and voila! You can change the interval-speed like this: $('#JoeShuffle').JoeShuffle({intervalSpeed: 2000});

As of Ver 1.1 also randomizes the list on the first load and enables to have this script hooked to multiple lists. Also you can set the max. number of displayed elements:
$('#JoeShuffle').JoeShuffle({displayElements: 4});.

^{JoeShuffle v1.1 [ Download (33.54 KB) – View demo (jsfiddle) ]
JoeShuffle v1.0 [ Download (65.12 KB) – View demo (jsfiddle) ]}

NOTES

I’m not sure how crossbrowser it is and also it is very dirty and raw plugin. Surely could use some optimization, however it does work.
My examples use colorful boxes, but it really doesn’t matter if there are images or whatever in the li element.

Some features:

• Remembers the last slot/position, where the swap was made, and wont use it again. Otherwise it will look kinda a weird
• You can set your own custom interval-speed
• Shuffles whatever you put between the list tags. However, you should keep all of them in one size
• (v1.1) Randomizes all the elements in the ul list on the first load.
• (v1.1) Allows you to set the max. number of elements displayed at once
• (v1.1) Enables you to have this script hooked to multiple lists at once

Currently it works like this. Whatever you put inside the li elements, it will shuffle them. If you have 5 elements, then it will hide one. And then basically take the hidden element and swap it with some random element. However, I will revisit it in ~15 hours and add the option, that you can set how many are being displayed. So you can actually have 10 elements in the list, but you will only display 4 at the time, there for making the randomization more dynamic.

Rev 1 notes

Since you wanted to randomize them on the first load. Then I added the rand() plugin to this script. This way it makes the first hide() loop very neat and also works as randomizer on the full list..even thought it actually doesn’t randomize the list separately..meaning its faster. As I mentioned in the comments inside the scrip, rand() plugin by Alexander Wallin, is a must have in your jQuery collection.

As you can see, you can hook it to multiple lists from now on. That and also adding more elements to the list came up a new problem. That the script was loading slow and all the elements would be shown for few ms, on the first load. I fixed the problem, by adding the scripts includes inside the <head> and not after the contents of the page. This way the scripts get loaded before the elements.. and that means everything is smooth.

Though I have no idea what happens, if the displayElements option is set lower, then the actual elements count inside the list. Best avoid such situations.

Also if you noticed that the elements get floated together in CSS. You could also use display: inline-block;, but inline-block isn’t very crossbrowser, so I used float. This however means, that under the elements you should have clear: both; in some form.. Or maybe even some wrapper around the list.