Solved

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

Posted on 2004-08-17
22
9,077 Views
Last Modified: 2012-06-22
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
Comment
Question by:gmahler5th
  • 12
  • 7
  • 3
22 Comments
 
LVL 14

Expert Comment

by:ziffgone
ID: 11827188
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
 

Author Comment

by:gmahler5th
ID: 11827295
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
 
LVL 1

Assisted Solution

by:C7Swill
C7Swill earned 100 total points
ID: 11827854
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
 

Author Comment

by:gmahler5th
ID: 11832533
It's not working.... what characters are %3C and &3E ???

I'm testing the code here  http://www.philipmeadows.com/test.htm
0
 

Author Comment

by:gmahler5th
ID: 11832740
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
 
LVL 1

Expert Comment

by:C7Swill
ID: 11834884
  <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
 

Author Comment

by:gmahler5th
ID: 11835351
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
 

Author Comment

by:gmahler5th
ID: 11835458
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
 

Author Comment

by:gmahler5th
ID: 11835477
Would the MouseUp be a better way to restore the gallery than use of the MouseOut event?  
0
 
LVL 1

Expert Comment

by:C7Swill
ID: 11835491
Try onMouseUp instead of onMouseOut
0
 

Author Comment

by:gmahler5th
ID: 11835620
I tried onMouseUp, but then when I click it, the large image just stays there...
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 14

Expert Comment

by:ziffgone
ID: 11837354
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
 
LVL 14

Expert Comment

by:ziffgone
ID: 11837750
"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
 

Author Comment

by:gmahler5th
ID: 11838011
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
 
LVL 14

Accepted Solution

by:
ziffgone earned 400 total points
ID: 11838144
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
 

Author Comment

by:gmahler5th
ID: 11842325
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
 

Author Comment

by:gmahler5th
ID: 11883880
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
 
LVL 14

Expert Comment

by:ziffgone
ID: 11888164
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
 

Author Comment

by:gmahler5th
ID: 11888183
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
 
LVL 14

Expert Comment

by:ziffgone
ID: 11888345
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
 

Author Comment

by:gmahler5th
ID: 11889286
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
 
LVL 14

Expert Comment

by:ziffgone
ID: 11899169
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

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now