Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Variable duplicated problem (I think)

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

    I'm using Javascript 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>

    <style type="text/css">
    <!--
    #photoexd1 {display: block;}
    .photoedis {display: none;}
    -->
    </style>
    <!-- Photo gallery End -->

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Question

    Couple+ of questions...

    1. Where are the additional galleries supposed to be located? Below? Right? Left?

    2. Are the images you are trying to display in any sort of grouped order?
    Like, are all the images in the same directory or do they have sequential names?

    3. What are your expectations concerning different size and/or orientation of the images?

  • #3
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,026
    Thanks
    36
    Thanked 494 Times in 488 Posts

    Lightbulb

    Since there has been no response, this is JUST A GUESS...

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title> Untitled </title>
    
    <style type="text/css">
     #ul1, #ul2 {
       list-style: none;
       margin: 0px;
       padding: 0px;
       border: 1px solid rgb(112, 112, 112);
       width: 110px;
       height: 400px;
       overflow: auto;
     }
     li { margin: 3px 0px; }
     li img { width: 82px; }
    </style>
    
    <script type="text/javascript">
    var imgList1 = [
       "http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg",
       "http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_026.jpg",
       "http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg",
       "http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg",
       "http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg",
       "http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg",
       "http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg"
    ];
    var imgList2 = [
       "http://www.nova.edu/hpd/otm/pics/4fun/11.jpg",
       "http://www.nova.edu/hpd/otm/pics/4fun/12.jpg",
       "http://www.nova.edu/hpd/otm/pics/4fun/13.jpg",
       "http://www.nova.edu/hpd/otm/pics/4fun/14.jpg",
       "http://www.nova.edu/hpd/otm/pics/4fun/15.jpg",
       "http://www.nova.edu/hpd/otm/pics/4fun/21.jpg",
       "http://www.nova.edu/hpd/otm/pics/4fun/22.jpg",
       "http://www.nova.edu/hpd/otm/pics/4fun/23.jpg",
       "http://www.nova.edu/hpd/otm/pics/4fun/24.jpg",
       "http://www.nova.edu/hpd/otm/pics/4fun/25.jpg"
    ];
    </script>
    
    </head>
    <body>
    <!-- Photo gallery Start -->
    <table align="left" style="" cellspacing="0" cellpadding="0">
    <tbody>
     <tr>
      <td> <img id="photoexd1" src=""> </td>
      <td valign="top" style="padding: 10px; text-align: center;">
       <ul id="ul1">
    <!-- The above height sets the height of the thumbnail gallery, default value 400px -->
        <li><img onmouseover="showPhoto1(0)" src=""></li>
        <li><img onmouseover="showPhoto1(1)" src=""></li>
        <li><img onmouseover="showPhoto1(2)" src=""></li>
        <li><img onmouseover="showPhoto1(3)" src=""></li>
        <li><img onmouseover="showPhoto1(4)" src=""></li>
        <li><img onmouseover="showPhoto1(5)" src=""></li>
        <li><img onmouseover="showPhoto1(6)" src=""></li>
       </ul>
      </td>
     </tr>
    </tbody>
    </table>
    
    <p>&nbsp;<p>
    
    <table align="left" style="" cellspacing="0" cellpadding="0">
    <tbody>
     <tr>
      <td valign="top"> <img id="photoexd2" src=""> </td>
      <td valign="top" style="padding: 10px; text-align: center;">
       <ul id="ul2">
    <!-- The above height sets the height of the thumbnail gallery, default value 400px -->
        <li><img onmouseover="showPhoto2(0)" src=""></li>
        <li><img onmouseover="showPhoto2(1)" src=""></li>
        <li><img onmouseover="showPhoto2(2)" src=""></li>
        <li><img onmouseover="showPhoto2(3)" src=""></li>
        <li><img onmouseover="showPhoto2(4)" src=""></li>
        <li><img onmouseover="showPhoto2(5)" src=""></li>
        <li><img onmouseover="showPhoto2(6)" src=""></li>
        <li><img onmouseover="showPhoto2(7)" src=""></li>
        <li><img onmouseover="showPhoto2(8)" src=""></li>
        <li><img onmouseover="showPhoto2(9)" src=""></li>
       </ul>
      </td>
     </tr>
    </tbody>
    </table>
    
    <!-- Photo gallery End --> 
    
    <script language="JavaScript" type="text/javascript">
    function showPhoto1(num) { document.getElementById("photoexd1").src = imgList1[num]; }
    function showPhoto2(num) { document.getElementById("photoexd2").src = imgList2[num]; }
    
    window.onload = function() {
      var imgs = document.getElementById('ul1').getElementsByTagName('img');
      for (var i=0; i<imgs.length; i++) { imgs[i].src = imgList1[i]; }
      document.getElementById("photoexd1").src = imgList1[0];
    
          imgs = document.getElementById('ul2').getElementsByTagName('img');
      for (var i=0; i<imgs.length; i++) { imgs[i].src = imgList2[i]; }
      document.getElementById("photoexd2").src = imgList2[0];
    }
    </script>
    
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    eshezo (09-08-2013)

  • #4
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks jmrker

    This is almost perfect for what I need, I ran through the code because I actually need more than 2 galleries, that's fine I've already added additional ones.

    I would really like to control the size of the galleries, it is difficult when there are some different size pictures in one gallery and I don't want to re-size all the pictures.

    Is there an additional line I can add at the beginning of each gallery to restrain and fix the size regardless of the picture size ?

    rgds Esh

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Demo using your own images, split into two separate tables.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <style type="text/css">
    .photoTable { 
        margin: 0px auto; 
        padding: 10px 0px; 
        border: 1px solid rgb(153, 51, 51); 
        color: black;
        background-color: white;
    }
    .photoTable td {
        padding: 10px;
        text-align: center; 
        vertical-align: top;
    }
    .photoTable td.imageHolder {
        padding: 10px 5px 10px 10px; 
        width: 580px; 
    }
    .photoTable td.imageHolder div {
        margin: 0px auto;
    }
    .photoTable td.imageHolder div img {
        border: solid black 3px;
    }
    ul.thumbList {
        list-style: none; 
        margin: 0px; 
        padding: 0px; 
        border: 1px solid rgb(112, 112, 112); 
        width: 110px; 
        height: 700px; 
        overflow: auto;
    }
    ul.thumbList li {
        margin: 3px 0px;
    }
    ul.thumbList li img {
        width: 82px;
    }
    </style>
    </head>
    <body>
    <table class="photoTable" align="left">
    <tr>
        <td class="imageHolder">
            <div>
                 <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg">
            </div>
        </td>
        <td>
            <ul class="thumbList">
                <li><img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_028.jpg"></li>
                <li><img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023.jpg"></li>
                <li><img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%201/WP_20130823_023-small.jpg"></li>
            </ul>
        </td>
    </tr>
    </table>
    <table class="photoTable" align="right">
    <tr>
        <td class="imageHolder">
            <div>
                 <img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg">
            </div>
        </td>
        <td>
            <ul class="thumbList">
                <li><img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_034.jpg"></li>
                <li><img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_033.jpg"></li>
                <li><img src="http://i1132.photobucket.com/albums/m574/eshezo1/SCX%20600%202/WP_20130823_032.jpg"></li>
            </ul>
        </td>
    </tr>
    </table>
    <script type="text/javascript">
    var uls = document.getElementsByTagName("ul");
    for ( var u = 0; u < uls.length; ++u )
    {
        var ul = uls[u];
        if ( ul.className.indexOf("thumbList") >= 0 )
        {
            var lis = ul.getElementsByTagName("li");
            for ( var i = 0; i < lis.length; ++i )
            {
                lis[i].onmouseover = showPhoto;
            }
        }
    }
    
    function showPhoto( )
    {
        var node = this;
        while ( node.tagName != "TABLE" )
        {
            node = node.parentNode;
            if ( node == null ) return; // ??? impossible???
        }
        var mainimg = node.rows[0].cells[0].getElementsByTagName("img")[0];
        mainimg.src = this.getElementsByTagName("img")[0].src;
    }
    </script>
    </body>
    </html>
    To say all that inline style="..." could be improved is...well, an understatement.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    And to constrain the image sizes, just move your width from here
    Code:
    .photoTable td.imageHolder {
        padding: 10px 5px 10px 10px; 
        width: 580px; 
    }
    to here
    Code:
    .photoTable td.imageHolder div img {
        border: solid black 3px;
        width: 580px; 
    }
    or whatever you want the fixed width of the images to be.

    If you are worried that this might enlarge some images, then yes, you could use JS coding to resize them instead.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

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