Hi folks,

Does anyone know of a free javascript that would
do a clickable "slideshow" like the one on National
Geographics homepage
http://www.nationalgeographic.com/

It should work on major Windows browsers and preferable on
Macs as well.

The example on NG given is really polished and I could
use a simpler one if necessary.

Use jquery and the jquery tabs plugin

It's a bit bulky for what you need (in terms of initial download size) but runs beautifully.

Essentailly you have a list of links, which get turned into tabs and a series of divs (each with a picture in it).

Clicking on the 'tabs' shows/hides the relevant divs

Once you see how easy it all is, you may start using jquery all over the place

http://jquery.com/ [just undergone a bizarre redesign]
http://stilbuero.de/jquery/tabs_3/

tabs have now been integrated into the jquery user interface library [http://ui.jquery.com]

Thanks for the tip Northie.

I am not really that strong in javascript so I was hoping
for a ready script with detailed instructions.  Will have to
dig into Google tomorrow.

Look at these - very simple and configurable to a certain extent
http://www.airtightinteractive.com/viewers/

faf-andy wrote:

I am not really that strong in javascript so I was hoping for a ready script with detailed instructions.

How is this difficult?

$(function() {

     $('div#myPics').tabs();

});

//assuming jquery is linked to in a script tag

//assuming jquery tabs plugin is linked to in a script tag

//assuming tabs css has been included in either a link or style tag



<div id='myPics'>

     <ul>

          <li><a href='#pic1'>Pic 1</a></li>

          <li><a href='#pic2'>Pic 2</a></li>

          <li><a href='#pic3'>Pic 3</a></li>

          <li><a href='#pic4'>Pic 4</a></li>

     </ul>

     <div id='pic1'>

          <img src='pic1.jpg' />

     </div>

     <div id='pic2'>

          <img src='pic2.jpg' />

     </div>

     <div id='pic3'>

          <img src='pic3.jpg' />

     </div>

     <div id='pic4'>

          <img src='pic4.jpg' />

     </div>

</div>

 

I doubt you even bothered to research my reply - a simple, effective and incredibly powerful solution that requires almost no programming knowledge/skills

If you want things handed to you on a plate then go back to pre school

A year ago I couldn't program javascript. HTML/CSS and PHP/SQL were not a problem. Then i discovered jQuery. It made my life easier and after a couple of weeks I understood what javascript could and could not do, started to write native javascript and started to learn best practices - now i reckon i'm good enough to add it to my skill set. If you want to learn javascript then jquery is probably the best place to start