SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with an extremely simple JS Slideshow

    After many hours of as JS newbie messing around with a slideshow, I came up with the following:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> </title>
    
    <style type="text/css" media="all">
    <!--
    @import url(styles.css);
    -->
    </style>
    
    <script language="javascript">
    
    function changeSlide(inc) {
    	var a = 1;
    	if (inc = 1) { a++ }
    	if (inc = -1) { a-- }
    	var slide = document.getElementById("slide");
    	slide.src = "images/design/" + a + ".gif";
    }
    
    </script>
    
    </head>
    <body>
    
    <div id="controls">
    <a href="index.html"> Home </a>
    <a href="javascript:changeSlide(-1)" id="rw"> <span> &lt;&lt; </span> </a>
    <a href="javascript:changeSlide(1)" id="ff"> <span> &gt;&gt; </span> </a>
    </div>
    
    <script language="javascript">
    document.write("<img src=\"images/design/1.gif\" id=\"slide\" alt=\"\" />");
    </script>
    
    
    </body>
    </html>
    But it doesn't work

    Basically, I have 29 images in the images/design folder, numbered #.gif, with 1.gif displayed first. When the user presses on the previous (rw) or next (ff) link, I want the image's source to swap for either the next or previous image in the cycle, respectively.

    I uploaded the page here if it helps.

    Any help would be very much appreciated
    Last edited by bcherny; Aug 3, 2006 at 15:00.

  2. #2
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    Slide Show script

    Does it work if you change
    HTML Code:
    <script language="javascript">
    document.write("<img src=\"images/design/1.gif\" id=\"slide\" alt=\"\" />");
    </script>
    to
    HTML Code:
    <img src="images/design/1.gif" id="slide" alt="" />
    ??

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no, but many thanks for the attmept

  4. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    assign not testing

    I looked a little closer. the ifs are assigning values instead of testing for them.
    HTML Code:
    if (inc = 1) { a++ }
    if (inc = -1) { a-- }
    should be
    HTML Code:
    if (inc == 1) { a++ }
    if (inc == -1) { a-- }

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much!!! I can't believe I missed something that simple :P

    Now, out of curiosity (after Googling it unsuccessfully for an hour), is there a way via JS to detect the number of items in a folder (ex. for auto-detecting a maximum number for the ff)?

  6. #6
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,290
    Mentioned
    198 Post(s)
    Tagged
    3 Thread(s)

    folder contents

    Javascript does it's stuff client-side. Do get the folder contents on the server, you can use a server-side language (got PHP?) that has file system functions and pass that value to the javascript. Most javascript slideshow scripts that I've seen use an array of images and use it's length property. eg
    ss_img = new Array("1.gif","2.gif","3.gif");
    or
    ss_img = new Array();
    ss_img[0] = "1.gif";
    ss_img[1] = "2.gif";
    ss_img[2] = "3.gif";

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2005
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright, using PHP's a great idea I'll try it and complain if I have any further problems :P

    Once again, thanks for your help thus far

    EDIT

    Alright, I have it working

    In case anyone has the same problem I had with an image gallery, etc, here's the code I used:

    PHP/JS placed in the head
    Code:
    <?php
    
    // the name of the folder where the images are stored ( no trailing slash! ).
    $imgDir = 'images/design';
    
    // open it
    $handle = opendir($imgDir);
    
    // the array that will store the name of the images
    $images = array();
    
    // get the content of the folder
    while(( $file = readdir($handle)) !== FALSE )
    {
      if( is_file( "$imgDir/$file" ) )
      {
        $images[] = $file;
      }
    }
    
    // now you can access all the names of the images in the array $images
    
    $items = count($images) - 1;
    
    echo "
    <script language=\"javascript\">
    var items = $items;
    ";
    
    ?> 
    
    function changeSlide(inc) {
    	if (inc == 1) { a++ }
    	if (inc == -1) { a-- }
    	if ( a < 1 ) { a = 1 }
    	if ( a > items ) { location.href = "index.html" }
    	var slide = document.getElementById("slide");
    	slide.src = "images/design/" + a + ".gif";
    	
    	design_caps();
    }
    
    </script>
    JS for the slides, Forward/Back controls
    Code:
    <script language="javascript">
    var a = 1
    document.write("<img src=\"images/design/" + a + ".gif\" id=\"slide\" alt=\"\" />");
    </script>
    
    <div id="controls">
    <a href="index.html"> Home </a>
    <a href="javascript:changeSlide(-1)" id="rw"> <span> &lt;&lt; </span> </a>
    <a href="javascript:changeSlide(1)" id="ff"> <span> &gt;&gt; </span> </a>
    </div>
    Last edited by bcherny; Aug 4, 2006 at 17:13.


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
  •