asked on
Building an image gallery menu system
I am wanting to build an image gallery in which I have a main large image and the image details below it; title, date, price etc. To the right I wish to have a meun from which the user can roll over each number in the menu. On mouse over a small image of that item will appear, say at the top of the column. If the user clicks the menu number that image and its details will appear in place of the main large image to the left.
Can anyone point me to some links on creating this type of menu system or have some sample code.
I have been playing with this below but cannot get it to work:
var galleryarray=new Array()
galleryarray[<%=counter%>]
function buildimage(i){
var tempcontainer=galleryarray
tempcontainer+='<img src="'+galleryarray[i][0]+
tempcontainer=galleryarray
return tempcontainer
}
Can anyone point me to some links on creating this type of menu system or have some sample code.
I have been playing with this below but cannot get it to work:
var galleryarray=new Array()
galleryarray[<%=counter%>]
function buildimage(i){
var tempcontainer=galleryarray
tempcontainer+='<img src="'+galleryarray[i][0]+
tempcontainer=galleryarray
return tempcontainer
}
Scripting LanguagesJavaScript
Last Comment
landship
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Thanks but can you see what I am trying to do with the code I supplied, as want to understand what I have started, thanks for help.
ASKER
Ok I have had a look at the link you provided and I like it but do not know how to include the jsscript file into my .asp page could you help?
the script is saved in http://slayeroffice.com/code/slide_show/slide_show.js Just copy and past it into your own javascript file.
Also add the styles saved in http://slayeroffice.com/code/slide_show/slide_show.css
Then you add your images like this:
<div id="mContainer">
<div id="imageDestination"> </div>
<div id="imageContainer">
<img id="image0" src="image1.gif" alt="Evil green bug." title="Evil green bug." width="32" height="32" />
</div>
<div id="caption"></div>
</div>
The javascript does all the work putting together the slide show, and the alt atribute is what gets displayed in the caption (you could add html tags to the alt atribute to style it).
Also add the styles saved in http://slayeroffice.com/code/slide_show/slide_show.css
Then you add your images like this:
<div id="mContainer">
<div id="imageDestination"> </div>
<div id="imageContainer">
<img id="image0" src="image1.gif" alt="Evil green bug." title="Evil green bug." width="32" height="32" />
</div>
<div id="caption"></div>
</div>
The javascript does all the work putting together the slide show, and the alt atribute is what gets displayed in the caption (you could add html tags to the alt atribute to style it).
ASKER
The slideshow code is below, please can you indicate exactly where I add the code you supplied to add my images, sorry new to this, thanks:
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<%
var window
window.onload = init;
var d=document;
var zInterval=null;
var imageCoordinates = new Array(); // array to hold the x,y of each image
var imageObjects = new Array(); // object reference array to the images
var imageDimensions = new Array(); // array to hold the current width and height of the images
var imageStart = new Array(); // the original x/y positions of each image
var imageCourse = new Array(); // the x/y coordinates the image must travel to get from point A to point B
var currentOpacity = new Array(); // current transparency of the image
var activeImage=-1; // index of the currently active image
var prevImage=-1; // index of the formerly active image
var animationIndex = new Array(); // keeps track of where we need to be in the imageCourse array for each animation loop
var movementSteps = new Array(); // the width and height increments required for each image to resize by while moving
var useOpacity=1; // boolean to denote use of opacity filters
var iSpeed=6; // the rate at which we step through the imageCourse array
var isAnimated=0; // stops additional threads from running if one already is.
var TOTAL_IMAGES=10; // the total number of images
var IMAGES_PER_ROW=2; // how many images per row
var IMAGE_MIN_SIZE=32; // the minimum size of the thumbnails
var IMAGE_MAX_WIDTH=250; // max width of the enlarged images
var IMAGE_MAX_HEIGHT=155; // max height of the enlarged images
var IMAGE_SPACING=5; // spacing between the thumbnails
var DEST_Y=100; // the y position of where the animation stops
var DEST_X=200; // the x position of where the animation stops
var DEFAULT_CAPTION="Select a thumbnail to see a larger version of the image."
function init() {
if(!document.getElementByI
initThumbnails(); // initialize the thumbnail images
initCourse(); // initialize the x/y courses the images will need to travel
initSteps(); // intialize the step increments for the width and height changes
}
function initThumbnails() {
x=0; y=0; i=0; z=0;
// set the default caption up
d.getElementById("caption"
// loop over how many images we have to deal with
while(i<TOTAL_IMAGES) {
// create an object reference variable to the image
if(!imageObjects[i])imageO
// set the top and left of the image
imageObjects[i].style.left
imageObjects[i].style.top = y + "px";
// set up the bogus "xid" attribute to ID the images when they are clicked on
imageObjects[i].xid=i;
// set up the onclick event
imageObjects[i].onclick=fu
// set up the imageStart array for this image
if(!imageStart[i])imageSta
// increment the x coordinate for the next image
x+=IMAGE_MIN_SIZE+IMAGE_SP
// set up the coordinates for this image
imageCoordinates[i]=new Array(x,y);
// and its initial width
imageDimensions[i] = new Array(32,32);
// and it initial opacity. MSIE takes 0-100 values for opacity. All others take floating points.
currentOpacity[i]=document
// set the animationIndex for this image to 0
animationIndex[i]=0;
// if we've got as many images in the row as we want, start the next row
z++;
if(z>=IMAGES_PER_ROW) {
x=0; z=0;
y+=IMAGE_MIN_SIZE+IMAGE_SP
}
i++;
}
}
function initCourse() {
// initialize the imageCourse array for each image
for(i=0;i<imageStart.lengt
}
function initSteps() {
// initialize the step increments for the width and height changes.
for(i=0;i<imageCourse.leng
wStep = Math.round(imageCourse[i].
wStep = Math.round(250/wStep);
hStep = Math.round(imageCourse[i].
hStep = Math.round(155/hStep);
movementSteps[i]=new Array(wStep,hStep);
}
}
function animate(index) {
// exit out of the function if there is already an animation thread running
if(zInterval)return;
// no current active image. that means either a single image is returning (no overlap) or we're running for the first time
// make prevImage -1 so we dont run any animation loops we dont need to.
if(activeImage==-1)prevIma
if(index==activeImage) {
// the user has clicked on the enlarged image. set prevImage to activeImage and set activeImage to -1
prevImage=activeImage;
imageObjects[activeImage].
activeImage=-1;
} else {
// set up the previous image so we know which to send back and where to send it.
if(activeImage>-1)prevImag
activeImage=index;
imageObjects[activeImage].
if(prevImage>-1)imageObjec
}
// begin the animation thread
zInterval = setInterval("slideImage()"
}
function setImagePosition(index) {
// set the positions and width of the images. These can fall out of range, hence the try/catch statement
try {
imageObjects[index].style.
imageObjects[index].style.
imageObjects[index].style.
imageObjects[index].style.
} catch(err) { }
}
function setImageOpacity(index) {
// set the opacity of the object. Once for Gecko, once for Safari and once for MSIE.
if(!useOpacity)return;
imageObjects[index].style.
imageObjects[index].style.
imageObjects[index].style.
}
function slideImage() {
// if we have an active image, meaning the one that is being enlarged...
if(activeImage>-1) {
// set up its width,height,top and left
setImagePosition(activeIma
// set up its opacity
currentOpacity[activeImage
setImageOpacity(activeImag
// if its width is less than 250, increase it. likewise with its height
if(imageDimensions[activeI
if(imageDimensions[activeI
// increment our current index for imageCourse by value of iSpeed
animationIndex[activeImage
}
// do the same as above for images returning to thumbnail size, only decrementing values this time
if(prevImage>-1) {
setImagePosition(prevImage
currentOpacity[prevImage]-
setImageOpacity(prevImage)
if(imageDimensions[prevIma
if(imageDimensions[prevIma
animationIndex[prevImage]-
}
// has our animation finished?
if(isFinished()) {
// if activeImage is -1, we have no enlarged image. reset the animation index and put the default caption back in.
if(activeImage==-1) {
d.getElementById("caption"
animationIndex[prevImage]=
}
// we've got an active image.
if(activeImage>-1) {
// set the animation index to the length of imageCourse so we can start at the end of that array
// for when this image becomes a thumbnail again
animationIndex[activeImage
// set the final top,left,width and height of the image, just in case they're off
imageObjects[activeImage].
imageObjects[activeImage].
imageObjects[activeImage].
imageObjects[activeImage].
// set up the final opacity of the image if useOpacity is true
if(useOpacity) {
imageObjects[activeImage].
imageObjects[activeImage].
imageObjects[activeImage].
}
d.getElementById("caption"
}
// do the same for the thumbnail image.
if(prevImage>-1) {
animationIndex[prevImage]=
imageObjects[prevImage].st
imageObjects[prevImage].st
imageObjects[prevImage].st
imageObjects[prevImage].st
if(useOpacity) {
imageObjects[prevImage].st
imageObjects[prevImage].st
imageObjects[prevImage].st
}
}
// stop the animation thread
clearInterval(zInterval);
zInterval=null;
}
}
// checks to see if the thumbnail and enlarged image are at their final positions
// by checking the animationIndex value against the length of the images imageCourse array.
function isFinished() {
if(activeImage>-1 && prevImage>-1)if(animationI
if(activeImage>-1 && prevImage==-1) if(animationIndex[activeIm
if(activeImage==-1 && prevImage>-1) if(animationIndex[prevImag
return false;
}
// this function simply resets the opacity of the objects when the check box is clicked.
function disableOpacity(bool) {
if(bool) {
useOpacity=0;
for(i=0;i<imageObjects.len
imageObjects[i].style.MozO
imageObjects[i].style.opac
imageObjects[i].style.filt
}
} else {
location.reload();
}
}
// this function calculates the required coordinates to go from point A to point B and returns them as an array.
// originally written by Dean Taylor for Web Paint's line functions (slayeroffice.com/tools/we
// also used in Missile Command (slayeroffice.com/arcade/m
function plotCourse(fX,fY,oX,oY) {
dx = Math.abs(fX-oX);
dy = Math.abs(fY-oY);
max = dx > dy ? dx : dy;
x_inc = dx / max;
y_inc = dy / max;
Xp = oX
Yp = oY;
path = new Array();
pathCount = 0;
if(fX>oX && fY > oY) {
if(oX<fX && oY<fY) {
while (Xp < fX) {
nextX = Math.round(Xp);
nextY = Math.round(Yp);
path[pathCount] = new Array(nextX,nextY);
pathCount++;
Xp += x_inc;
Yp += y_inc;
}
} else {
while (Xp > fX) {
nextX = Math.round(Xp);
nextY = Math.round(Yp);
path[pathCount] = new Array(nextX,nextY);
pathCount++;
Xp -= x_inc;
Yp += y_inc;
}
}
} else {
if(oX<fX && oY>fY) {
while (Xp < fX) {
nextX = Math.round(Xp);
nextY = Math.round(Yp);
path[pathCount] = new Array(nextX,nextY);
pathCount++;
Xp += x_inc;
Yp -= y_inc;
}
} else {
while (Xp > fX) {
nextX = Math.round(Xp);
nextY = Math.round(Yp);
path[pathCount] = new Array(nextX,nextY);
pathCount++;
Xp -= x_inc;
Yp -= y_inc;
}
}
}
return path;
}
%>
</head>
<body>
test code
</body>
</html>
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<%
var window
window.onload = init;
var d=document;
var zInterval=null;
var imageCoordinates = new Array(); // array to hold the x,y of each image
var imageObjects = new Array(); // object reference array to the images
var imageDimensions = new Array(); // array to hold the current width and height of the images
var imageStart = new Array(); // the original x/y positions of each image
var imageCourse = new Array(); // the x/y coordinates the image must travel to get from point A to point B
var currentOpacity = new Array(); // current transparency of the image
var activeImage=-1; // index of the currently active image
var prevImage=-1; // index of the formerly active image
var animationIndex = new Array(); // keeps track of where we need to be in the imageCourse array for each animation loop
var movementSteps = new Array(); // the width and height increments required for each image to resize by while moving
var useOpacity=1; // boolean to denote use of opacity filters
var iSpeed=6; // the rate at which we step through the imageCourse array
var isAnimated=0; // stops additional threads from running if one already is.
var TOTAL_IMAGES=10; // the total number of images
var IMAGES_PER_ROW=2; // how many images per row
var IMAGE_MIN_SIZE=32; // the minimum size of the thumbnails
var IMAGE_MAX_WIDTH=250; // max width of the enlarged images
var IMAGE_MAX_HEIGHT=155; // max height of the enlarged images
var IMAGE_SPACING=5; // spacing between the thumbnails
var DEST_Y=100; // the y position of where the animation stops
var DEST_X=200; // the x position of where the animation stops
var DEFAULT_CAPTION="Select a thumbnail to see a larger version of the image."
function init() {
if(!document.getElementByI
initThumbnails(); // initialize the thumbnail images
initCourse(); // initialize the x/y courses the images will need to travel
initSteps(); // intialize the step increments for the width and height changes
}
function initThumbnails() {
x=0; y=0; i=0; z=0;
// set the default caption up
d.getElementById("caption"
// loop over how many images we have to deal with
while(i<TOTAL_IMAGES) {
// create an object reference variable to the image
if(!imageObjects[i])imageO
// set the top and left of the image
imageObjects[i].style.left
imageObjects[i].style.top = y + "px";
// set up the bogus "xid" attribute to ID the images when they are clicked on
imageObjects[i].xid=i;
// set up the onclick event
imageObjects[i].onclick=fu
// set up the imageStart array for this image
if(!imageStart[i])imageSta
// increment the x coordinate for the next image
x+=IMAGE_MIN_SIZE+IMAGE_SP
// set up the coordinates for this image
imageCoordinates[i]=new Array(x,y);
// and its initial width
imageDimensions[i] = new Array(32,32);
// and it initial opacity. MSIE takes 0-100 values for opacity. All others take floating points.
currentOpacity[i]=document
// set the animationIndex for this image to 0
animationIndex[i]=0;
// if we've got as many images in the row as we want, start the next row
z++;
if(z>=IMAGES_PER_ROW) {
x=0; z=0;
y+=IMAGE_MIN_SIZE+IMAGE_SP
}
i++;
}
}
function initCourse() {
// initialize the imageCourse array for each image
for(i=0;i<imageStart.lengt
}
function initSteps() {
// initialize the step increments for the width and height changes.
for(i=0;i<imageCourse.leng
wStep = Math.round(imageCourse[i].
wStep = Math.round(250/wStep);
hStep = Math.round(imageCourse[i].
hStep = Math.round(155/hStep);
movementSteps[i]=new Array(wStep,hStep);
}
}
function animate(index) {
// exit out of the function if there is already an animation thread running
if(zInterval)return;
// no current active image. that means either a single image is returning (no overlap) or we're running for the first time
// make prevImage -1 so we dont run any animation loops we dont need to.
if(activeImage==-1)prevIma
if(index==activeImage) {
// the user has clicked on the enlarged image. set prevImage to activeImage and set activeImage to -1
prevImage=activeImage;
imageObjects[activeImage].
activeImage=-1;
} else {
// set up the previous image so we know which to send back and where to send it.
if(activeImage>-1)prevImag
activeImage=index;
imageObjects[activeImage].
if(prevImage>-1)imageObjec
}
// begin the animation thread
zInterval = setInterval("slideImage()"
}
function setImagePosition(index) {
// set the positions and width of the images. These can fall out of range, hence the try/catch statement
try {
imageObjects[index].style.
imageObjects[index].style.
imageObjects[index].style.
imageObjects[index].style.
} catch(err) { }
}
function setImageOpacity(index) {
// set the opacity of the object. Once for Gecko, once for Safari and once for MSIE.
if(!useOpacity)return;
imageObjects[index].style.
imageObjects[index].style.
imageObjects[index].style.
}
function slideImage() {
// if we have an active image, meaning the one that is being enlarged...
if(activeImage>-1) {
// set up its width,height,top and left
setImagePosition(activeIma
// set up its opacity
currentOpacity[activeImage
setImageOpacity(activeImag
// if its width is less than 250, increase it. likewise with its height
if(imageDimensions[activeI
if(imageDimensions[activeI
// increment our current index for imageCourse by value of iSpeed
animationIndex[activeImage
}
// do the same as above for images returning to thumbnail size, only decrementing values this time
if(prevImage>-1) {
setImagePosition(prevImage
currentOpacity[prevImage]-
setImageOpacity(prevImage)
if(imageDimensions[prevIma
if(imageDimensions[prevIma
animationIndex[prevImage]-
}
// has our animation finished?
if(isFinished()) {
// if activeImage is -1, we have no enlarged image. reset the animation index and put the default caption back in.
if(activeImage==-1) {
d.getElementById("caption"
animationIndex[prevImage]=
}
// we've got an active image.
if(activeImage>-1) {
// set the animation index to the length of imageCourse so we can start at the end of that array
// for when this image becomes a thumbnail again
animationIndex[activeImage
// set the final top,left,width and height of the image, just in case they're off
imageObjects[activeImage].
imageObjects[activeImage].
imageObjects[activeImage].
imageObjects[activeImage].
// set up the final opacity of the image if useOpacity is true
if(useOpacity) {
imageObjects[activeImage].
imageObjects[activeImage].
imageObjects[activeImage].
}
d.getElementById("caption"
}
// do the same for the thumbnail image.
if(prevImage>-1) {
animationIndex[prevImage]=
imageObjects[prevImage].st
imageObjects[prevImage].st
imageObjects[prevImage].st
imageObjects[prevImage].st
if(useOpacity) {
imageObjects[prevImage].st
imageObjects[prevImage].st
imageObjects[prevImage].st
}
}
// stop the animation thread
clearInterval(zInterval);
zInterval=null;
}
}
// checks to see if the thumbnail and enlarged image are at their final positions
// by checking the animationIndex value against the length of the images imageCourse array.
function isFinished() {
if(activeImage>-1 && prevImage>-1)if(animationI
if(activeImage>-1 && prevImage==-1) if(animationIndex[activeIm
if(activeImage==-1 && prevImage>-1) if(animationIndex[prevImag
return false;
}
// this function simply resets the opacity of the objects when the check box is clicked.
function disableOpacity(bool) {
if(bool) {
useOpacity=0;
for(i=0;i<imageObjects.len
imageObjects[i].style.MozO
imageObjects[i].style.opac
imageObjects[i].style.filt
}
} else {
location.reload();
}
}
// this function calculates the required coordinates to go from point A to point B and returns them as an array.
// originally written by Dean Taylor for Web Paint's line functions (slayeroffice.com/tools/we
// also used in Missile Command (slayeroffice.com/arcade/m
function plotCourse(fX,fY,oX,oY) {
dx = Math.abs(fX-oX);
dy = Math.abs(fY-oY);
max = dx > dy ? dx : dy;
x_inc = dx / max;
y_inc = dy / max;
Xp = oX
Yp = oY;
path = new Array();
pathCount = 0;
if(fX>oX && fY > oY) {
if(oX<fX && oY<fY) {
while (Xp < fX) {
nextX = Math.round(Xp);
nextY = Math.round(Yp);
path[pathCount] = new Array(nextX,nextY);
pathCount++;
Xp += x_inc;
Yp += y_inc;
}
} else {
while (Xp > fX) {
nextX = Math.round(Xp);
nextY = Math.round(Yp);
path[pathCount] = new Array(nextX,nextY);
pathCount++;
Xp -= x_inc;
Yp += y_inc;
}
}
} else {
if(oX<fX && oY>fY) {
while (Xp < fX) {
nextX = Math.round(Xp);
nextY = Math.round(Yp);
path[pathCount] = new Array(nextX,nextY);
pathCount++;
Xp += x_inc;
Yp -= y_inc;
}
} else {
while (Xp > fX) {
nextX = Math.round(Xp);
nextY = Math.round(Yp);
path[pathCount] = new Array(nextX,nextY);
pathCount++;
Xp -= x_inc;
Yp -= y_inc;
}
}
}
return path;
}
%>
</head>
<body>
test code
</body>
</html>
ASKER
I wish to open a new question that follows on from this one to do with then fetching the images from my database, would you be interested in this one, if so I'll post the question title here, thanks again.
ASKER
Thanks for help, worked out how to put own images in.
oh, good.