473,386 Members | 1,785 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Photo Gallery

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
3 1928
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: nick | last post by:
After spending many hours trying to find a simple looking, fast,dynamic php photo-gallery for my digital pictures, I decided to code a my own. Once installed, all you have to do is drop a new...
2
by: Daniel Kelly \(AKA Jack\) | last post by:
Hi! I'm searching for a Photo Gallery software package (like Coppermine and Gallery) that works, from the ground up, like a database-driven app. In other words, I want a gallery which entirely...
10
by: matt | last post by:
I have this code, works perfectly on Windows server, but now i'm trying to run it on a Linux server, the form submits, i get no errors, but the photo doesnt upload, and the caption file doesnt...
7
by: Eric Lindsay | last post by:
I would like to do a photo gallery with a liquid layout. I wanted to center a caption below each photo (or above each photo). I can do that easily with tables, but then I don't have a liquid...
1
by: desjardins.daniel | last post by:
Hi ! Excuse my english, i'm a french canadien... So here my message : I have put on my site a photo gallery and at the right a nav menu. This menu has a red dot visible want someone is passing...
13
by: Viken Karaguesian | last post by:
Hello everyone, Can anyone recommend a good online site to learn PHP? The W3Schools website is quite lacking - leaves much to be desired. I'm sure there are many places, but which ones are good?...
1
by: Throw | last post by:
G'day everyone I'm looking for a simple photo gallery script in PHP (or Perl), but not too simple. I have tried several photo gallery scripts in either language and I have found that they are...
1
by: cumupkid | last post by:
II am trying to create a form that will allow me to upload photos to a folder in the site root directory and add the information to the mysql db at the same time. I have created two forms, one...
1
by: popotz | last post by:
Hi..I really need a big help.. I was wondering how to make my own photo gallery for my own website. The photo must be uploaded first, and then it automaticly putted into the gallery..if we click...
0
nomad
by: nomad | last post by:
Hello Everyone. I founded an Flash and xml photo gallery. It works but I took it to another step What I want is to have six different galleries in one Flash file. I figure out how to do that but ...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.