Results 1 to 3 of 3

Thread: javascript photo gallery how to add back and forward buttons

  1. #1
    Join Date
    Apr 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default javascript photo gallery how to add back and forward buttons

    Hi I have a photo gallery which at the moment has numbered links to the photos but now I would like to add next and previous buttons to the images...
    any help would be appreciated here is my page.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    
    
    
    <head>
    
    <title>:: my gallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link rel="stylesheet" type="text/css" href="../css/gallery.css">
    <script  type="text/javascript">
    // Gallery script.
    // With image cross fade effect for those browsers that support it.
    // Script copyright (C) 2004 www.cryer.co.uk.
    // Script is free to use provided this copyright header is included.
    function LoadGallery(pictureName,imageFile,titleCaption,captionText)
    {
      var picture = document.getElementById(pictureName);
      if (picture.filters)
      {
        picture.style.filter="blendTrans(duration=1)";
        picture.filters.blendTrans.Apply();
      }
      picture.src = imageFile;
      if (picture.filters)
      {
        picture.filters.blendTrans.Play();
      }
      document.getElementById(titleCaption).innerHTML=captionText;
    }
    </script>
    
    
    
    
    
    <script type="text/JavaScript">
    function activate(link){
    if(document.getElementById)
    document.getElementById(link).focus();
    else if (document.all)
    document.all(link).focus();
    }
    </script>
    
    
    
    
    
    </head>
    
    
    
    
    <body onload="activate('act');">
    
       <!-- Begin Wrapper -->
    <div id="wrapper">
       
    
    		 
    		 <!-- Begin Left Column -->
                  <div id="topbar" class="center"><a href="1.jpg">Pop Music Quiz - Esquire (UK)
    							</a> </div>
                 
              
              
    <div id="content_holder">
    
         
        <div id="content_box2"><img src="../images/Portraits/1.jpg" alt="Photo gallery" name="portraits1" width="666" height="450" id="portraits1">    </div>
       
    		
    	<div id="footer" align="center">
        
          <a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/1.jpg','topbar','Pop Music Quiz - Esquire (UK)')">1</a> 
        - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/2.jpg','topbar','Ronnie Wood - Personal')">2</a> 
         - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/3.jpg','topbar','Denys Lasdun - Guardian Review')">3</a>
         - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/4.jpg','topbar','Sam West - Guardian Review')">4</a>
           - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/5.jpg','topbar','Alan Lamb - Brown Shipley Bank ')">5</a>
            - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/6.jpg','topbar','Tony Blair V’s Gordon Brown - FT ')">6</a>
             - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/7.jpg','topbar','Bruce Willis - Times Eye')">7</a>
              - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/8.jpg','topbar','The Thick Of It - Guardian Guide')">8</a>
               - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/9.jpg','topbar','President Mugabe - Personal')">9</a>
                - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/10.jpg','topbar','Conrad Black - FT')">10</a>
                 - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/11.jpg','topbar','Ricardo Mutti - Independent')">11</a>
                  - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/12.jpg','topbar','Gordon Brown and Alistair Darling - GQ')">12</a>
                   - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/13.jpg','topbar','Mickey Rourke - Jack')">13</a>
                    - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/14.jpg','topbar','Brits and Germans - Legal Business')">14</a>
                     - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/15.jpg','topbar','Orphan Pamuk - Guardian Guide')">15</a>
                      - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/16.jpg','topbar','Jude Law - Independent ')">16</a>
                       - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/17.jpg','topbar','Yasser Arafat - Personal')">17</a>
                        - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/18.jpg','topbar','Graham Greene - Guardian Review ')">18</a
                        > - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/19.jpg','topbar','Russian Presidents - FT')">19</a>
         - <a href="#_self" onclick="LoadGallery('portraits1','../images/Portraits/20.jpg','topbar','Wacko Jacko - Personal')">20</a>&nbsp;&nbsp;&nbsp;<a href="../../index.html" target="_parent">[ home ]</a></div>	  
    		     
    		 
      </div>
    
    
    		 
       </div>
       <!-- End Wrapper -->
       
    </body>
    </html>
    Last edited by jscheuer1; 11-10-2012 at 08:15 AM. Reason: Format

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,069
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,807
    Thanks
    2
    Thanked 423 Times in 417 Posts

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML>
    
    
    
    <head>
    
    <title>:: my gallery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <link rel="stylesheet" type="text/css" href="../css/gallery.css">
    <script  type="text/javascript">
    // Gallery script.
    // With image cross fade effect for those browsers that support it.
    // Script copyright (C) 2004 www.cryer.co.uk.
    // Script is free to use provided this copyright header is included.
    var myary=[
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg','Pop Music Quiz - Esquire (UK)'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg','Ronnie Wood - Personal'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg','Denys Lasdun - Guardian Review'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg','Sam West - Guardian Review'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg','Pop Music Quiz - Esquire (UK)'],
    ['http://www.vicsjavascripts.org.uk/StdImages/Egypt10.jpg','Alan Lamb - Brown Shipley Bank']
    ];
    
    function LoadGallery(pictureName,titleCaption,ary,nu)
    {
      var picture = document.getElementById(pictureName);
      if (picture.filters)
      {
        picture.style.filter="blendTrans(duration=1)";
        picture.filters.blendTrans.Apply();
      }
      picture.src = ary[nu][0];
      if (picture.filters)
      {
        picture.filters.blendTrans.Play();
      }
      document.getElementById(titleCaption).innerHTML=ary[nu][1];
      picture.nu=nu;
    }
    
    function LoadGalleryNext(pictureName,titleCaption,ary,ud){
     var picture = document.getElementById(pictureName),nu=(picture.nu||0)+(typeof(ud)=='number'&&ud<0?-1:1),nu=nu<0?ary.length-1:nu>ary.length-1?0:nu;
     LoadGallery(pictureName,titleCaption,ary,nu);
    }
    
    </script>
    
    
    
    
    
    <script type="text/JavaScript">
    function activate(link){
    if(document.getElementById)
    document.getElementById(link).focus();
    else if (document.all)
    document.all(link).focus();
    }
    </script>
    
    
    
    
    
    </head>
    
    
    
    
    <body onload="activate('act');">
    
       <!-- Begin Wrapper -->
    <div id="wrapper">
    
    
    
    		 <!-- Begin Left Column -->
                  <div id="topbar" class="center"><a href="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg">Pop Music Quiz - Esquire (UK)
    							</a> </div>
    
    
    
    <div id="content_holder">
    
    
        <div id="content_box2"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="Photo gallery" name="portraits1" width="666" height="450" id="portraits1">    </div>
    
    
    	<div id="footer" align="center">
    
          <a id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''" href="#_self" onclick="LoadGallery('portraits1','topbar',myary,0);">1</a>
        - <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,1)">2</a>
         - <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,2)">3</a>
         - <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,3)">4</a>
           - <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,4)">5</a>
            - <a href="#_self" onclick="LoadGallery('portraits1','topbar',myary,5)">6</a>
      <br>
      <input type="button" name="" value="Next" onmouseup="LoadGalleryNext('portraits1','topbar',myary,1)">
      <input type="button" name="" value="Back" onmouseup="LoadGalleryNext('portraits1','topbar',myary,-1)">
    
      </div>
    
       </div>
       <!-- End Wrapper -->
    
    </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/

Bookmarks

Posting Permissions

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