Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

thumbnails for slideshow 2

Status
Not open for further replies.
isilkin

isilkin

Technical User
Feb 12, 2008
27
US
For some reason my previous post was removed? Anyhow, I am a web designer and not a programmer but I am learning javascript.

So, if I am creating a slideshow with thumbnails, where when a user clicks on a thumbnail it displays a large image.

document.getelementbyid("thumbnail1").onclick = largeimage1

This code brings a large image for that particular thumbnail. So to bring a different image for another thumbnail I have to rewrite this code all over again.
But is there a way to write a universal code that no matter what thumbnail you click on it would bring the appropriate large image.
 
Sort by date Sort by votes
It depends on how your large images and thumbnails are related.

Your best bet would be to have a function run on page load that looked for a particular class attached to image objects and assigned the onclick handler accordingly.

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Webflo
 
Upvote 0 Downvote
Thank you for your reply here is my code. In HTML I have a table set up with different id's for each cell. And for an image I just have

<img src="" id="bigPic" />'

and here is my java script



window.onload = newShow;

var newThumbnail = new Array("thumbnails/1.jpg","thumbnails/2.jpg","thumbnails/3.jpg");
var bigSample = new Array("samples/1.jpg","samples/2.jpg","samples/3.jpg");



function newShow() {
for (var i=0; i<3; i++) {
setSquare(i);
}

}
function setSquare(thisSquare) {
var currSquare = "square" + thisSquare;

document.getElementById(currSquare).src = newThumbnail[thisSquare];

document.getElementById("square" + thisSquare).onclick = bigPicture;

}
function bigPicture(thisSquare) {
var currSquare2 = thisSquare;

var bigSample = new Array("samples/1.jpg","samples/2.jpg","samples/3.jpg");
document.getElementById("bigPic").src = bigSample[2];
}

 
Upvote 0 Downvote
I have kind of an idea what you're trying to do, but you're going to have to show us more of your HTML so we can see what is REALLY happening. Copy and paste your code into code tags.

You're assigning an object to the onclick event handler with your code, not calling a function (that incidentally requires a parameter passed). I think you'd be better off just making a function call to change the graphic in the HTML itself rather than trying the approach you're taking now.

Lee
 
Upvote 0 Downvote
<body>
<table>
<tr>
<td width="64"><img src="" width="64" height="64" id="square0"/></td>
<td width="64"><img src="" width="64" height="64" id="square1"/></td>
<td width="64"><img src="" width="64" height="64" id="square2"/></td>

</tr>
</table>
<img src="" id="bigPic" />
</body>

here is my HTML and thank you guys for your reply.
 
Upvote 0 Downvote
You probably want something like this.
Code: 
<script type="text/javascript">
//all your load script stuff here

var bigSample = new Array("samples/1.jpg","samples/2.jpg","samples/3.jpg");

function bigPicture(smallID)
{
var picindex = smallID.replace('square', '') * 1;
document.getElementById("bigPic").src = bigSample[picindex];
}
</script>

<td width="64"><img src="" width="64" height="64" id="square0" onclick="bigPicture(this.id);"/></td>
<td width="64"><img src="" width="64" height="64" id="square1" onclick="bigPicture(this.id);"/></td>
<td width="64"><img src="" width="64" height="64" id="square2" onclick="bigPicture(this.id);"/></td>

I certainly wouldn't load the image source via Javascript, and what you're doing is a roundabout way of doing things, or at least very contrived.

Lee
 
Upvote 0 Downvote
Thanks a lot "trollacious" for your wonderfull post. It works great. Though, I wonder if we can push this concept even further. For example, if you have a client who knows nothing about computers but he wants to update his Web site. And to do so all he needs to do is drop new images in a thumbnail folder and in large image folder and the script will take care of populating table rows and displaing large images. Is that possible?
 
Upvote 0 Downvote
Not with Javascript. But whichever server-side platform you base the site on should be able to handle it with relative ease.

Of course it may well be easier for you to implement one of the many excellent open-source content management systems for your client which have those sort of features as standard.

Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.
Webflo
 
Upvote 0 Downvote
You need to remember that the easier it is for someone like that to use, the more work it is for the developer to cover designing all the technicalities that the end user won't have to deal with. As dwarfthrower said, it's possible but much of what you ask will have to be done client-side.

Lee
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
504
Rayj0000
Rayj0000
michael12061206
  • Locked
  • Question
free javascript library for airliner diagrams
Replies
1
Views
143
xwb
xwb
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
158
chikwendu
chikwendu
James Mcgill
  • Locked
  • Question
Schema for a haikus
Replies
0
Views
103
James Mcgill
James Mcgill
mulawa1
  • Locked
  • Question
JavaScript game creation for beginners
Replies
3
Views
162
marcosuve
marcosuve

Part and Inventory Search

Sponsor

Back
Top