Help - Search - Members - Calendar
Full Version: Slideshow In Javascript (no Flash)
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > JavaScript
mastermp2
Jul 23 2010, 03:43 PM
Hello

I'm not a programmer, and don't know too much javacript. Anyway, I would like to do a slideshow which takes the images from a folder. It's for creating a web banner. Currently I'm checking some codes that I found on the internet that can do something like that, however they have certain limitations

One of these codes if the following:

CODE
<html>
<head>

<title>Experimental</title>




&lt;script LANGUAGE="JavaScript">
<!--

var dimages=new Array();
var numImages=4;

for (i=0; i<numImages; i++)
{
  dimages[i]=new Image();
  dimages[i].src="media/image"+(i+1)+".jpg";
}
var curImage=-1;

function swapPicture()
{
  if (document.images)
  {
    var nextImage=curImage+1;
    if (nextImage>=numImages)
      nextImage=0;
    if (dimages[nextImage] && dimages[nextImage].complete)
    {
      var target=0;
      if (document.images.myImage)
        target=document.images.myImage;
      if (document.all && document.getElementById("myImage"))
        target=document.getElementById("myImage");
  
      // make sure target is valid.  It might not be valid
      //   if the page has not finished loading
      if (target)
      {
        target.src=dimages[nextImage].src;
        curImage=nextImage;
      }

      setTimeout("swapPicture()", 5000);

    }
    else
    {
      setTimeout("swapPicture()", 500);
    }
  }
}

setTimeout("swapPicture()", 5000);

//-->
</SCRIPT>                                

</head>



<!-- BODY ********************************************************************************
********************** -->

<IMG WIDTH=940 HEIGHT=350 ID="myImage" NAME="myImage" SRC="media/image1.jpg"></IMG>




<!-- BODY ********************************************************************************
********************** -->

  
</html>


You see the thing is, that the problem (or limitation) with this script, is that you have to declare the amounts of images in your folder (var numImages= X) and also you have to name all of the images in the following format "image1.jpg, image2.jpg..... image.8jpg.....)


What I want to do is simple. I want to be able to allow a non-programmer user to upload the images he/she wants into the specific "folder" and then, allow him to just give the following code to whoever he/she wants (client/friend/3rdparty/whatever) to display the banner:

CODE
&lt;script SRC="http://www.yourwebsite.com/uploads/js/cmscommon.js" type="text/javascript"></SCRIPT>


In the head section, and in the body (wherever he wants the banner to be displayed):

CODE
<IMG WIDTH=940 HEIGHT=350 ID="myImage" NAME="myImage" SRC="http://www.tusitioweb.com/media/image1.jpg"></IMG>


So, let's say.... I did my job with the javascript and gave somebody the code above so that they just insert it in their page to display the banner and stuff..... then User A upload 4 images in the folder (OK, good so far)...... Then user B upload 2 more images,,, and the user C erase 1 (= 5 images total)..... so what happens.... the last image (image5.jpg or randomname.jpg) won't be displayed in the banner because "var numImage" is equal to 4.

Can you help me so that there is no need to change the value of "x" in "numImage=x"?
Also, if you know how to avoid the need to name all the images like "imageX.jpg", it would be really nice


I appreciate any help you can provide..... Thanks

P.S: if you know how to add effects to the slideshow like rotation or fade, I'll appreciated
amal francis
Mar 31 2012, 04:51 PM
i wud suggest using jquery . There are lot of libraries avail , in jquery with which you can add effects like rotation or fade
Zove Games
Jul 7 2012, 07:58 PM
I think you should use PHP to get all the images in the folder, then create an JavaScript array with all the image names. Then, you can easily loop through the array.
Like this:
CODE
<script type='text/javascript'>

<?php
echo "var images=[";
//Open the directory
$dir = opendir("./images/"); //or whatever

//Loop through files
$output="";
while (($file = readdir($dir)) !== false)
  {
  if($file=="." || $file=="..")continue; // readdir outputs . (link to current directory) and .. (link to parent directory), skip these
  $output.="'$file',";
  }

closedir($dir);
//remove trailing comma
$output=substr($output, 0, strlen($output)-1);
echo $output."];";
?>

var currentImage=1;
function nextImage(){
  if(currentImage>images.length)currentImage=1;
  document.getElementById("myImageTag").src=images[currentImage];
  setTimeout("nextImage()", 5000);
}

setTimeout("nextImage()", 100);
</script>
<img src="" id="myImageTag" />
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2013 Invision Power Services, Inc.