SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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?

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  3. #3
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code :
    <!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">\n';
         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>

  4. #4
    SitePoint Evangelist Ed Seedhouse's Avatar
    Join Date
    Aug 2006
    Location
    Victoria, B.C. Canada
    Posts
    592
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Ed Seedhouse

  5. #5
    SitePoint Member
    Join Date
    Jun 2009
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Ed Seedhouse View Post
    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.
    Best product to promote your website: Bookmarking Demon
    Play Pacman - one of my sites that's doing really well.

  6. #6
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code JavaScript:
    <!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>

  7. #7
    Sploghm bronze trophy Victorinox's Avatar
    Join Date
    Nov 2008
    Posts
    749
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Non-Member
    Join Date
    Dec 2010
    Location
    /home/pc
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Evangelist Barnum's Avatar
    Join Date
    Oct 2008
    Posts
    418
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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....

  11. #11
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,849
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    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?

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Lakeland, Georgia
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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....

  13. #13
    SitePoint Guru
    Join Date
    Jun 2009
    Posts
    825
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cheesedude View Post
    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?
    you can do all this with the jquery cycle plugin, it's very versatile, and customizable....


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •