Easy Photo Display for Large Images Options Rating

[Schenk]

The attached displayphoto.zip has all of the files you'll need to make your site look just like mine. Just open showresizedphoto.php and follow the instructions. It has the updated version of the code to put into showphoto.php, other then that just upload all of the files (4) to your tng directory.

Nicholas,

Thanks very much for sharing this code! I incorporated it in my web site and it works great.
I made a minor tweak in showphoto.php because I only need the zoom-function for documents and not for photo's (and I don't want to lose the image maps I worked on so hard to get right!). My code is now:

CODE

<?php
if ($showdocs) {
?>
     <IFRAME NAME="Frame1" SRC="showresizedphoto.php?photo=<? echo $photosrc; ?>&alt=<?php echo $description; ?>" width="100%" height="550" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">
     <img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">
     </IFRAME>
<?php
} else {
?>
     <img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">
<?php
}
?>

Alternatively one could let the zoom-function depend on the size of the photo/document. The part "if ($showdocs) {" should then be altered (whereby "size[o]" is the width in pixels and "size[1]" the height) into for example:

CODE

if ($size[0] > 600 || $size[1] > 500) {

Roy Schenk

[Ken Roy]

Roy,

Thanks for posting your solution to only display documents in the IFRAME. I also did not want to lose my image maps.

I also changed the code so that you can invoke the zoom function in a separate window for both photos and documents by adding the following line after your code modification

CODE

<a href="showresizedphoto.php?photo=<?php echo $photosrc; ?>&<? echo $mapstr; ?>" target="zoom">Show in separate window</a> with zoom capability

I also removed the code from the showresizedphoto.php that invoked the openWin function since it does not work in Mozilla. my default browser.

Nicolas,

Thanks for posting the original code. This is a great customization to TNG.

Ken
http://www.royandboucher.com

[katk]

Nicholas,

I absolutely love this!!! Your script is SO COOL!! Thanks so much for sharing it... I've been wanting to have something like this for my users to zoom in on census documents. This is just the ticket!

Perhaps Darrin should incorporate this into TNG, or at least provide it as a "plug in"!

Sincerely,
Kathy Kult

[Lesley]

Hello
I uploaded your photo zoom and it worked brilliantly - it was great until the latest TNG update - what should I do to make it work again ?
Thanks - sorry a newbie question
Lesley

[clweed]

Hello
I uploaded your photo zoom and it worked brilliantly - it was great until the latest TNG update - what should I do to make it work again ?
Thanks - sorry a newbie question
Lesley

If you haven't fixed it yet, you need to modify the new showphoto.php

[Lesley]

Thank you - I appreciate it
Lesley

[Russellgs]

Nicholas,

Thanks very much for sharing this code! I incorporated it in my web site and it works great.
I made a minor tweak in showphoto.php because I only need the zoom-function for documents and not for photo's (and I don't want to lose the image maps I worked on so hard to get right!). My code is now:

CODE

<?php
if ($showdocs) {
?>
     <IFRAME NAME="Frame1" SRC="showresizedphoto.php?photo=<? echo $photosrc; ?>&alt=<?php echo $description; ?>" width="100%" height="550" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">
     <img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">
     </IFRAME>
<?php
} else {
?>
     <img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">
<?php
}
?>

Alternatively one could let the zoom-function depend on the size of the photo/document. The part "if ($showdocs) {" should then be altered (whereby "size[o]" is the width in pixels and "size[1]" the height) into for example:

CODE

if ($size[0] > 600 || $size[1] > 500) {

Roy Schenk

Roy,
I too had a photo that was an image map (only one so far) but this is how I fixed it so it would not do the zoom on the image map:

CODE

<?php
if  ($size[0] > 600 || $size[1] > 500) {
  if ( $photoID != "204" ) {
?>
     <IFRAME NAME="Frame1" SRC="showresizedphoto.php?photo=<? echo $photosrc; ?>&alt=<?php echo $description; ?>" width="100%" height="550" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">
     <img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">
     </IFRAME>
<?php }
} if  ($size[0] > 600 || $size[1] > 500) {
  if ( $photoID == "204" ) {
?>
     <img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">
<?php }
} else {
?>    <img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">
<?php
}
?>

Since I only have one that is the image map I haven't tested it with more then one but I believe you would have to edit the photoID lines with 'OR' statements, not too sure how to do that yet, still learning.
Russ (IMG:style_emoticons/default/icon_cool.gif)

[Ken Roy]

Hi,

Has anyone reworked this mod for Version 6? I was using the version that check for documents [if ($showdocs)] since I also use image maps extensively.

The image width and height added in Version 6 is nice to reduce the size of the image so it is completely viewable, but would also need to incorporate the code that allows zooming in a separate page.

Thanks.
Ken

[katk]

This works for me in TNG v6.0... change your showmedia.php file on/around line 382 from this:

CODE

                   echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n";

to this:

CODE

                    if( $mediatypeID == "documents" ) {
                        echo "<IFRAME NAME=\"Frame1\" SRC=\"showresizedphoto.php?photo=$mediasrc\" &alt=\"$description\" width=\"100%\" height=\"500%\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"auto\"/>\n";

                }
                else {
                      echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n";
                }

This will add the zoom frame to documents only; not to photos, gravestones, or other media.

Kathy Kult
KKs-Fam.net

[Ken Roy]

This will add the zoom frame to documents only; not to photos, gravestones, or other media.

Kathy Kult
KKs-Fam.net

Kathy,

Thanks for posting the code. This appears to behave differently than what I had in Version 5.1.4, since I now have a double scroll bars for the document. I was also looking for the Open in Separate Window code, which you appear to have on your site.

Edited: OK, I got rid of the double scroll bars by hard-coding the height to 550 (height=\"550\" )

Edited: To add the Open in new Window link the following code was added in showresizedphoto.php around line 102 after the zoom control links

CODE

<a href="showresizedphoto.php?photo=<? echo $photo; ?>&alt=<? echo $alt; ?>" target="_blank">Open in New Window</a>

Kathy, Thanks for providing me your showresizedphoto.php file from which I extracted the above code.

[jseaman]

All of this sounds like a great option to add to viewing documents in TNG - I have almost 300 documents on my site now and the number grows all the time. As I'm sure everyone knows - viewing the docs full size (or larger) is needed to be able to read them while viewing them at 25-50% works fine for just getting an idea of what the document looks like. I think that an initial viewing percentage of 25 to 50% would work best.

I've read through this thread several times and there have been a few things added to the original idea - making it work on documents only - being able to open in a new (less cluttered) window - mods so it works with TNG ver 6+ - etc.

Would someone please post an updated zipfile (with updated instructions) that incorporates all the various improvements and changes. It sure would make it easier for others to use this excellent addition!

[Bret]

Jim,
What a timely post... I was just putting together a zip file with some of my own enhancements to share here. I have taken the concept that was originally posted and added some modifications to provide additional functionality of panning and magnification (similar to what you get with the ancestry.com viewer). If you would like to see an example, you can visit my Rumsey Family Pages website.

This is similar to what has already been posted in that it fits inside an IFRAME, but the entire viewer is done in javascript. This is a first draft of this and hasn't been optimized (so no poking fun at my javascript!), but I'll be working on that over the holidays (hopefully). It does not have an "open in new window" capability, but I could probably get that added pretty easily.

I have included instructions for installation in the zip file in the img_viewer_readme.txt. I only included instructions for TNG v6.x (I don't have a v5.x that I can test on), and I've tested the javascript on both IE6, IE7 and Firefox. Let me know if it does or doesn't work for you...

-Bret
www.rumseyfamily.com

[theKiwi]

I have included instructions for installation in the zip file in the img_viewer_readme.txt. I only included instructions for TNG v6.x (I don't have a v5.x that I can test on), and I've tested the javascript on both IE6, IE7 and Firefox. Let me know if it does or doesn't work for you...

-Bret
www.rumseyfamily.com

Trying this out on your site using Mac OS X 10.4.8 - Safari and Firefox 2.0.

It looks very cool - I'm not a fan of iFrames, so haven't implemented anything on my images to date, nor any CMS that uses iFrames either.

In this case though, I don't see the actual iFrame in either browser - there are no horizontal or vertical scroll bars on the image. The image here shows what I see in Safari..




Safari - I can "grab" the image and scroll it up and down in its window, but can't drag it sideways.

Firefox - I can grab the image and move it in any direction with the hand to see across the whole width if my browser isn't wide enough.

I don't know enough about Javascript to know why this might not be working the same in each browser.

Cheers

Roger

[GWood]

Bret,

I've not loaded this yet but played with it at your site. What a great mod!! I wouldn't dare poke fun at your JavaScript...very K~E~W~L!!

Thank you!!

[jseaman]

Wow! This is exactly what I was wanting to see someone put together. Very nice!

It still isn't ready for prime time but it is exactly what is needed.

I've tested it on your site using IE 7 and Mozilla Firefox/1.5.0.8 - It works better on Firefox but has major issues with IE.

The left-right drag does not work with IE. With both of the browsers you have to use a combination of L-R drag and UP-DOWN scroll to see the entire image (when larger than fit-on-screen). With IE it is impossible to see the entire image.

Also the drag is a bit jerky ... not sure if that is a problem with code or something funky on my machine. May be time to clean the mouse!

But the concept is wonderful! Just needs a bit of tweaking and it will be the perfect solution. It may be necessary to determine the type of browser being used and create separate code for different browsers.

I really hope you will continue development of this little pearl!

[wombmate]

Bret

I incorporated your code on my TNG install running on my WAMP server today and wanted to say thank you. I am very impressed with your effort and look forward to future modifications/enhancements. This mod really negates the need to resize documents which is a definite plus for anyone trying to view census records. The only thing I noted was that all documents open to a 'Fit Image' size. Is there a way to default them to say 100%? I have a number of newspaper clippings that are being enlarged to fill the screen width but look perfect when viewed at 100% (this may be due to my scaling the images beforehand).

Keep up the terrific work.

Darlene

[Bret]

Thanks to those who have downloaded and tested out my image viewer. Based on the comments I have made a few changes to the code.

- Images that fit on the screen at 100% will not be zoomed to fit.
- Panning should work correctly on IE6, IE7 and Firefox now. It mostly works on Opera, but there are sizing issues that I'll need to track down.
- I have optimized the code a bit to hopefully improve performance.
- The magnifier wasn't working correctly if the filename had spaces in it.

Just to clarify, my intention is that the image itself will not have scrollbars... to see an image that is larger than the window you would use the pan function. This avoids the annoying and confusing double scrollbars.

I suspect that I'll be going through several revisions of this and have decided to post the zip file and instructions at http://www.rumseyfamily.com/tngmod_img.php. There's still some tweaks to be done (you'll notice that magnify doesn't really work right if you are at/over 100%). I'll keep moving along and post to this forum again when the next round of changes is done.

-Bret

[theKiwi]

- Panning should work correctly on IE6, IE7 and Firefox now. It mostly works on Opera, but there are sizing issues that I'll need to track down.

Just to clarify, my intention is that the image itself will not have scrollbars... to see an image that is larger than the window you would use the pan function. This avoids the annoying and confusing double scrollbars.

Great - it now pans both up and down and sideways if using Safari - I tried it on your site.

Roger

[wombmate]

Great code! I implemented it on my local web server and have no problems at all now that I resolved my missing </iframe> problem.

Is there is mod in work that will allow the document to be opened in a new window or can the code be modified easily to open a new window?

Thanks in advance,
Darlene

[Bret]

Fresh from the holidays I was able to do a bit more tweaking to the image viewer. I've posted version 1.2, and you can download the new version from http://www.rumseyfamily.com/tngmod_img.php. I'll recap the changes here...

- A 'please wait patiently' message is displayed while the image is downloaded.
- Added 'New Window' button to open the image in a new window.
- Modified the zoom images to grey them out a bit more when disabled.
- Because I haven't been able to find a way to easily provide magnification beyond 100%, the magnify button becomes disabled when the magnification is greater than 100%.
- The zoom in/out buttons now update when the magnification is changed with the drop down box.
- Mozilla browsers should now see a grabbing hand when panning the image.
- Cleaned up the calculation of the magnifier position.

I also looked into the 'jerkiness' when panning. This seems to be primarily browser dependent, IE6 being the worse. Firefox and IE7 both seemed to do well with panning. I also noticed some jerkiness on slower systems, so there may be some system dependence here as well.

Enjoy!

-Bret