www.webdeveloper.com
Results 1 to 2 of 2

Thread: picture gallery

  1. #1
    Join Date
    Nov 2008
    Posts
    20

    picture gallery

    I'm going to use this nice picture gallery: http://www.alistapart.com/articles/imagegallery/

    problem is, I might have 100 drawings so it would be nice to load 10 at once, then clicking a 'next' button would load the next 10 and so on.

    I could of course make the next' button open a new page, but then It would replace the current picture displayed with another picture.

    dr hatt

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,675
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    /*<![CDATA[*/
    
    function Batch(id,did){
     var uls=document.getElementById(id).getElementsByTagName('UL');
     this.uls=[];
     for (var lis,nu=1,z0=0;z0<uls.length;z0++){
      lis=uls[z0].getElementsByTagName('LI').length;
      this.uls.push([uls[z0],(nu)+' to ' +(nu+lis-1)]);
      nu+=lis;
      uls[z0].style.display=z0>0?'none':'block';
     }
     this.show=document.getElementById(did);
     this.nu=0;
     this.show.innerHTML=this.uls[this.nu][1];
    }
    
    Batch.prototype.Next=function(ud){
     this.uls[this.nu][0].style.display='none';
     this.nu=++this.nu%this.uls.length;
     this.show.innerHTML=this.uls[this.nu][1];
     this.uls[this.nu][0].style.display='block';
    }
    /*]]>*/
    </script></head>
    
    <body onload="B=new Batch('tst','tstd');" >
    <div id="tstd"></div><input type="button" name="" value="Next" onclick="B.Next();" />
    
    <div id="tst">
    <ul>
    <li><a onclick="return showPic(this)" href="images/bananas.jpg" title="A bunch of bananas on a table">some bananas</a></li>
    <li><a onclick="return showPic(this)" href="images/condiments.jpg" title="Condiments in a Chinese restaurant">two bottles</a></li>
    <li><a onclick="return showPic(this)" href="images/shells.jpg" title="Seashells on a table">some shells</a></li>
    </ul>
    <ul>
    <li><a onclick="return showPic(this)" href="images/bananas.jpg" title="A bunch of bananas on a table">some bananas 2</a></li>
    <li><a onclick="return showPic(this)" href="images/condiments.jpg" title="Condiments in a Chinese restaurant">two bottles 2</a></li>
    <li><a onclick="return showPic(this)" href="images/shells.jpg" title="Seashells on a table">some shells 2</a></li>
    <li><a onclick="return showPic(this)" href="images/shells.jpg" title="Seashells on a table">some toms 2</a></li>
    </ul>
    <ul>
    <li><a onclick="return showPic(this)" href="images/bananas.jpg" title="A bunch of bananas on a table">some bananas3</a></li>
    <li><a onclick="return showPic(this)" href="images/condiments.jpg" title="Condiments in a Chinese restaurant">two bottles3</a></li>
    <li><a onclick="return showPic(this)" href="images/shells.jpg" title="Seashells on a table">some shells3</a></li>
    </ul>
    </div>
    </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/

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