Another random image/javascript question

Question

So I'm trying to find the easiest way to randomly select 4 images (out of range of 8 images) and present them on a page. No motion or transitions needed - just a way that every time someone visits the page a random selection of 4 of the 8 images are shown. My current HTML looks something like this:
<div id="slider">
            <ul id="randomSlide">
            <!-- 1 -->
                 <li>
                    <a href="path/to/someotherpage.html"><img alt="alt text" src="img/1.jpg"/></a>
                 </li>
          </ul>
</div>
So any suggestions on a good way to solve this problem? Any jQuery plugins? Tips?

Answer 1

I have not tested this on a live server, but this works perfectly locally. Put the following script immediately before the closing </body> tag on the page:
<script>
var images =  [], list = document.getElementById('randomSlide'),
    elems = list.getElementsByTagName('li');
images[0] = {src: 'lasvegas1.jpg', url: 'lasvegas.html'};
images[1] = {src: 'lasvegas2.jpg', url: 'lasvegas.html'};
images[2] = {src: 'longbeach.jpg', url: 'longbeach.html'},
images[3] = {src: 'longbeach2.jpg', url: 'longbeach.html'};
images[4] = {src: 'losangeles1.jpg', url: 'losangeles.html'};
images[5] = {src: 'losangeles2.jpg', url: 'losangeles.html'};
images[6] = {src: 'sanfrancisco1.jpg', url: 'sanfrancisco.html'};
images[7] = {src: 'sanfrancisco2.jpg', url: 'sanfrancisco.html'};
images.sort(function() { return 0.5 - Math.random()});
for (var i = 0; i < 4; i++) {
    elems[i].getElementsByTagName('a')[0].href = images[i].url;
    elems[i].getElementsByTagName('img')[0].src = 'images/' + images[i].src;
</script>
Obviously, you need to change the values of src and url in each array element.
What this does is create an array of objects containing the image name and its associated url. The array is then sorted randomly, and a loop that runs four times is used to populate the "randomSlide" unordered list, replacing the href and src attributes. I have assumed the images are in a folder called "images". If not, change the value of 'images/' in the loop at the end of the script.
When I tested this locally, I used # for the default href and an empty string for src in each <img> tag. Since some people might have JavaScript disabled, it might be better to use actual values. However, this might result in the images changing after the page loads. The problem is that you can't access the unordered list until it has loaded into the DOM. The alternative would be to sort the array and preload the images, but this will slow down the display of the whole page.
A server-side solution would be much more efficient.