Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Post How to implement slideshow with too many images

    Hi everybody, I have written a javascript slideshow with pause-play-next-previous buttons, but the images are too many and users have to wait too long especially with slower connections - i wonder if anybody can suggest a way to implement the script with fast preloading of the first few images, increment preloading or a similar trick. I will copy my code below but i also copy first this link:

    http://www.javascriptkit.com/script/...entslide.shtml

    which is an example of increment loading slideshow working fine! my problem is i am quite new to javascript and i wouldnt know how to customize it in order to take away the link function, that i dont need, and add captions and buttons etc.

    Any advice in one of the two directions (working on my own script below or customizing the linked one above) would be very very appreciated!
    Also alternative ideas (i.e. some solutions using pure CSS) are welcome!
    I do know some jquery plugin could do but i am trying to go more into the code, even though i still need a lot of advices and tutorials, the goal is solving this specific problem but also learning! Thx a lot in advance.

    Here my code (just 2 images here in the list to make it shorter for you, the complete list is more than 50 pics!):

    Code:
    <script language="JavaScript">
    <!--
    var interval = 8000;
    var random_display = 0;
    var imageDir = "portraits/";
    var imageNum = 0;
    
    didascalieArray = new Array();
    imageArray = new Array();
    didascalieArray[imageNum] = "caption1";
    imageArray[imageNum++] = new imageItem(imageDir +
    "image1.jpg");
    didascalieArray[imageNum] = "caption2";
    imageArray[imageNum++] = new imageItem(imageDir +
    "image2.jpg");
    
    
    var totalImages = imageArray.length;
    
    function imageItem(image_location) {
    this.image_item = new Image();
    this.image_item.src = image_location;
    }
    
    function get_ImageItemLocation(imageObj) {
    return(imageObj.image_item.src)
    }
    
    function getNextImage() {
    if (random_display) {
    imageNum = randNum(0, totalImages-1);
    }
    
    else {
    imageNum = (imageNum+1) % totalImages;
    }
    var new_image = get_ImageItemLocation(imageArray
    
    [imageNum]);
    
    document.getElementById("didascalia").innerHTML =
    
    didascalieArray[imageNum];
    return(new_image);
    }
    
    function getPrevImage() {
    if(imageNum-1 < 0) {
    imageNum = totalImages-1;
    }
    else
    imageNum = (imageNum-1) % totalImages;
    var new_image = get_ImageItemLocation(imageArray
    
    [imageNum]);
    document.getElementById("didascalia").innerHTML =
    
    didascalieArray[imageNum];
    return(new_image);
    }
    
    function prevImage(place) {
    var new_image = getPrevImage();
    document[place].src = new_image;
    }
    
    function switchImage(place) {
    var new_image = getNextImage();
    document[place].src = new_image;
    var recur_call = "switchImage('"+place+"')";
    timerID = setTimeout(recur_call, interval);
    }
    
    // -->
    
    </script>

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Smile

    Sciliano, this is actually a very clever solution!

    Do you think it would be releatively easy to add play-pause-prev-next buttons + captions, and take away the xfader? I do have to add this features and I can try myself, but I am still not very self confindent about customizing existing code.

    Thanks a lot

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    alitscha:

    On second thought, try another of my applicatons here

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    <!--
    var interval = 1000;
    var imageDir = "http://www.vicsjavascripts.org.uk/StdImages/";
    var imageNum = 0;
    
    didascalieArray = new Array();
    imageArray = new Array();
    didascalieArray[imageNum] = "caption1";
    imageArray[imageNum++] = imageDir +"Egypt5.jpg";
    didascalieArray[imageNum] = "caption2";
    imageArray[imageNum++] = imageDir +"Egypt6.jpg";
    
    imageNum=0 ;
    
    
    function Auto(){
     Auto.to=setTimeout(function(){ auto(); },100);
    }
    
    function auto(){
     NextImage()
     Auto.to=setTimeout(function(){ auto(); },interval);
    }
    
    function Pause(){
     clearTimeout(Auto.to);
    }
    
    function NextImage() {
     clearTimeout(Auto.to);
     imageNum=++imageNum%imageArray.length;
     if (typeof(imageArray[imageNum])=='object'){
      document.getElementById('tom').src=imageArray[imageNum].src;
      if(didascalieArray[imageNum]){
       document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
      }
      LoadNextImage();
     }
    }
    
    function LoadNextImage() {
     clearTimeout(preload.to);
     var nxt=imageNum+1;
     nxt=nxt>=imageArray.length?0:nxt;
     if (typeof(imageArray[nxt])=='string'){
      var img=new Image();
      img.src=imageArray[nxt];
      preload(img,nxt);
     }
    }
    
    function preload(img,nxt){
     if (!img.complete||img.width<40){
      preload.to=setTimeout(function(){ preload(img,nxt); },100);
     }
     else {
      imageArray[nxt]=img;
     }
    }
    
    // -->
    
    </script>
    </head>
    
    <body onload="LoadNextImage(1);">
    <img id="tom" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" onmouseover="Pause();" onmouseout="Auto();" />
    <div id="didascalia" >Caption 1</div>
    
    <input type="button" name="" value="Next" onmouseup="NextImage();"/>
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    @vwphilips: thanks, looks good! but it doesnt work anymore when i try to use my images (i did changed the dir name) - can you spot any mistake here?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    <!--
    var interval = 1000;
    var imageDir = "potraits/";
    var imageNum = 0;
    
    didascalieArray = new Array();
    imageArray = new Array();
    didascalieArray[imageNum] = "caption1";
    imageArray[imageNum++] = imageDir +"01_st_rp.jpg";
    didascalieArray[imageNum] = "caption2";
    imageArray[imageNum++] = imageDir +"02_st_rp2.jpg";
    
    imageNum=0 ;
    
    
    function Auto(){
     Auto.to=setTimeout(function(){ auto(); },100);
    }
    
    function auto(){
     NextImage()
     Auto.to=setTimeout(function(){ auto(); },interval);
    }
    
    function Pause(){
     clearTimeout(Auto.to);
    }
    
    function NextImage() {
     clearTimeout(Auto.to);
     imageNum=++imageNum%imageArray.length;
     if (typeof(imageArray[imageNum])=='object'){
      document.getElementById('tom').src=imageArray[imageNum].src;
      if(didascalieArray[imageNum]){
       document.getElementById('didascalia').innerHTML=didascalieArray
    
    [imageNum];
      }
      LoadNextImage();
     }
    }
    
    function LoadNextImage() {
     clearTimeout(preload.to);
     var nxt=imageNum+1;
     nxt=nxt>=imageArray.length?0:nxt;
     if (typeof(imageArray[nxt])=='string'){
      var img=new Image();
      img.src=imageArray[nxt];
      preload(img,nxt);
     }
    }
    
    function preload(img,nxt){
     if (!img.complete||img.width<40){
      preload.to=setTimeout(function(){ preload(img,nxt); },100);
     }
     else {
      imageArray[nxt]=img;
     }
    }
    
    // -->
    
    </script>
    </head>
    
    <body onload="LoadNextImage(1);">
    <img id="slide1" src="portraits/01_stappert_rp.jpg" onmouseover="Auto();" 
    
    onmouseout="Auto();" />
    <div id="didascalia">caption 1</div>
    
    <input type="button" name="" value="Next" onmouseup="NextImage();"/>
    
    
    </body>
    
    </html>
    @Sciliano: i still would like to try and fix the script i have, but otherwise your application looks like a good solution, thx!

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    check the directory and image names(including upper/lower case charactors)

    else post a link to your page
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    sorry if it took a while to answer, i checked file names and everything and now the script works perfectly. I am posting here the slightly modified version I am doing, i took away the onmouseover and out functions and i added the Auto function to body onload, so that the slideshow starts running as the page opens. Strangely the slideshow starts from the second image in the array, i made the trick starting the array with the last one, but i guess this is not such an elegant solution!

    And then i will add a prev button near the next one, hope i can figure that out.

    Thaks a lot for your help!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    <!--
    var interval = 1000;
    var imageDir = "portraits/";
    var imageNum = 0;
    
    didascalieArray = new Array();
    imageArray = new Array();
    didascalieArray[imageNum] = "caption4";
    imageArray[imageNum++] = imageDir +"4.jpg";
    didascalieArray[imageNum] = "caption1";
    imageArray[imageNum++] = imageDir +"1.jpg";
    didascalieArray[imageNum] = "caption2";
    imageArray[imageNum++] = imageDir +"2.jpg";
    didascalieArray[imageNum] = "caption3";
    imageArray[imageNum++] = imageDir +"3.jpg";
    
    
    imageNum=0 ;
    
    
    function Auto(){
     Auto.to=setTimeout(function(){ auto(); },100);
    }
    
    function auto(){
     NextImage()
     Auto.to=setTimeout(function(){ auto(); },interval);
    }
    
    
    function NextImage() {
     clearTimeout(Auto.to);
     imageNum=++imageNum%imageArray.length;
     if (typeof(imageArray[imageNum])=='object'){
      document.getElementById('tom').src=imageArray[imageNum].src;
      if(didascalieArray[imageNum]){
       document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
      }
      LoadNextImage();
     }
    }
    
    function LoadNextImage() {
     clearTimeout(preload.to);
     var nxt=imageNum+1;
     nxt=nxt>=imageArray.length?0:nxt;
     if (typeof(imageArray[nxt])=='string'){
      var img=new Image();
      img.src=imageArray[nxt];
      preload(img,nxt);
     }
    }
    
    function preload(img,nxt){
     if (!img.complete||img.width<40){
      preload.to=setTimeout(function(){ preload(img,nxt); },100);
     }
     else {
      imageArray[nxt]=img;
     }
    }
    
    // -->
    
    </script>
    </head>
    
    <body onload="LoadNextImage(); Auto()">
    <img id="tom" src="portraits/1.jpg">
    <div id="didascalia" >Caption 1</div>
    
    <input type="button" name="" value="Next" onmouseup="NextImage();"/>
    
    
    </body>
    
    </html>

  • #8
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hallo again! I managed the PrevImage function, i would have just a last thing to fix...I am copying that part of the script here below. it works well but gets stuck if i go back to the last image, and then next and prev are not working anymore...how can i make a cycle so that the slidewhow go back and forth in both directions? Hope the question is clear enough

    Code:
    function NextImage() {
     clearTimeout(Auto.to);
     imageNum=++imageNum%imageArray.length;
     if (typeof(imageArray[imageNum])=='object'){
      document.getElementById('tom').src=imageArray[imageNum].src;
      if(didascalieArray[imageNum]){
       document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
      }
      LoadNextImage();
     }
    }
    
    function PrevImage() {
     clearTimeout(Auto.to);
     imageNum=--imageNum%imageArray.length;
     if (typeof(imageArray[imageNum])=='object'){
      document.getElementById('tom').src=imageArray[imageNum].src;
      if(didascalieArray[imageNum]){
       document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
      }
      LoadPrevImage();
     }
    }
    function LoadPrevImage() {
     clearTimeout(preload.to);
     var nxt=imageNum-1;
     nxt=nxt>=imageArray.length?0:nxt;
     if (typeof(imageArray[nxt])=='string'){
      var img=new Image();
      img.src=imageArray[nxt];
      preload(img,nxt);
     }
    }
    
    function LoadNextImage() {
     clearTimeout(preload.to);
     var nxt=imageNum+1;
     nxt=nxt>=imageArray.length?0:nxt;
     if (typeof(imageArray[nxt])=='string'){
      var img=new Image();
      img.src=imageArray[nxt];
      preload(img,nxt);
     }
    }

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    the nature of the script only allows loading the next image going forward

    the modification loads the current image on demand when going back


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    <!--
    var interval = 1000;
    var imageDir = "http://www.vicsjavascripts.org.uk/StdImages/";
    var imageNum = 0;
    
    didascalieArray = new Array();
    imageArray = new Array();
    didascalieArray[imageNum] = "caption1";
    imageArray[imageNum++] = imageDir +"Egypt5.jpg";
    didascalieArray[imageNum] = "caption2";
    imageArray[imageNum++] = imageDir +"Egypt6.jpg";
    
    imageNum=0 ;
    
    
    function Auto(){
     Auto.to=setTimeout(function(){ auto(); },100);
    }
    
    function auto(){
     NextImage()
     Auto.to=setTimeout(function(){ auto(); },interval);
    }
    
    
    function NextImage() {
     clearTimeout(Auto.to);
     imageNum=++imageNum%imageArray.length;
     if (typeof(imageArray[imageNum])=='object'){
      document.getElementById('tom').src=imageArray[imageNum].src;
      if(didascalieArray[imageNum]){
       document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
      }
      LoadNextImage();
     }
    }
    
    function LoadNextImage(prev) {
     clearTimeout(preload.to);
     var nxt=imageNum+(prev?0:1);
     nxt=nxt>=imageArray.length?0:nxt;
     if (typeof(imageArray[nxt])=='string'){
      var img=new Image();
      img.src=imageArray[nxt];
      preload(img,nxt,prev);
     }
    }
    
    function preload(img,nxt,prev){
     if (!img.complete||img.width<40){
      preload.to=setTimeout(function(){ preload(img,nxt,prev); },100);
     }
     else {
      imageArray[nxt]=img;
      if (prev){
       document.getElementById('tom').src=imageArray[imageNum].src;
       if(didascalieArray[imageNum]){
        document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
       }
      }
     }
    }
    
    function PrevImage() {
     clearTimeout(Auto.to);
     imageNum--;
     imageNum=imageNum<0?imageArray.length-1:imageNum;
     if (typeof(imageArray[imageNum])=='object'){
      document.getElementById('tom').src=imageArray[imageNum].src;
      if(didascalieArray[imageNum]){
       document.getElementById('didascalia').innerHTML=didascalieArray[imageNum];
      }
     }
     else {
      LoadNextImage(true);
     }
    }
    
    // -->
    
    </script>
    </head>
    
    <body onload="LoadNextImage();">
    <img id="tom" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg">
    <div id="didascalia" >Caption 1</div>
    
    <input type="button" name="" value="Next" onmouseup="NextImage();"/>
    <input type="button" name="" value="Prev" onmouseup="PrevImage();"/>
    
    
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    alitscha (07-31-2011)

  • #10
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    ok, thanks, will try that too!


  •  

    Tags for this Thread

    Posting Permissions

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