/    Sign up×
Community /Pin to ProfileBookmark

Yet another thumbnail question

Copy linkTweet thisAlerts:
Oct 07.2006

Hi! Im new to Javascript and pretty much learning all by myself. I wanted a image gallery with ‘previous’ and ‘next’ buttons, I used [URL=http://www.htmlgoodies.com/beyond/javascript/article.php/3471341]this[/URL] htmlgoodies tutorial, it was easy and worked just fine. Now my client wants clickable thumbnails aside from the prev and next buttons. How can I add a thumbnail function to the script Im already working with?

Thanks!

to post a comment
JavaScript

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@konithomimoOct 07.2006 — I didnt take a look at the code you used, but here is a simple example of how to do what you want:

<html>
<head>
<script type="text/javascript">
var photos=new Array();
photos[0]="finish1.jpg";
photos[1]="finish2.jpg";
photos[2]="finish3.jpg";

var captions = new Array();
captions[0]="Finish 1";
captions[1]="Finish 2";
captions[2]="Finish 3";

function showPic(t,img)
{

var s = document.getElementById('imageplaceholder');
var sp = s.src.split('/');
var i, j;

if(t==0)
{
s.src=photos[0];
j=0;
}

else if(t==2)
{
s.src=photos[photos.length-1];
j=photos.length-1;
}

else
{
for(i=0;i<photos.length;i++)
{
j=i+t;

if(j==photos.length)
j=0;

if(j==-1)
j=photos.length-1;

if(sp[sp.length-1] == photos[i])
{
if(t==3)
{
s.src=photos[img];
j=img;
}

else
s.src = photos[j];

break;
}
}
}
document.getElementById('caption').firstChild.data=captions[j];
return true;
}
</script>
<style type="text/css">
#container {
width:100%;
height:100%;
}
#left {
float:left;
width:15%;
}
#mid {
width:25%;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<img src="finish1.jpg" onclick="showPic(3,0)" width=50 height=50><br>
<img src="finish2.jpg" onclick="showPic(3,1)" width=50 height=50><br>
<img src="finish3.jpg" onclick="showPic(3,2)" width=50 height=50><br>
</div>
<div id="mid" align="center">
<img src="finish1.jpg" id="imageplaceholder"><br>
<br>
<form>
<span id="caption">Finish 1</span><br><br>
<input type="button" value="Previous" onclick="showPic(-1,0)">
<input type="button" value="Next" onclick="showPic(1,0)">
<input type="button" value="First" onclick="showPic(0,0)">
<input type="button" value="Last" onclick="showPic(2,0)">
<br>
</form>
</div></div>
</html>
Copy linkTweet thisAlerts:
@marcia_99authorOct 08.2006 — wow konithomimo you code is so much more advanced than what I could come up with on my on! Ill give it a try, thank you for your help.
Copy linkTweet thisAlerts:
@konithomimoOct 08.2006 — no problem.
×

Success!

Help @marcia_99 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.17,
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,
)...