logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
Houseplants
Romance Movies
Creativity
Family Travel
Southwest USA
Irish Culture
Home Finance


dailyclick
All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g
g JavaScript / Java Site

BellaOnline's JavaScript / Java Editor

g

Minimalist JavaScript Slide Show

Guest Author - Julie L Baumler

A common fixture on websites is some sort of photo album or slide show. There are many sites that provide commercial photo sharing services, but sometimes you want to share photos on your own pages with your own look and feel. One of the problems with photos is that if you have a lot of photos they can take a long time to load and people don't necessarily want to wait to see them. If you have a lot of photos, any given user may not wish to see all of them or at least not wait a long time to see unknown images that may or may not interest them. A common solution is to build some sort of slide show or otherwise create a photo album where users initially see thumbnails and then are able to choose to see one or more images of their choice, or even all of them in order. Currently, Adobe Flash is a popular choice for such albums. Flash makes it easy to make very nice albums, but you have to own the software to build them and if the people looking at your website don't have Flash Player, rather than seeing your pictures they see a notice that they need to download Flash Player. Another option is to use JavaScript. This doesn't require any software on your end, and if your viewers don't have JavaScript available, they can still see the thumbnails and one large image of your choice.

A basic quick and dirty JavaScript photo album is very simple. It requires only creating HTML that displays your thumbnails and one larger image. To get your photo album working, you put an id attribute on the large image element so that you can use JavaScript to select it. Then you add an onClick attribute to each of your thumbnail images, to change the source of the large image to the full size version associated with that thumbnail.


<img src="simone_thumb.jpg" onClick='document.getElementById("largeImage").src="
simone.jpg"'/>
<img src="julie_thumb.jpg" onClick='document.getElementById("largeImage").src="j
ulie.jpg"/'>
<img id="largeImage" src="simone.jpg" width="544" height="408"
align="top" border="2"/>


You can view a working sample of this code here. For the code sample, I added the small refinement of using the script tag to print out the directions to click on a thumbnail to see the larger image and using the noscript tag to tell viewers how JavaScript is used on the page. There are many further refinements that could be added to make the page easier to setup and provide a better user experience.
This site needs an editor - click to learn more!

Add Minimalist+JavaScript+Slide+Show to Twitter Add Minimalist+JavaScript+Slide+Show to Facebook Add Minimalist+JavaScript+Slide+Show to MySpace Add Minimalist+JavaScript+Slide+Show to Del.icio.us Digg Minimalist+JavaScript+Slide+Show Add Minimalist+JavaScript+Slide+Show to Yahoo My Web Add Minimalist+JavaScript+Slide+Show to Google Bookmarks Add Minimalist+JavaScript+Slide+Show to Stumbleupon Add Minimalist+JavaScript+Slide+Show to Reddit




JavaScript Resources
Web Page Add Ons
User Interaction
RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map


For FREE email updates, subscribe to the JavaScript / Java Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Julie L Baumler. All rights reserved.
This content was written by Julie L Baumler. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
Hearing Dog Tool - Adding Randomness

Hearing Dog Training Tool setTimeout()

GCJ - an Independant Java Implementation

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor