www.webdeveloper.com
Results 1 to 8 of 8

Thread: Simple problem for someone with a little experience

  1. #1
    Join Date
    Sep 2013
    Posts
    2

    Simple problem for someone with a little experience

    Hi all, I'm new here and appreciate any help on this which is a simple thing but not for me.

    I'm using Java in some Ebay listings to display various galleries of pictures which are hosted elsewhere (photobucket)

    The gallery works perfectly but I need more than one in the same listing and when I do that the second or third gallery changes the pictures on the first gallery, I;m assuming because the code is using the same variables or something.

    Anyway the question is what do I have to change to have more than one running on the same page, code is below....thanks in advance

    <!-- Photo gallery Start -->
    <table align="left" style="margin: 0px auto; padding: 10px 0px; border: 1px solid rgb(153, 51, 51); color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" cellspacing="0" cellpadding="0">
    <tbody><tr>
    <td style="padding: 10px 5px 10px 10px; width: 580px; text-align: center; vertical-align: top;">
    <script language="JavaScript" type="text/javascript">
    <!--
    function showPhoto(num)
    {
    for (i = 1; i <= 7; i++)
    // Above line needs to match the total number of photos in gallery
    {document.getElementById("photoexd" + i).style.display = "none";
    document.getElementById("photoexd" + num).style.display = "block";}
    }
    // -->
    </script>
    <div class="photoedis" id="photoexd1" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd2" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_026.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd3" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd4" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd5" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd6" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd7" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg">
    <p></p></div></td>
    <td style="padding: 10px; text-align: center; vertical-align: top;">
    <ul style="list-style: none; margin: 0px; padding: 0px; border: 1px solid rgb(112, 112, 112); width: 110px; height: 400px; overflow: auto;">
    <!-- The above height sets the height of the thumbnail gallery, default value 400px -->
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto(1)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto(2)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_026.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto(3)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto(4)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto(5)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto(6)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto(7)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg"></li>
    </ul>
    </td></tr></tbody></table>
    <!--
    Photo gallery code by Photo Gallery Maker
    Free for personal use in ebay listings
    -->
    <style type="text/css">
    <!--
    #photoexd1 {display: block;}
    .photoedis {display: none;}
    -->
    </style>
    <!-- Photo gallery End -->




    Edit / Delete Edit Post Quick reply to this message Reply Reply With Quote Reply With Quote Multi-Quote This Message

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    #photoexd1 {display: block;}
    .photoedis {display: none;}
    -->
    </style>
    <script type="text/javascript">
    <!--
    function showPhoto(id,num){
     for (var i=1;document.getElementById(id + i);i++){
      document.getElementById(id + i).style.display = i!=num?"none":"block";
     }
    }
    // -->
    </script>
    </head>
    
    <body>
    <!-- Photo gallery Start -->
    <table align="left" style="margin: 0px auto; padding: 10px 0px; border: 1px solid rgb(153, 51, 51); color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" cellspacing="0" cellpadding="0">
    <tbody><tr>
    <td style="padding: 10px 5px 10px 10px; width: 580px; text-align: center; vertical-align: top;">
    <div class="photoedis" id="photoexd1" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd2" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_026.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd3" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd4" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd5" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd6" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd7" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg">
    <p></p></div></td>
    <td style="padding: 10px; text-align: center; vertical-align: top;">
    <ul style="list-style: none; margin: 0px; padding: 0px; border: 1px solid rgb(112, 112, 112); width: 110px; height: 400px; overflow: auto;">
    <!-- The above height sets the height of the thumbnail gallery, default value 400px -->
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',1)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',2)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_026.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',3)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',4)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',5)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',6)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',7)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg"></li>
    </ul>
    </td></tr></tbody></table>
    
    </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/

  3. #3
    Join Date
    Sep 2013
    Posts
    2
    OK, thanks for this but it does the same, ie if I put the code in twice to have two galleries with different picture sets, the second gallery changes the pictures on the first gallery.

    rgds

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    the second set must have a differed base ID name

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <style type="text/css">
    <!--
    #photoexd1 {display: block;}
    #tom1 {display: block;}
    .photoedis {display: none;}
    .photoedis IMG {width:200px;height:200px;}
    -->
    </style>
    <script type="text/javascript">
    <!--
    function showPhoto(id,num){
     for (var i=1;document.getElementById(id + i);i++){
      document.getElementById(id + i).style.display = i!=num?"none":"block";
     }
    }
    // -->
    </script>
    </head>
    
    <body>
    <!-- Photo gallery Start -->
    <table align="left" style="margin: 0px auto; padding: 10px 0px; border: 1px solid rgb(153, 51, 51); color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" cellspacing="0" cellpadding="0">
    <tbody><tr>
    <td style="padding: 10px 5px 10px 10px; width: 580px; text-align: center; vertical-align: top;">
    <div class="photoedis" id="photoexd1" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd2" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_026.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd3" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd4" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd5" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd6" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg">
    <p></p></div>
    <div class="photoedis" id="photoexd7" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg">
    <p></p></div></td>
    <td style="padding: 10px; text-align: center; vertical-align: top;">
    <ul style="list-style: none; margin: 0px; padding: 0px; border: 1px solid rgb(112, 112, 112); width: 110px; height: 400px; overflow: auto;">
    <!-- The above height sets the height of the thumbnail gallery, default value 400px -->
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',1)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',2)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_026.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',3)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',4)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',5)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',6)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('photoexd',7)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg"></li>
    </ul>
    </td></tr></tbody></table>
    <br>
    <table align="left" style="margin: 0px auto; padding: 10px 0px; border: 1px solid rgb(153, 51, 51); color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" cellspacing="0" cellpadding="0">
    <tbody><tr>
    <td style="padding: 10px 5px 10px 10px; width: 580px; text-align: center; vertical-align: top;">
    <div class="photoedis" id="tom1" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg">
    <p></p></div>
    <div class="photoedis" id="tom2" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_026.jpg">
    <p></p></div>
    <div class="photoedis" id="tom3" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg">
    <p></p></div>
    <div class="photoedis" id="tom4" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg">
    <p></p></div>
    <div class="photoedis" id="tom5" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg">
    <p></p></div>
    <div class="photoedis" id="tom6" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg">
    <p></p></div>
    <div class="photoedis" id="tom7" style="margin: 0px auto;">
    <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg">
    <p></p></div></td>
    <td style="padding: 10px; text-align: center; vertical-align: top;">
    <ul style="list-style: none; margin: 0px; padding: 0px; border: 1px solid rgb(112, 112, 112); width: 110px; height: 400px; overflow: auto;">
    <!-- The above height sets the height of the thumbnail gallery, default value 400px -->
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('tom',1)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('tom',2)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_026.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('tom',3)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('tom',4)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('tom',5)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('tom',6)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg"></li>
    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto('tom',7)" src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg"></li>
    </ul>
    </td></tr></tbody></table>
    
    </body>
    
    </html>
    Last edited by vwphillips; 09-08-2013 at 09:13 AM.
    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. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    238
    If I got it right... actually you can use the same ids and class names, but you sholud
    change "num" parameter for any newly added pictures and you should also increase number
    for the for loop to itterate through all pictures which are shown (or decrease if number of pictuers are less then 7).

    For example to add one new picture to the gallery you should do the following:

    Add new "div" element (don't forget to remove closing "td" tag for previous one)

    <div class="photoedis" id="photoexd8" style="margin: 0px auto;">
    <img src="some picture">
    <p></p></div></td>

    add another "li" element to the ul list:

    <li style="margin: 3px 0px;"><img style="width: 82px;" onmouseover="showPhoto(8)" src="some pciture"></li> (pay attention to the id and increased value of num parameter). You
    should do that for every new picture.

    and finally increase number of for loop testing value:

    <script language="JavaScript" type="text/javascript">
    <!--
    function showPhoto(num)
    {
    for (i = 1; i <= 8; i++)
    // Above line needs to match the total number of photos in gallery
    {document.getElementById("photoexd" + i).style.display = "none";
    document.getElementById("photoexd" + num).style.display = "block";}
    }
    // -->
    </script>

    you can notice that from the author comment above:

    "// Above line needs to match the total number of photos in gallery".

    That should be that.

  6. #6
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    have another look at the code I posted
    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. #7
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    238
    vwphillips can you explain to me this peace of code:

    i!=num?'none':'block'

  8. #8
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Code:
    if(i!=num){document.getElementById(id + i).style.display =' none';}
    else{document.getElementById(id + i).style.display = 'block';}
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

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