Avatar of rabbits2
 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%>] = ["<%=rs_pics("small_photo")%>", "<%=rs_pics("title")%>", "optional url","<%=rs_pics("picID")%>","<%=rs_pics("large_photo")%>", "<%=rs_pics("quote")%>", "<%=rs_pics("price_framed")%>","$<%=rs_pics("price_unframed")%>","£<%=rs_pics("price_unframed")%>", "<%=rs_pics("picID")%>"]

function buildimage(i){
var tempcontainer=galleryarray[i][1]!=""? '<a href="javascript:void();" >' : "" 
tempcontainer+='<img src="'+galleryarray[i][0]+'" width="64" height="64" border="3" bordercolor="#666666" onclick="productwindow(\''+galleryarray[i][3]+'\')" onMouseOver="changetext(\''+galleryarray[i][1]+'\');changeitemname(\''+galleryarray[i][1]+'\');changeitemnumber(\''+galleryarray[i][3]+'\');changeitemamount(\''+galleryarray[i][6]+'\');changetextdescription(\'' + galleryarray[i][5] + '\');changeproductid(\'' + galleryarray[i][9] + '\');changetextprice(\'' + galleryarray[i][6] + '\');changetextprice_dollar(\'' + galleryarray[i][7] + '\');changetextprice_euro(\'' + galleryarray[i][8] + '\');pictureSwap(\'' + galleryarray[i][4] + '\')" title="'+galleryarray[i][1]+'">'
tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
return tempcontainer
Scripting LanguagesJavaScript

Avatar of undefined
Last Comment

8/22/2022 - Mon

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.
See Pricing Options
Start Free Trial
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.

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.

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 id="caption"></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).
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes

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:

<!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">
<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.getElementById)return;      // bail out if this is an old browser
      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").innerHTML = DEFAULT_CAPTION;
      // loop over how many images we have to deal with
      while(i<TOTAL_IMAGES) {
            // create an object reference variable to the image

            // set the top and left of the image
            imageObjects[i].style.left = x + "px";
            imageObjects[i].style.top = y + "px";

            // set up the bogus "xid" attribute to ID the images when they are clicked on

            // set up the onclick event

            // set up the imageStart array for this image
            if(!imageStart[i])imageStart[i]=new Array(x,y);

            // increment the x coordinate for the next image

            // 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.
            // set the animationIndex for this image to 0

            // if we've got as many images in the row as we want, start the next row
            if(z>=IMAGES_PER_ROW) {
                  x=0; z=0;

function initCourse() {
      // initialize the imageCourse array for each image
      for(i=0;i<imageStart.length;i++)imageCourse[i] = plotCourse(DEST_X,DEST_Y,imageStart[i][0],imageStart[i][1]);

function initSteps() {
      // initialize the step increments for the width and height changes.
      for(i=0;i<imageCourse.length;i++) {
            wStep = Math.round(imageCourse[i].length/iSpeed);
            wStep = Math.round(250/wStep);
            hStep = Math.round(imageCourse[i].length/iSpeed);
            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

      // 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(index==activeImage) {
            // the user has clicked on the enlarged image. set prevImage to activeImage and set activeImage to -1
      } else {
            // set up the previous image so we know which to send back and where to send it.

      // begin the animation thread
      zInterval = setInterval("slideImage()",10);

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.top = imageCourse[index][animationIndex[index]][1]+"px";
            imageObjects[index].style.left = imageCourse[index][animationIndex[index]][0]+"px";
      } catch(err) { }

function setImageOpacity(index) {
      // set the opacity of the object. Once for Gecko, once for Safari and once for MSIE.
      imageObjects[index].style.filter="alpha(opacity=" + currentOpacity[activeImage] + ")";

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
            // set up its opacity
            // if its width is less than 250, increase it. likewise with its height
            if(imageDimensions[activeImage][0]<250)imageDimensions[activeImage][0]+= movementSteps[activeImage][0];
            if(imageDimensions[activeImage][1]<155)imageDimensions[activeImage][1]+= movementSteps[activeImage][1];
            // increment our current index for imageCourse by value of iSpeed

      // do the same as above for images returning to thumbnail size, only decrementing values this time
      if(prevImage>-1) {

      // 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").innerHTML = DEFAULT_CAPTION;
            // 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] = imageCourse[activeImage].length;
                  // set the final top,left,width and height of the image, just in case they're off
                  // set up the final opacity of the image if useOpacity is true
                  if(useOpacity) {
                  d.getElementById("caption").innerHTML = imageObjects[activeImage].title;
            // do the same for the thumbnail image.
            if(prevImage>-1) {
                  imageObjects[prevImage].style.top = imageStart[prevImage][1]+"px";
                  imageObjects[prevImage].style.left = imageStart[prevImage][0]+"px";
                  if(useOpacity) {
            // stop the animation thread

// 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(animationIndex[activeImage]>=imageCourse[activeImage].length && animationIndex[prevImage]<=0) return true;
      if(activeImage>-1 && prevImage==-1) if(animationIndex[activeImage]>=imageCourse[activeImage].length)return true;
      if(activeImage==-1 && prevImage>-1) if(animationIndex[prevImage]<=0)return true;
      return false;

// this function simply resets the opacity of the objects when the check box is clicked.
function disableOpacity(bool) {
      if(bool) {
            for(i=0;i<imageObjects.length;i++) {
      } else {

// 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/web_paint)
// also used in Missile Command (slayeroffice.com/arcade/missile_command)
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);
                        Xp += x_inc;
                        Yp += y_inc;
            } else {
                  while (Xp > fX) {
                        nextX = Math.round(Xp);
                        nextY = Math.round(Yp);
                        path[pathCount] = new Array(nextX,nextY);
                        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);
                        Xp += x_inc;
                        Yp -= y_inc;
            } else {
                  while (Xp > fX) {
                        nextX = Math.round(Xp);
                        nextY = Math.round(Yp);
                        path[pathCount] = new Array(nextX,nextY);
                        Xp -= x_inc;
                        Yp -= y_inc;
      return path;
test code

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.

Thanks for help, worked out how to put own images in.
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.

oh, good.