www.webdeveloper.com
Results 1 to 7 of 7

Thread: Slideshow:get the title to change according to pic

Hybrid View

  1. #1
    Join Date
    Jan 2011
    Posts
    8

    Slideshow:get the title to change according to pic

    I have created a simple slideshow/ gallery.
    There are five small pictures with titles below the slideshow.

    How can I get the title box above the slide show to change according
    to the selected picture.

    Been playing with it but nothing seems to work.

    Any help will be much appreciated.


    HTML Code:
    <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 ){
    
       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];  
        }
    
    
    
    
    //-->
    </script>
    
    
    </head>
    
    <body>
    <center>
    <form name = "form_1" >
     <input type = "text" 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>
    <br>
    </form>
    </center>
    <hr>
    
    
    <center><table>
    <tr>
    <td><img src ="img1_S.jpg" onClick = "change_photos('0')"></td>
    <td><img src ="img2_S.jpg" onClick = "change_photos('1')"></td>
    <td><img src ="img3_S.jpg" onClick = "change_photos('2')"></td>
    <td><img src ="img4_S.jpg" onClick = "change_photos('3')"></td>
    <td><img src ="img5_S.jpg" 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>

  2. #2
    Join Date
    Dec 2010
    Posts
    63
    Why not follow your same logic and just pass the title along with your parameters?

    Code:
    function change_photos( op, title ){
    var headTitle = document.getElementById("mainTitle");
    headTitle.value = title;
    HTML Code:
    <input type = "text" id="mainTitle" name ="title" value ="LAX">
    HTML Code:
    <img src ="img1_S.jpg" title="LAX" onClick = "change_photos('0',title)">

  3. #3
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    I built a slideshow with text/caption function a long time ago; it would loop around (ie, if you are on the last image and click 'next', it would loop back to first image.)

    Unfortunately, I am not sitting at that computer, right now, or I'd post it for you.

    I'll try to remember to post it when I get home.

    ^_^

  4. #4
    Join Date
    Jan 2011
    Posts
    8

    Thanks!

    Thanks!

    When ever I click on a picture the sideshow changes to that picture along with the assigned title!

    However, when I use the "next" and "back" button the pic changes and the title says "undefined".

    I tried changing the button to the code below but instead of "undefined" just blank.

    HTML Code:
    <input type= "button" value= "Back" onClick = "change_photos('-1', title)">&nbsp;
    <input type= "button" value= "Next" onClick="change_photos('5', title)" ><br>
    Do I need to edit the function too? or am I way off?

  5. #5
    Join Date
    Dec 2010
    Posts
    63
    Code:
    <html>
    <head>
    <title>Gallery</title>
    
    <script type="text/javascript">
    
     var $ = function(id) { return document.getElementById(id); }
    
     var photos = document.getElementsByTagName("img");
     var current = 0;
     
     var change_photos = function(id,title) {
    	current = id;
    	$("mainImage").src = photos[current].src;
    	$("mainTitle").value = title;
     }
     
     var previousNext = function(id) {
    
    	switch (id) {
    		case -1:
    			if (current-1 < 1) {
    				current = 5;			
    			}
    			else {
    				current--;
    			}
    		$("mainImage").src = photos[current].src;
    		$("mainTitle").value = photos[current].title;
    		break;
    		case 5:
    			if (current+1 > 5) {
    				current = 1;
    			}
    			else {
    				current++;
    			}
    		$("mainImage").src = photos[current].src;
    		$("mainTitle").value = photos[current].title;
    		break;
    		default:
    		break;
    	}
     }
     
    
    </script>
    
    </head>
    
    <body>
    
    <center>
    <form name = "form_1" >
     <input type = "text" id="mainTitle" name ="title" value ="LAX"><br>
    <img id="mainImage" src = "img1_L.jpg">
    
    <br>
    
    <input type= "button" value= "Back" onclick = "previousNext(-1)">&nbsp;
    <input type= "button" value= "Next" onclick="previousNext(5)" ><br>
    <br>
    </form>
    </center>
    <hr>
    
    
    <center><table>
    <tr>
    <td><img src ="img1_S.jpg" title="LAX" onClick = "change_photos(1,title)"></td>
    <td><img src ="img2_S.jpg" title="Universal Studios" onClick = "change_photos(2,title)"></td>
    <td><img src ="img3_S.jpg" title="Parade" onClick = "change_photos(3,title)"></td>
    <td><img src ="img4_S.jpg" title="Golden Gate Bridge" onClick = "change_photos(4,title)"></td>
    <td><img src ="img5_S.jpg" title="Beach" onClick = "change_photos(5,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>

  6. #6
    Join Date
    Mar 2010
    Posts
    2,803
    This is another option without using inline javascript thus making your html a little cleaner by keeping the js completely separate from the html

    The 2D picData array stores the images paths and their coresponding titles. The javascript functions then assign the array data to the appropriate containers as required.

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title></title>
            <style type="text/css">
                img {
                    width: 150px;
                }
                #currPicCont {
                    width: 200px;
                    margin: 0px auto 0px auto;
                    padding: 0px 0px 0px 0px
                }
            </style>
            <script type="text/javascript">
            var picData = [
                ['pic1.jpg','pic1 title'],
                ['pic2.jpg','pic2 title'],
                ['pic3.jpg','pic3 title'],
                ['pic4.jpg','pic4 title'],
                ['pic5.jpg','pic5 title']
            ];
            //preload the images
            var picO = new Array();
            for(i=0; i < picData.length; i++){
                picO[i] = new Image();
                picO[i].src = picData[i][0];
            }
            var currPic = 0;
            window.onload=function(){
                 titleO = document.getElementById('titleContainer');
                 currImgO = document.getElementById('currPicCont').getElementsByTagName('img')[0];
                 thumbsO = document.getElementById('tblThumbs').getElementsByTagName('img');
                 thumbsTitleO = document.getElementById('tblThumbs').getElementsByTagName('div');
                 //assign the thumb images and titles to their containers and the thumb onclicks
                 for(i=0; i < picData.length; i++){
                     thumbsO[i].num = i;
                     thumbsO[i].src = picO[i].src;
                     thumbsTitleO[i].innerHTML = picData[i][1];
                     thumbsO[i].onclick=function(){
                         swapPhoto(this.num);
                     }
                 }
                 //assign the prev/next buttons onclicks
                 document.getElementById('btnPrev').onclick=function(){
                     prevNextPhoto(-1);
                 }
                 document.getElementById('btnNext').onclick=function(){
                     prevNextPhoto(1);
                 }
                 //display default "swap image" on page load
                 swapPhoto(currPic);
            }
            function swapPhoto(picNum) {
                currPic = picNum;
                currImgO.src = picO[currPic].src;
                titleO.innerHTML = picData[currPic][1];
            }
            function prevNextPhoto(dir) {
                currPic += dir;
                currPic = (currPic > picData.length-1)? 0 : currPic;
                currPic = (currPic < 0)? picData.length-1 : currPic;
                swapPhoto(currPic);
            }
            </script>
        </head>
        <body>
            <div id="currPicCont">
                <div id="titleContainer"></div>
                <img src="" alt="" />
                <div>
                    <button id="btnPrev">Previous</button>
                    <button id="btnNext">Next</button>
                </div>
            </div>
            <table id="tblThumbs" cellspacing="10">
                <tr>
                    <td>
                        <img src="" alt="" />
                        <div></div>
                    </td>
                    <td>
                        <img src="" alt="" />
                        <div></div>
                    </td><td>
                        <img src="" alt="" />
                        <div></div>
                    </td><td>
                        <img src="" alt="" />
                        <div></div>
                    </td><td>
                        <img src="" alt="" />
                        <div></div>
                    </td>
                </tr>
            </table>
        </body>
    </html>
    Last edited by tirna; 01-19-2011 at 04:05 AM.

  7. #7
    Join Date
    Jan 2011
    Posts
    8

    Thank YOU!

    It worked!

    Thanks for all your help!
    I appreciate it very much!

    THANKS AGAIN!

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