Photos that change every few seconds

A newbie question and perhaps one I am not ready to ask but here goes…

I see websites that have small photos at top of page, and they change every few seconds. How is that done?

This is called a slide presentation: slideshow, and this is not a new term. It can be done with javascript. One example for a beginner is relying on jQuery: jQuery Cycle Plugin.

Here is a javascript version. You will need 4 images 205px wide and 100px high for this to work. I have shown them here as .gif files, but that is because I already had them. In practice it can be any of several image file types, and any size, but all images must be the same size. If you do change the size you will need to alter the width and height attributes in the build string within this code.

[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>

<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<script type=“text/JavaScript”>
<!–
var picCount=0; // global
var picArray= [“img2.gif”,“img3.gif”,“img4.gif”,“img1.gif”]
//
// gets next picture in array
function nextPic()
{ // check if adding 1 exceeds number of pics in array
picCount=(picCount+1<picArray.length)? picCount+1 : 0;
// build the img to write to page using the new pic reference
var build=‘<img border=“0” src="’+picArray[picCount]+'" width=“205” height=“100”>
';
document.getElementById(“imgHolder”).innerHTML=build;
// repeat this after a puse of 2000ms (2sec).
setTimeout(‘nextPic()’,2000)
}
//–>
</script>
<style type=“text/css”>
<!–
#imgHolder{ position:absolute; top:100px; left:100px; text-align:left; }

.LgR { color:#F00; font-size:30px; font-weight:bold; line-height:130%; background-color:#FFF; }
.a18B { color:#792D99; font-size:18px; font-weight:bold; background-color:#FFF; }
–>
</style>
<title>Image Swap Static</title>
</head>

<body onload=“setTimeout(‘nextPic()’,2000)”>

<div id=“imgHolder”>
<img border=“0” src=“img1.gif” width=“205” height=“100”>
</div>

</body>

</html>

You didn’t, however, asked why it is done. I am convinced myself that it is done to drive visitors away so the will never come back. At least, that is what it does to me.

haha yup i found out that a regular pic works much better for your bounce rate.

I strongly recommend preloading the images to ensure all the images have been download befpre the slideshow starts.

This code preloads the images and then cycles through them every 2 secs.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            var picPaths = ['pic1.jpg','pic2.jpg','pic3.jpg','pic4.jpg','pic5.jpg'];
            var curPic = -1;
            //preload the images for smooth animation
            var imgO = new Array();
            for(i=0; i < picPaths.length; i++) {
                imgO[i] = new Image();
                imgO[i].src = picPaths[i];
            }

            function swapImage() {
                curPic = (++curPic > picPaths.length-1)? 0 : curPic;
                imgCont.src = imgO[curPic].src;
                setTimeout(swapImage,2000);
            }

            window.onload=function() {
                imgCont = document.getElementById('imgBanner');
                swapImage();
            }
        </script>

    </head>
    <body>

        <div>
            <img id="imgBanner" src="" alt="" />
        </div>

    </body>
</html>

Slideshows and other animations are excellent for holding visitors attention, especially when the target audience is rabbits or chickens. If you manage to get the rotation speed just right, it may be possible to hypnotize some human visitors into believing they are rabbits or chickens.

Including a clearly visible option to pause the animation is recommended.

Actually, slideshows are pretty useful for narrowing the viewing area a user has to handle.

Tumbnails show and automating their display, images slideshows, content like Google ads, these are a few cases where slideshows may be considered.

I find slideshows can be very useful to highlight different aspects of whatever you’re trying to promote. The code I posted is a quick and simple demo for the op, and anyone else interested of course, but I would normally have a longer dwell period between image swaps and I would also normally have some sort of transition (all done with js) between images. The short 2 secs dwell plus instant image swap in the demo is a bit harsh on the eyes imo but it shows a basic slideshow is not difficult to code up.

Given the complexity of this (at least for me) and the negative feelings about using it, I will pass on it. Thanks for your responses…

You know those flash galleries that have a picture then pause, next, and previous buttons, and then tiny thumbnails of the previous and next pictures below the main picture? Is there any jQuery plugin that can do that?

I know that web professionals often look poorly on things such as this, we all have our pet peeves about things. However, to be honest to just arbitrarily dismiss something because it is personally not seen as useful is not really a good reason. For example, a hardware, hunting business that opens an online store but also is wanting to drive local traffic into their brick and mortar, or have current customers send family and friends from outside the area to the online store, by putting up rotating pictures similar to that they can place hunting photos of local customers, either that buck that they got, the huge fish they caught etc…this can go a long way to giving increased reason for that person to feel better about the local store, and a reason to send out e-mails and phone calls to all of their buddies saying “hay go check me out!”.

With that said, there are sometimes reasons, this one mentioned and others that doing such things are advantageous. So the question is not should it ever be done, but what benefit will it bring me if I do…is there a real reason for it or is it just an attempt to look cool?

Just my two cents worth…

you can do all this with the jquery cycle plugin, it’s very versatile, and customizable…