www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Picture Gallery Problem

Hybrid View

  1. #1
    Join Date
    Jan 2011
    Posts
    8

    resolved [RESOLVED] Picture Gallery Problem

    I've been working on photo gallery that can be seen here:

    http://soralinks.atspace.com/gallery/gallery.html

    I would like the title to change according to the picture selected.
    This works when you click on the thumbnail images.

    However, it current does not work with the drop-down menu, "back" and "next" buttons, or the automatic slide-show.

    Any help would be greatly appreciated.

    The current script can be found here:

    HTML Code:
    <html>
    <head>
    <title>Gallery</title>
    <script language ="JavaScript">
    <!--
    
     var photos = new Array(5);
     var p_no = 0;
    
         for ( i= 0; i <= 4; i++){
            no = i+1;
            photos[i] = "img"+( i+1) +"_L.jpg";
         }
    
    
      function change_photos( op, title ){
       var headTitle = document.getElementById("mainTitle");
       headTitle.value = title;
       
       switch ( op ){
         case -1:
           p_no--;
           break;
         case 5:
           p_no ++;
           break;
         default:
         p_no =op;
       }
    
       if ( p_no== 5){
           p_no =0;
       } else if ( p_no == -1){
          p_no = 4;
       }
    
       document.images[0].src= photos[p_no];  
        }
    
    
    
    
    function change_select(selectlist){
    (selectlist.value)
    }
    
    function auto(){
     p_no=++p_no%photos.length;
     change_photos(p_no, 'title' );
     to=setTimeout(function(){ auto(); },3000);
    }
    
    function pause(){
     clearTimeout(to);
    }
    
    
    function change_select(selectlist){
     (selectlist.value)
    }
    
    function w_open(){
    currentlrgimgTitle=document.getElementById("mainTitle").value;
    currentlrgimg=photos[p_no];
    
    jshtml="<html><head><title>"+currentlrgimgTitle+"</title></head><body><h1>"+currentlrgimgTitle+"</h1><img src='"+currentlrgimg+"'></body></html>";
    
    new_win=window.open("","","height=500,width=500 menubar=yes");
    new_win.document.write(jshtml);
    new_win.focus();
    new_win.document.close();
    }
    
    
    //-->
    </script>
    
    
    </head>
    
    <body>
    <center>
    <form name = "form_1" >
     <input type = "text" id="mainTitle" name ="title" value ="LAX"><br>
    <img src = "img1_L.jpg">
    
    <br>
    
    <input type= "button" value= "Back" onClick = "change_photos(-1)">&nbsp;
    <input type= "button" value= "Next" onClick="change_photos(5)" ><br>
    <select name="phot_select" size="1" onChange =" change_photos(this.value, title)">
       <option value="0" selected >LAX</option>
       <option value="1" >Universal Studios</option>
       <option value="2" >Parade</option>
       <option value="3">Bridge</option>
    
       <option value="4" >Beach</option>
    </select>
    <br>
    <input type="button" value="View in new window" onClick="w_open()" ><br>
    <input type="button" value="Start Slideshow" onmouseup="auto();" >&nbsp;<input type="button" value="Stop Slideshow" onmouseup="pause();" ><br>
    </form>
    </center>
    <hr>
    
    
    <center><table>
    <tr>
    <td><img src ="img1_S.jpg" title="LAX" onClick = "change_photos('0',title)"></td>
    <td><img src ="img2_S.jpg" title="Universal Studios" onClick = "change_photos('1',title)"></td>
    <td><img src ="img3_S.jpg" title="Parade" onClick = "change_photos('2',title)"></td>
    
    <td><img src ="img4_S.jpg" title="Bridge" onClick = "change_photos('3',title)"></td>
    <td><img src ="img5_S.jpg" title="Beach"  onClick = "change_photos('4',title)"></td></tr>
    
    <tr>
    
    <form name = "form_2">
    <td> <input type = "text" name ="titel1" value="LAX"        onChange = "change_photos('0')"></td>
    <td><input type = "text" name ="titel2" value="Universal Studios" onChange = "change_photos('1')"></td>
    <td> <input type = "text" name ="titel3" value="Parade"    onChange = "change_photos('2')" ></td>
    <td> <input type = "text" name ="titel4" value="Golden Gate Bridge"          onChange = "change_photos('3')"></td>
    <td> <input type = "text" name ="titel5" value="Beach"      onChange = "change_photos('4')"></td>
    </form>
    </table>
    
    </center>
    <br>
    <hr>
    <br>
    </body>
    </html>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,675
    Code:
    <html>
    <head>
    <title>Gallery</title>
    <script language ="JavaScript">
    <!--
     var to=null;
     var photos = new Array(5);
     var p_no = 0;
    
         for ( i= 0; i <= 4; i++){
            no = i+1;
            photos[i] = "http://soralinks.atspace.com/gallery/img"+( i+1) +"_L.jpg";
         }
    
    
      function change_photos( op, title ){
     pause();
       var headTitle = document.getElementById("mainTitle");
       headTitle.value = title;
    
       switch ( op ){
         case -1:
           p_no--;
           break;
         case 5:
           p_no ++;
           break;
         default:
         p_no =op;
       }
    
       if ( p_no== 5){
           p_no =0;
       } else if ( p_no == -1){
          p_no = 4;
       }
    
       document.images[0].src= photos[p_no];
        }
    
    
    
    
    function change_select(selectlist){
    (selectlist.value)
    }
    
    function auto(){
     pause();
     p_no=++p_no%photos.length;
     change_photos(p_no, 'title' );
     to=setTimeout(function(){ auto(); },3000);
    }
    
    function pause(){
     clearTimeout(to);
    }
    
    
    function change_select(selectlist){
     (selectlist.value)
    }
    
    function w_open(){
    currentlrgimgTitle=document.getElementById("mainTitle").value;
    currentlrgimg=photos[p_no];
    
    jshtml="<html><head><title>"+currentlrgimgTitle+"</title></head><body><h1>"+currentlrgimgTitle+"</h1><img src='"+currentlrgimg+"'></body></html>";
    
    new_win=window.open("","","height=500,width=500 menubar=yes");
    new_win.document.write(jshtml);
    new_win.focus();
    new_win.document.close();
    }
    
    
    //-->
    </script>
    
    
    </head>
    
    <body>
    <center>
    <form name = "form_1" >
     <input type = "text" id="mainTitle" name ="title" value ="LAX"><br>
    <img src = "http://soralinks.atspace.com/gallery/img1_L.jpg">
    
    <br>
    
    <input type= "button" value= "Back" onClick = "change_photos(-1)">&nbsp;
    <input type= "button" value= "Next" onClick="change_photos(5)" ><br>
    <select name="phot_select" size="1" onChange =" change_photos(this.value, title)">
       <option value="0" selected >LAX</option>
       <option value="1" >Universal Studios</option>
       <option value="2" >Parade</option>
       <option value="3">Bridge</option>
    
       <option value="4" >Beach</option>
    </select>
    <br>
    <input type="button" value="View in new window" onClick="w_open()" ><br>
    <input type="button" value="Start Slideshow" onmouseup="auto();" >&nbsp;<input type="button" value="Stop Slideshow" onmouseup="pause();" ><br>
    </form>
    </center>
    <hr>
    
    
    <center><table>
    <tr>
    <td><img src ="http://soralinks.atspace.com/gallery/img1_S.jpg" title="LAX" onClick = "change_photos('0',title)"></td>
    <td><img src ="http://soralinks.atspace.com/gallery/img2_S.jpg" title="Universal Studios" onClick = "change_photos('1',title)"></td>
    <td><img src ="http://soralinks.atspace.com/gallery/img3_S.jpg" title="Parade" onClick = "change_photos('2',title)"></td>
    
    <td><img src ="http://soralinks.atspace.com/gallery/img4_S.jpg" title="Bridge" onClick = "change_photos('3',title)"></td>
    <td><img src ="http://soralinks.atspace.com/gallery/img5_S.jpg" title="Beach"  onClick = "change_photos('4',title)"></td></tr>
    
    <tr>
    
    <form name = "form_2">
    <td> <input type = "text" name ="titel1" value="LAX"        onChange = "change_photos('0')"></td>
    <td><input type = "text" name ="titel2" value="Universal Studios" onChange = "change_photos('1')"></td>
    <td> <input type = "text" name ="titel3" value="Parade"    onChange = "change_photos('2')" ></td>
    <td> <input type = "text" name ="titel4" value="Golden Gate Bridge"          onChange = "change_photos('3')"></td>
    <td> <input type = "text" name ="titel5" value="Beach"      onChange = "change_photos('4')"></td>
    </form>
    </table>
    
    </center>
    <br>
    <hr>
    <br>
    </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
    Jan 2011
    Posts
    8
    Thanks VWPhillips for the reply.

    However, still...when using the the drop-down menu, "next" and "back" buttons, and automatic slide-show the title above the top main picture appears as "undefined", "title", or just plain doesn't appear at all.

    I have two sets of pictures "img1_S.jpg~img5_S.jpg" and "img1_L.jpg~img5_L.jpg"...

    How can I use the thumbnail images title, by keeping the thumbnail image in the EXACTLY the same order that the large images are stored in the photos Array, and use the index ref used to select large image, to also select the title of related thumbnail image, and tie them both together and use thumbnail title for large?

    Is this possible?

  4. #4
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,675
    Code:
    <html>
    <head>
    <title>Gallery</title>
    <script language ="JavaScript">
    <!--
     var to=null;
     var photos = new Array(5);
     var titles=['LAX','Universal Studios','Parade','Golden Gate Bridge','Beach'];
     var p_no = 0;
    
         for ( i= 0; i <= 4; i++){
            no = i+1;
            photos[i] = "http://soralinks.atspace.com/gallery/img"+( i+1) +"_L.jpg";
         }
    
    
      function change_photos(op ){
       pause();
       switch ( op ){
         case -1:
           p_no--;
           break;
         case 5:
           p_no ++;
           break;
         default:
         p_no =op;
       }
    
       if ( p_no== 5){
           p_no =0;
       } else if ( p_no == -1){
          p_no = 4;
       }
    
       document.getElementById("mainTitle").value = titles[p_no];
       document.images[0].src= photos[p_no];
        }
    
    
    
    
    function change_select(selectlist){
    (selectlist.value)
    }
    
    function auto(){
     pause();
     p_no=++p_no%photos.length;
     change_photos(p_no, 'title' );
     to=setTimeout(function(){ auto(); },3000);
    }
    
    function pause(){
     clearTimeout(to);
    }
    
    
    function change_select(selectlist){
     (selectlist.value)
    }
    
    function w_open(){
    currentlrgimgTitle=document.getElementById("mainTitle").value;
    currentlrgimg=photos[p_no];
    
    jshtml="<html><head><title>"+currentlrgimgTitle+"</title></head><body><h1>"+currentlrgimgTitle+"</h1><img src='"+currentlrgimg+"'></body></html>";
    
    new_win=window.open("","","height=500,width=500 menubar=yes");
    new_win.document.write(jshtml);
    new_win.focus();
    new_win.document.close();
    }
    
    
    //-->
    </script>
    
    
    </head>
    
    <body>
    <center>
    <form name = "form_1" >
     <input type = "text" id="mainTitle" name ="title" value ="LAX"><br>
    <img src = "http://soralinks.atspace.com/gallery/img1_L.jpg">
    
    <br>
    
    <input type= "button" value= "Back" onClick = "change_photos(-1)">&nbsp;
    <input type= "button" value= "Next" onClick="change_photos(5)" ><br>
    <select name="phot_select" size="1" onChange =" change_photos(this.value)">
       <option value="0" selected >LAX</option>
       <option value="1" >Universal Studios</option>
       <option value="2" >Parade</option>
       <option value="3">Bridge</option>
    
       <option value="4" >Beach</option>
    </select>
    <br>
    <input type="button" value="View in new window" onClick="w_open()" ><br>
    <input type="button" value="Start Slideshow" onmouseup="auto();" >&nbsp;<input type="button" value="Stop Slideshow" onmouseup="pause();" ><br>
    </form>
    </center>
    <hr>
    
    
    <center><table>
    <tr>
    <td><img src ="http://soralinks.atspace.com/gallery/img1_S.jpg" title="LAX" onClick = "change_photos('0')"></td>
    <td><img src ="http://soralinks.atspace.com/gallery/img2_S.jpg" title="Universal Studios" onClick = "change_photos('1')"></td>
    <td><img src ="http://soralinks.atspace.com/gallery/img3_S.jpg" title="Parade" onClick = "change_photos('2')"></td>
    
    <td><img src ="http://soralinks.atspace.com/gallery/img4_S.jpg" title="Bridge" onClick = "change_photos('3')"></td>
    <td><img src ="http://soralinks.atspace.com/gallery/img5_S.jpg" title="Beach"  onClick = "change_photos('4')"></td></tr>
    
    <tr>
    
    <form name = "form_2">
    <td> <input type = "text" name ="titel1" value="LAX"        onChange = "change_photos('0')"></td>
    <td><input type = "text" name ="titel2" value="Universal Studios" onChange = "change_photos('1')"></td>
    <td> <input type = "text" name ="titel3" value="Parade"    onChange = "change_photos('2')" ></td>
    <td> <input type = "text" name ="titel4" value="Golden Gate Bridge"          onChange = "change_photos('3')"></td>
    <td> <input type = "text" name ="titel5" value="Beach"      onChange = "change_photos('4')"></td>
    </form>
    </table>
    
    </center>
    <br>
    <hr>
    <br>
    </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/

  5. #5
    Join Date
    Jan 2011
    Posts
    8

    Thank you!!!

    One word...you're AWESOME!

    Thank you! Thank You! Thank You!!!!!!

    Thanks VWPHILLIPS!!!

Thread Information

Users Browsing this Thread

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

Tags for this Thread

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