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

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

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

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

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

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?

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

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

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.

Would the MouseUp be a better way to restore the gallery than use of the MouseOut event?  

Try onMouseUp instead of onMouseOut

I tried onMouseUp, but then when I click it, the large image just stays there...

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>

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

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.

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!

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?

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

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?

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

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.

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.