Jump to content
Sign in to follow this  

Lost A Script :(

Recommended Posts

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.



Share this post

Link to post
Share on other sites

If you are familiar with javascript you can just use the below script and modify as necessary:




<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()





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]!="")


return imghtml



function modifyimage(loadarea, imgindex){

if (document.getElementById){

var imgobj=document.getElementById(loadarea)

if (imgobj.filters && window.createPopup){





if (imgobj.filters && window.createPopup)


return false









<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>




The section within the body is where you specify how to set up the thumbnails to display the larger images.

Share this post

Link to post
Share on other sites

Nice work Jackie...


Hey, I haven't seen you around here before! Come around other parts of the Forums if you can!

Share this post

Link to post
Share on other sites

Just an FYI :) ... Jackie is a friend of my wife and me... She is a great lady!


Thanks Jax!


:D Welcome to the family!!! :dance:


Edited by TCH-Glenn

Share this post

Link to post
Share on other sites

:D Welcome to the family Jackie :dance:

Wow first post,

and helping out already.


way to go Thumbs Up


Looking forward to seeing here often. :)

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Create New...