• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 9203
  • Last Modified:

Code for OnClick event to change image gallery to large image view

Can you please provide JavaScript and/or DHTML code that will allow a mouse OnClick event to change the gallery thumbnails to a large image view?  When a user releases the click on the mouse, the large image will go away and the gallery will appear once again.

The following gallery is an example of what Id like to display, then change to large image view of any one of the images when a user clicks it.  

http://www.philipmeadows.com

0
gmahler5th
Asked:
gmahler5th
  • 12
  • 7
  • 3
2 Solutions
 
ziffgoneCommented:
No problem gmahler5th, this example will open it into a pop window.

Place this in your meadows.js file:

function enLarge(pic,wdth,hght){
         divwdth = parseInt(wdth);
         divhght = parseInt(hght);
         var winL = (screen.width - wdth) / 2;
         var winT = (document.getElementById('container').offsetHeight - divhght) / 2;
         content = '<div id="showLrg" style="position:absolute;left:'+winL+'px;top:'+winT+';width:'+divwdth+'px;height:'+divhght+';border-top: solid 2px #BBBBBB; border-left: solid 2px #BBBBBB; border-bottom: solid 2px #000000; border-right: solid 2px #000000; background: #666666; padding: 10px 10px 10px 10px;z-index:4;"><img src="'+pic+'" style="height:'+hght+'px;width:'+wdth+'px;border-top: solid 2px #000000;border-left: solid 2px #000000;border-right: solid 2px #BBBBBB;border-bottom: solid 2px #BBBBBB;"></div>';
         document.getElementById('hiddenDiv').innerHTML = content;
       if(event.mousemove){
             hide();
       }
}
function hide(){
        if(document.getElementById('showLrg')){
              document.getElementById('showLrg').style.display = 'none';
        }
        else{
              return false;
        }
}

Then modify your thumb's img tag like so:
<img src="/photos/thumbs/0001.jpg" onmousedown="enLarge('/path/to/fullsizeImage.jpg','200','400');" onmouseup="hide();">

Where "200" and "400" would be the width and height of the actual image to show respectively.

Let me know if that's what you want.

Regards...
0
 
gmahler5thAuthor Commented:
i don't want a pop up window.  i want to use the same table space as the gallery is in.  Can you make that work??
0
 
C7SwillCommented:
This code will work if you have

image1.gif and image1thumb.gif
through
image9.gif and image9thumb.gif

change those filenames to whatever you want.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_setTextOfLayer(objName,x,newText) { //v4.01
  if ((obj=MM_findObj(objName))!=null) with (obj)
    if (document.layers) {document.write(unescape(newText)); document.close();}
    else innerHTML = unescape(newText);
}

function MM_showHideLayers() { //v6.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
<style type="text/css">
<!--
body {
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
}
-->
</style></head>

<body><table width="600" height="300" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image1.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image1thumb.gif" width="200" height="100" border="0"></a></td>
    <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image2.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image2thumb.gif" width="200" height="100" border="0"></a></td>
    <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image3.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image3thumb.gif" width="200" height="100" border="0"></a></td>
  </tr>
  <tr>
    <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image4.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image4thumb.gif" width="200" height="100" border="0"></a></td>
    <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image5.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image5thumb.gif" width="200" height="100" border="0"></a></td>
    <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image6.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image6thumb.gif" width="200" height="100" border="0"></a></td>
  </tr>
  <tr>
    <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image7.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image7thumb.gif" width="200" height="100" border="0"></a></td>
    <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image8.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image8thumb.gif" width="200" height="100" border="0"></a></td>
    <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image9.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image9thumb.gif" width="200" height="100" border="0"></a></td>
  </tr>
</table>
<div id="Layer1" style="position:absolute; width:600px; height:300px; z-index:1; visibility: hidden; left: 0px; top: 0px;"></div>
</body>
</html>
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
gmahler5thAuthor Commented:
It's not working.... what characters are %3C and &3E ???

I'm testing the code here  http://www.philipmeadows.com/test.htm
0
 
gmahler5thAuthor Commented:
Okay it seems to be working using your exact code...however the first time I click on an image in IE the page refreshes and does nothing, but the 2nd time I click the image, it displays the large image.  I don't want users to have to click twice to initialize the image before it displays large.... is that a bug in the code?  Or is there something you can change in the code to fix this?
0
 
C7SwillCommented:
  <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image1.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image1thumb.gif" width="200" height="100" border="0"></a></td>


This is your baby, i'll break it down for you and fix the problem at the same time

<a href="#"
// Show The Layer
onMouseDown="MM_showHideLayers('Layer1','','show');

// Set the Text of The Layer to The Big Image.
// All you need to change is the word image 1.gif
// %3C = <
// %22 = '
// %3E = >
// So the line looks like <img src='image1.gif' width='600' height='300' border='0'>
MM_setTextOfLayer('Layer1','','%3Cimg src=%22image1.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E')"

// Hide Window
onMouseOut="MM_showHideLayers('Layer1','','hide')"
>

// Display Thumbnail
<img src="image1thumb.gif" width="200" height="100" border="0">
</a>


To Fix the problem you were having... put return false at the end of each onmousedown i.e.:

   <td><a href="#" onMouseDown="MM_showHideLayers('Layer1','','show');MM_setTextOfLayer('Layer1','','%3Cimg src=%22image1.gif%22 width=%22600%22 height=%22300%22 border=%220%22%3E'); return false" onMouseOut="MM_showHideLayers('Layer1','','hide')"><img src="image1thumb.gif" width="200" height="100" border="0"></a></td>
0
 
gmahler5thAuthor Commented:
Okay that seems to make an improvement.  I hate to be pickey, but what would I have to change to the large image changes back to the thumbnail gallery when the mouse click goes up, instead of waiting for user to move the mouse??
0
 
gmahler5thAuthor Commented:
Well in IE the gallery displays on mouse up, but in Mozilla you have to move the mouse before the large image changes back to the gallery display.
0
 
gmahler5thAuthor Commented:
Would the MouseUp be a better way to restore the gallery than use of the MouseOut event?  
0
 
C7SwillCommented:
Try onMouseUp instead of onMouseOut
0
 
gmahler5thAuthor Commented:
I tried onMouseUp, but then when I click it, the large image just stays there...
0
 
ziffgoneCommented:
Sorry gmahler5th, my example above didn't work, I forgot to add a vital bit of info,

Also add the following just above your </body> tag:
<div id="hiddenDiv"></div>
0
 
ziffgoneCommented:
"i don't want a pop up window.  i want to use the same table space as the gallery is in.  Can you make that work??"

I actually worded it wrong, it's not a pop up window, it's a pop up Div instead.

Here's a working example so you can see how it looks:

http://webmastereseller.com/test/philipmeadows/

Regards...
0
 
gmahler5thAuthor Commented:
Excellent, Ziff... can you test this and let me know what you can do to make it work in Mozilla also?  It must work in Mozilla and IE.  It works beautifully in IE, but you have to move the mouse outside of the picture area for the gallery to return to normal in Mozilla.
0
 
ziffgoneCommented:
Done my friend. Check it out again: http://webmastereseller.com/test/philipmeadows/

Seems I forgot an "onmouseup" command.

The following is for archiving of this question:

meadows.js file:

// *******************************************
function adjust()
{
         hgt=document.getElementById('leftcol').offsetHeight;
         document.getElementById('rightcol').style.height=hgt+'px';
}
window.onload = adjust;
window.onresize = adjust;

function enLarge(pic,wdth,hght){
         var divwdth = wdth+20;
         var divhght = hght+20;
         var winL = 0;
         var winT = 0;
         content = '<div id="showLrg" style="position:absolute;left:'+winL+'px;top:'+winT+';width:'+divwdth+'px;height:'+divhght+';border-top: solid 2px #BBBBBB; border-left: solid 2px #BBBBBB; border-bottom: solid 2px #000000; border-right: solid 2px #000000; background: #666666; padding: 5px 5px 5px 5px;z-index:4;" onmouseout="hide();" onmouseup="hide();" onmousemove="hide();"><img src="'+pic+'" style="height:'+hght+'px;width:'+wdth+'px;border-top: solid 2px #000000;border-left: solid 2px #000000;border-right: solid 2px #BBBBBB;border-bottom: solid 2px #BBBBBB;"></div>';
         document.getElementById('hiddenDiv').innerHTML = content;
       if(event.mousemove){
             hide();
       }
}
function hide(){
        if(document.getElementById('showLrg')){
              document.getElementById('showLrg').style.display = 'none';
        }
        else{
              return false;
        }
}
// ***********************************************

Then add this right below your ~ <div id="leftcol"> ~ :
<div id="hiddenDiv" style="position:relative;top:0px;left:0px;width:100%;height:100%;background:transparent;clear:both;float:left;z-index:0;"> </div>

And finally, add the following to your img tags:
onmousedown="enLarge('/path/to/larger/pic.jpg',444,366);" onmouseup="hide();"

Like so:
<img src="http://www.philipmeadows.com/photos/thumbs/0001.jpg" onmousedown="enLarge('/path/to/larger/pic.jpg',444,366);" onmouseup="hide();">

Or you can just take the source code from both files on my site. Let me know if you need anything else.

Regards...
0
 
gmahler5thAuthor Commented:
I will provide points to both contributors in this thread, weighted favorable for the contributor of the the Accepted Answer.  The code is not working beautifuly in both IE and Mozilla.  Now it's time to get to work and put my galleries together.  Thanks!
0
 
gmahler5thAuthor Commented:
Hey  ziffgone,

Now I'm not so sure your script will work.  I have two images for each displayed image.  A thumbnail and a large view of the same image.  If I enlarge a thumbnail, the enlarged view is pixelated.  So I need to be able to use the image size that is optimized for the thumbnail view.  Are there any changes to your script that we can do to utilize both a thumbnail and the large image size?
0
 
ziffgoneCommented:
Hi gmahler5th,

I actually included the ability to do that within the script:

<img src="http://www.philipmeadows.com/photos/thumbs/0001.jpg" onmousedown="enLarge('/path/to/large_view.jpg',444,366);" onmouseup="hide();">

On my web page, just for example to show larger pictures, I substituted "/path/to/large_view.jpg" with "this.src", which just blew up the thumbnail to show only as an example.

So, let's say for "/thumbs/0001.jpg", the larger picture you want to show is "/images/wedding0001.jpg", and the width of this larger image is 350 pixels, and it's height is 300 pixels, you would change the enLarge function like so:

enLarge('/images/wedding0001.jpg',350,300);

So your "0001.jpg" thumbnail <img> tag would look like this:
<img src="http://www.philipmeadows.com/photos/thumbs/0001.jpg" onmousedown="enLarge('/images/wedding0001.jpg',350,300);" onmouseup="hide();">

This will open "wedding0001.jpg" 350px wide by 300px high.

Make sure to enclose the path to the larger image in single quotes, ( ' ), as in my example above, if you enclose it in double quotes, ( " ), you'll get script errors.
So this:
enLarge( >> ' << /images/wedding0001.jpg >> ' << ,350,300);
Not this:
enLarge( >> " << /images/wedding0001.jpg >> " << ,350,300); ........ Creates errors.

I hope that helps, any questions, just ask.

Regards...
0
 
gmahler5thAuthor Commented:
I have a few other questions to clean up the layout and presentation of this script.  Shall I ask them here, in a new thread (so you get more points) or via email?
0
 
ziffgoneCommented:
Whichever way you like, I'm glad to help. As it's my script code that may be causing layout problems, I don't mind working out the perks with you for no extra points. If it was another's solution, I'd want it in another question.

So what would you like fixed?

Regards...
0
 
gmahler5thAuthor Commented:
Okay well the first issue is that there is extra padding at the top of the table in IE and the images shift down, but the space is not there in Mozilla.  Also, there should be a 2 pixel spacing on the top and left hand margins, just like on the bottom and the right margins.  

Also, I'd like the image to be center aligned and middle aligned.

I would also like the layout to appear the same in IE as it does in Mozilla.

Here is where I'm at:  http://www.philipmeadows.com/lrh-gallery.htm

Many thanks.
0
 
ziffgoneCommented:
Okey dokes, took a bit of doing, but I think I may have done it. A little note, I just couldn't make it look right with the thumbnail images aligned to the left, like on your page. There was an odd spacing on the right that I just couldn't figure out. So, the thumbs are centered, see what you think.

http://webmastereseller.com/test/philipmeadows2/

I also corrected your image pre-load, as it was trying to preload the images from your main directory and not the "long-road" directory, therefore not finding them. I'm currently on dial up, and when I moused down on an image, it took forever to load the large image. Now it takes longer for the page to load for me, but when I click on the images, the large pic pops into existence immediately.

Here's the upgraded gallery.js file:
http://webmastereseller.com/test/philipmeadows2/gallery.js

Here's the upgraded meadows.css file, (just one style for "gallerycol" added):
http://webmastereseller.com/test/philipmeadows2/meadows.css

Take note that I'm using a hidden div for code swapping, it is placed just above the </body> tag:
<div id="hiddenDiv" style="position: absolute; top:-2000px;left:-2000px;"><textarea id="hiddenText" cols="10" rows="10"></textarea></div>
</body>

One more small note, try not to use spaces in your file names, such as "Flaming Cloud.jpg". Many times this causes problems as the request for the image looks like this: "Flaming%20Cloud.jpg" and sometimes the %20 will be looked for literally instead of being converted back to a space. I'd use underscores or dashes for spaces: "Flaming_Cloud.jpg".

Anyway, let me know if you need anything else.

Regards,
Perry.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 12
  • 7
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now