/    Sign up×
Community /Pin to ProfileBookmark

picture gallery

Copy linkTweet thisAlerts:
Aug 03.2009

I’m going to use this nice picture gallery: [URL=”http://www.alistapart.com/articles/imagegallery/”]http://www.alistapart.com/articles/imagegallery/[/URL]

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

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@vwphillipsAug 03.2009 — [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>[/CODE]
×

Success!

Help @drhatt spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...