simple image selector

[Icy Penguin]

Hi all,
Just needing a simple script that will allow a user to click on an image, and have a corresponding image load in a different div. There are tons of these types of scripts, but you have to select the image from a list.
Like here (http://www.druiz.es/).
Where you can click the thumbnails, and a new image shows up )in the gallery section).
Also, if, for example, image #3 is shown, the thumbnail has that little gray dot underneath it to show which image is being shown.
If someone could point me in the right direction here, that'd be great ('cause I'm no good at Javascript).

Thanks!

[aldomatic]

Link (http://www.dynamicdrive.com/dynamicindex4/indexb.html)
;)

[bwh2]

yeah, that's just lightbox.

[Icy Penguin]

hmm...

that would work out for viewing the larger screenshot...

but i just want for someone to click on a numbered thumbnail and therefore changing an image in another div, i dont really need for someone to be able to view a larger screenshot

edit: never mind: i found a script down furtehr that should work.
edit again: why is it that the 'href="#"' always sends me to the top of my particular page when in the actual script page (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm) it doesnt?

thanks!

[Icy Penguin]

Would you guys know how to add img alts and titles for each image in there too?

RIght now I just put in variables so its constant for all the images.

And is there a way to have the first image automatically load into the div when the page loads?


/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["../../images/screenshots/mei-secondary-flash-one.jpg", "http://www.meisoc.com/flash1.html"]
dynimages[1]=["../../images/screenshots/mei-secondary-flash-two.jpg", "http://www.meisoc.com/flash1.html"]
dynimages[2]=["../../images/screenshots/mei-secondary-flash-three.jpg", "http://www.meisoc.com/flash1.html"]

//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget="_blank"

var imgalt="some screenshot"

var imgtitle="some title"

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(Gra dientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" alt="'+imgalt+'" title="'+imgtitle+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}


Thank you very much! :)

[Icy Penguin]

Never mind, figured it out. Here's the code for anyone else who wants to use it.


/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["../../images/screenshots/mei-secondary-flash-one.jpg", "http://www.meisoc.com/flash1.html", "Title Number One", "Alt Number One"]
dynimages[1]=["../../images/screenshots/mei-secondary-flash-two.jpg", "http://www.meisoc.com/flash1.html", "Title Number One", "Alt Number One"]
dynimages[2]=["../../images/screenshots/mei-secondary-flash-three.jpg", "http://www.meisoc.com/flash1.html", "Title Number One", "Alt Number One"]

//Preload images ("yes" or "no"):
var preloadimg="no"

//Set optional link target to be added to all images with a link:
var optlinktarget="_blank"

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(Gra dientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" alt="'+theimg[3]+'" title="'+theimg[2]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}