/    Sign up×
Community /Pin to ProfileBookmark

onclick swapPhoto – thumbnail into larger image

Copy linkTweet thisAlerts:
Feb 02.2006

I’m attempting to produce a gallery and i’ve come up with the following:

[url]http://www.woomcreative.com/gallery/woomgallery.htm[/url]

I’ve got so far and then tied myself in a knot. The problem is that I want to be able to click on the thumbnail image and the larger image to load on the right hand side. At the moment when i click on the thumbnail the image is loading on an external page.

Any assistance will be appreciated. I’m fairly new to Javascript but thought that this would be the easier option for setting up a gallery as in the future the page may contain a lot of images.

Thanks in advance!

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@CrazyMerlinFeb 02.2006 — [CODE]
function swapPhoto(photoSRC) {
document.images.imgPhoto.src = "gallery_images/";
scrollTo(0,0)
}
[/CODE]

should be:

[CODE]
function swapPhoto(photoSRC, title, author){
var obj = document.getElementById('mainPhoto');
var pTitle = document.getElementById('caption');
var pAuthor = document.getElementById('credit');
obj.setAttribute('src','gallery_images/' + photoSRC);
pTitle.firstChild.nodeValue = title;
pAuthor.firstChild.nodeValue = author;
}
[/CODE]

I couldn't find a function called scrollTo on your page so not sure what it was. You seem to be coding for IE though, as some of the javascript is IE based.

Learn about DOM (Document Object Model) and try to code for that style, that way your code will be more cross-browser, and less dependant.
Copy linkTweet thisAlerts:
@RedVirgoProjectauthorFeb 03.2006 — Thats great. Its works. Thankyou very much.

I will also take your advice and have a look into DOM.
×

Success!

Help @RedVirgoProject 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.18,
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,
)...