jsPictureShow – simple javascript pictureshow

jsPictureShow is a simple to use pictureshow written in javascript. actually there are a lot of pictureshows out there but I often needed really simple one as part of any website with fotos. this testpage should give you an idea about what it does.


There are a lot of possible solutions and it depends on your web what’s the best. I’m going to present 2 different, the first with all images loaded into layers, the second with only one image container changing the src tag with javascript.

layers

if you know about <div> tags in HTML it should be easy for you to incorporate your own pictures. just replace the the <div> attributes with your values setting the path to your pictures. it’s important that every <div> tag has a name=”foto” attribute because that’s the way javascript finds the fotos in the DOM tree. and it’s also important that the first <div> tag has the style set to “visibility: visible;” and all the following <div> tags “visibility: hidden;”.
Download a zipfile of that example.

src tag

This solution changes the src tag of the image container by modifying window.document.images[0].src per javascript.
Download a zipfile of that example.

note: photos taken from the great magnet collection of Angela Precht.

Tags: ,

Leave a Reply