ThumpAZ Posted February 19, 2004 Posted February 19, 2004 I have had this script for a while now, and now cannot find it. The action is for image galleries and loading them into a central screen on click What it is: open gallery in a page on the page, thumbnails are surrounding a central background type image when you click on the thumbnail, the image fades into the central image and fills that speace. Any help? I have seen it in some places, but cannot recall where either. ARRRGH!!! Quote
Jackie Posted February 20, 2004 Posted February 20, 2004 If you are familiar with javascript you can just use the below script and modify as necessary: <head> <script type="text/javascript"> //Specify image paths and optional link (set link to "" for no link): var dynimages=new Array() dynimages[0]=["photo1.jpg", "http://www."]'>http://www."]'>http://www."] dynimages[1]=["photo2.jpg", "http://www."] dynimages[2]=["photo3.jpg", "http://www."] //Preload images ("yes" or "no"): var preloadimg="no" //Set optional link target to be added to all images with a link: var optlinktarget="" //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(GradientSize=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+'">' 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 } } </script> </head> <body> <a href="#" onMouseover="modifyimage('dynloadarea', 0)">image 1 (onmouseover)</a><br> <a href="#" onMouseover="modifyimage('dynloadarea', 1)">image 2 (onmouseover)</a><br> <a href="#" onClick="return modifyimage('dynloadarea2', 2)">image 3 (onclick)</a><p> <div id="dynloadarea" style="width:80px;height:225px"></div> <div id="dynloadarea2" style="width:80px;height:200px"></div> </body> The section within the body is where you specify how to set up the thumbnails to display the larger images. Quote
DarqFlare Posted February 20, 2004 Posted February 20, 2004 Nice work Jackie... Hey, I haven't seen you around here before! Come around other parts of the Forums if you can! Quote
boxturt Posted February 20, 2004 Posted February 20, 2004 Hey, that's terrific! Nice work indeed Quote
ThumpAZ Posted February 20, 2004 Author Posted February 20, 2004 (edited) Just an FYI ... Jackie is a friend of my wife and me... She is a great lady! Thanks Jax! Welcome to the family!!! -GG Edited February 20, 2004 by TCH-Glenn Quote
TCH-Don Posted February 20, 2004 Posted February 20, 2004 Welcome to the family Jackie Wow first post, and helping out already. way to go Thumbs Up Looking forward to seeing here often. Quote
TCH-Bruce Posted February 20, 2004 Posted February 20, 2004 Welcome to the forums, Jackie! Excellent post! Thumbs Up Quote
Jackie Posted February 20, 2004 Posted February 20, 2004 Is this THE Jackie? Hahah yes "THE Jackie" Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.