www.webdeveloper.com
Results 1 to 6 of 6

Thread: Simple Image Gallery More than 3?

  1. #1
    Join Date
    Nov 2008
    Posts
    3

    Arrow Simple Image Gallery More than 3?

    I tried using the Simple Image Gallery code, which only uses 3 images in the example. I tried using more than 3 and it works except for the subtitle beneath the image. It says "Undefined". Also, the alt(caption shown when the cursor stays on the image) says "undefined".
    I would like to know how to fix this.

    External file Gallery.js:
    HTML Code:
    var num=0;
    
    imgArray = [
      ['image1.jpg','', '1/5'],
      ['image2.jpg','','2/5'],
      ['image3.jpg','','3/5'],
      ['image4.jpg','','4/5'],
      ['image5.jpg','','5/5']
    ]
    
    function slideshow(slide_num) {
      document.getElementById('mypic').src=imgArray[slide_num][0];
      document.getElementById('mypic').alt=imgArray[slide_num][1];
      document.getElementById('mypic').alt=imgArray[slide_num][2];
      document.getElementById('mypic').alt=imgArray[slide_num][3];
      document.getElementById('burns').innerHTML=imgArray[slide_num][4];
    }
    
    function slideshowUp() {
      num++;
      num = num % imgArray.length;
      slideshow(num);
    }
    
    function slideshowBack() {
      num--;
      if (num < 0) {num=imgArray.length-1;}
      num = num % imgArray.length;
      slideshow(num);
    }
    Head:
    HTML Code:
    <script type="text/javascript" src="Gallery.js"></script>
    Body:
    HTML Code:
    <div style="text-align: center">
      <!--  Place the first image here  -->
      <img src="image1.jpg" id="mypic" name="mypic" alt="" border="1" width="200">
      <br>
      <!--  Place the text for the first image here  -->
      <div id="burns">1/5</div>
      <p>
      <a href="#" onclick="slideshowBack(); return false;"> Previous</a> |
      <a href="#" onclick="slideshowUp(); return false;"> Next </a>
    </div>

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    just undo your changes to the slideshow function.
    Code:
    function slideshow(slide_num) {
      document.getElementById('mypic').src=imgArray[slide_num][0];
      document.getElementById('mypic').alt=imgArray[slide_num][1];
      document.getElementById('burns').innerHTML=imgArray[slide_num][2];
    }
    If you are using PHP please use the [PHP] and [/PHP] forum tags for highlighting...
    The same applies to HTML and the forums [HTML][/HTML] tags.

  3. #3
    Join Date
    Feb 2008
    Posts
    1,666
    You changed too much. Change this:
    Code:
    function slideshow(slide_num) {
      document.getElementById('mypic').src=imgArray[slide_num][0];
      document.getElementById('mypic').alt=imgArray[slide_num][1];
      document.getElementById('mypic').alt=imgArray[slide_num][2];
      document.getElementById('mypic').alt=imgArray[slide_num][3];
      document.getElementById('burns').innerHTML=imgArray[slide_num][4];
    }
    back to this:
    Code:
    function slideshow(slide_num) {
      document.getElementById('mypic').src=imgArray[slide_num][0];
      document.getElementById('mypic').alt=imgArray[slide_num][1];
      document.getElementById('burns').innerHTML=imgArray[slide_num][2];
    }

  4. #4
    Join Date
    Nov 2008
    Posts
    3
    Okay. Thought I was supposed to change that. Thanks!

  5. #5
    Join Date
    Nov 2008
    Posts
    3
    Okay. Here's another quick question. Where would I add a link to the images. Like, when you click on one the image url opens up on a new page.

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb Try this ...

    Assuming the location is the first element of the imgArray, you should be able to do this:

    In the HTML part
    PHP Code:
      <a id='anchor' href="image1.jpg">
      <
    img src="image1.jpg" id="mypic" name="mypic" alt="" border="1" width="200">
      </
    a
    In the JS part
    PHP Code:
    function slideshow(slide_num) {
      
    document.getElementById('mypic').src=imgArray[slide_num][0];
      
    document.getElementById('mypic').alt=imgArray[slide_num][1];
      
    document.getElementById('burns').innerHTML=imgArray[slide_num][2];
      
    document.getElementById('anchor').href=imgArray[slide_num][0];


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles