Zymic Forums

Webmaster resources

Zymic IRC Server

Chat in real time at irc.zymic.com - Learn More

Welcome

Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.

In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.

left Zymic Webmaster ForumsWeb Design & DevelopmentClient Side ScriptingJavaScript right
  Reply to this topic Start new topic
left
Slideshow In Javascript (no Flash)
 right
mastermp2
post Jul 23 2010, 03:43 PM
Post #1


Newbie
*

Group: Members
Posts: 8
Joined: 30-May 10
Member No.: 143,857
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
Go to the top of the page 
 
  + Quote Post
amal francis
post Mar 31 2012, 04:51 PM
Post #2


Newbie
*

Group: Members
Posts: 12
Joined: 31-March 12
Member No.: 236,360
i wud suggest using jquery . There are lot of libraries avail , in jquery with which you can add effects like rotation or fade
Go to the top of the page 
 
  + Quote Post
Zove Games
post Jul 7 2012, 07:58 PM
Post #3


Newbie
*

Group: Members
Posts: 10
Joined: 4-December 11
Member No.: 220,644
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" />
Go to the top of the page 
 
  + Quote Post
« Next Oldest · JavaScript · Next Newest »
 
 Reply to this topic Start new topic
left
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
 right
0 Members:
left
Forum Jump
 right
 
Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 22nd May 2013 - 10:30 AM
Powered By IP.Board 2.2.2 © 2013  IPS, Inc.