By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,480 Members | 1,214 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,480 IT Pros & Developers. It's quick & easy.

Photo Gallery

P: n/a
Hi I am sorry and am new to javascript,

I am attempting to create a photo gallery.

As standard the a resized thumbnail on the left of the page has a url
to the main picture at the centre of the page.
At the moment each thumbnail links to a separate page with the correct
fullsize picture of the image.

I was wondering whether there was a way of clicking the thumbnail and
auto changing the url of the main image thus appearing to change the
page.
>From what I understand of javascript it preloads the images in this
instance, but due to the fact that the users will be using low speed
connections I was wondering whether there was any other way.

Sorry if this is ambiguous.

Regards
Kieran

Oct 23 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
KieranM wrote:
Hi I am sorry and am new to javascript,

I am attempting to create a photo gallery.

As standard the a resized thumbnail on the left of the page has a url
to the main picture at the centre of the page.
At the moment each thumbnail links to a separate page with the correct
fullsize picture of the image.

I was wondering whether there was a way of clicking the thumbnail and
auto changing the url of the main image thus appearing to change the
page.
From what I understand of javascript it preloads the images in this
instance, but due to the fact that the users will be using low speed
connections I was wondering whether there was any other way.
Hi,

I think this would be a very basic way to get the job done. It isn't
elegant but it might make sense and be good if you are just learning
JavaScript.

<img src="paris-thumb.jpg"
onclick="document.getElementById('big').src='paris .jpg';">
<img src="rome-thumb.jpg"
onclick="document.getElementById('big').src='rome. jpg';">

<img id="big" src="paris.jpg">

----

"JavaScript The Definitive Guide" by Flanagan is a good book.

Peter

Oct 23 '06 #2

P: n/a
Peter Michaux wrote:

"JavaScript The Definitive Guide" by Flanagan is a good book.
Oops! I need to be more careful. This is not necessarily a good book
according to everybody here. But it is the book recommended by this
group as a whole. It is on my desk all the time.

Peter

Oct 23 '06 #3

P: n/a
ASM
KieranM a écrit :
Hi I am sorry and am new to javascript,

I am attempting to create a photo gallery.

As standard the a resized thumbnail on the left of the page has a url
to the main picture at the centre of the page.
At the moment each thumbnail links to a separate page with the correct
fullsize picture of the image.

I was wondering whether there was a way of clicking the thumbnail and
auto changing the url of the main image thus appearing to change the
page.
You can do that with quite simple css ...
No JavaScript needed.
http://stephane.moriaux.perso.orange.../galerie_1.htm
without post nor pre loading big images
to get a new big image will need few moment !
>>From what I understand of javascript it preloads the images in this
instance, but due to the fact that the users will be using low speed
connections I was wondering whether there was any other way.
you can postlod images instead to preload them :-)

To do not wait too much you can have 3 thumbnails displayed at same
time, and javascript postloads the 3 big images and forth one to.
Sliding the 3 thumbnails to the 4th does postload fith big image.

Result :
when you click thumbnail, big image is ready and is displayed immediatly
http://stephane.moriaux.perso.orange...p_image_auto_4

Oct 24 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.