Easy Photo Display for Large Images

[Guest nbflint]

I posted this under another post but I think it actually fits better here. This

If you have large images like census files from Ancestry.com this may be just what you need. This mod displays the photo on showphoto.php in an iFrame. (In Firefox:The iFrame upon initial load shows a reduced size image that fits completely in the iFrame. Just click the image and it zooms within the iFrame.) If the image is larger then the iFrame it can easily be scrolled.

Personally, I've wanted to do something like this for a long time but didn't get the idea until I was responding to an earlier post.

To see an example of this click here.

To implement this open your showphoto.php

CODE
Find:

<img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">

at approx line 255.

Replace with:

<IFRAME NAME="Frame1" SRC="<?php echo $photosrc; ?>" width="700" height="500">
<img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">
</IFRAME>

If this page is opened in a browser that does not support iFrames, it will display the page as normally would happen if the iFrame were not in use.

[theKiwi]

I posted this under another post but I think it actually fits better here. This

If you have large images like census files from Ancestry.com this may be just what you need. This mod displays the photo on showphoto.php in an iFrame. The iFrame upon initial load shows a reduced size image that fits completely in the iFrame. Just click the image and it zooms within the iFrame. If the image is larger then the iFrame it can easily be scrolled.

Personally, I've wanted to do something like this for a long time but didn't get the idea until I was responding to an earlier post.

To see an example of this click here.

On Safari under Mac OS X this doesn't work - the image loads full size from the outset with the scroll bars showing. it does work in Firefox. I'm not sure why it's different though.

Roger

[Guest nbflint]

On Safari under Mac OS X this doesn't work - the image loads full size from the outset with the scroll bars showing. it does work in Firefox. I'm not sure why it's different though.

Roger

The reason that happens is that Safari under Mac OS X does not support iFrames. By placing the iframe tag around the original code in showphoto.php you are telling the browser to use the iFrame if it can and to load the page normally if the browser can't use the iFrame. Did you use Firefox on Mac OS as well?

[GWood]

How sweet is this little jewel?! I have been wanting something like this for some time but had no idea how to do it. This worked great! Thank you for posting it for all to take advantage of! The only changes I made were to the width to 100% and the hieght to 700. Here is an example of the changes;

http://famgen.casawood.com/showphoto.php?p...=108&showdocs=1

Thanks again!

[Guest nbflint]

How sweet is this little jewel?! I have been wanting something like this for some time but had no idea how to do it. This worked great! Thank you for posting it for all to take advantage of!

I understand, I've been wanting some kind of photo viewer, probally java style but I don't know how to go about that yet. Something else that I thought about was trying to force Acrobat to open the image inside the iFrame, but that seems a bit over the top. So until I figure out a more elaborate photo viewer this will work.

[clweed]

I understand, I've been wanting some kind of photo viewer, probally java style but I don't know how to go about that yet. Something else that I thought about was trying to force Acrobat to open the image inside the iFrame, but that seems a bit over the top. So until I figure out a more elaborate photo viewer this will work.

You guys and gals on here are Geniuses

Thank You for this Gem

Lee

[theKiwi]

The reason that happens is that Safari under Mac OS X does not support iFrames.

According to this page

http://developer.apple.com/internet/safari/faq.html#anchor24

it does?

http://validator.w3.org/check?uri=http%3A%...ype=Inline&ss=1

Indicates that it is by no means HTML 4.01 compliant, but I don't know if these errors would be contributing to it not working.

Did you use Firefox on Mac OS as well?

Yes, as I said it worked on Firefox under Mac OS X.

Roger

[Rush]

Nice feature and good job!

Now I'm 143 'cool tips and tricks' behind in getting them implemented on my site

Man, ya'll are fast...

Rush

[Guest nbflint]

According to this page

http://developer.apple.com/internet/safari/faq.html#anchor24

it does?

http://validator.w3.org/check?uri=http%3A%...ype=Inline&ss=1

Indicates that it is by no means HTML 4.01 compliant, but I don't know if these errors would be contributing to it not working.

Yes, as I said it worked on Firefox under Mac OS X.

Roger

The code is designed to use the iFrame if the browser supports it and not use the iFrame if it's not supported. That fact alone shows that it's not a standard feature to be used unless a certain amount of inconsistency is acceptable. That is probally a large part why it fails the HTML 4.01 compliance test.

[theKiwi]

The code is designed to use the iFrame if the browser supports it and not use the iFrame if it's not supported.

I guess then I'm confused about what "using the iFrame" and "not using the iFrame" would really mean and how it would appear.

Apple says Safari supports iFrames.

In Safari on the main window I get a smaller window of the size specified in the iFrame but because the image doesn't get drawn in the size specified the iFrame window has both vertical and horizontal scroll bars.

So it seems that it's using the iFrame correctly. If instead of an image I was showing text it would work too.

The thing missing is that on Safari, Opera, iCab, Mozilla and omniWeb browsers the image is shown at its full resolution in an iFrame of the specified size with scroll bars.

In Firefox, Netscape and Camino (which all use the Gecko engine) the image is drawn to fit the window and you can click it to zoom it.

So the feature to have the iframe contents drawn to fit the specified size if it's larger is seemingly not working.

Does this work only with images? Since you'd earlier asked about making the pedigree chart narrower so it didn't overflow an iFrame I'm guessing yes, the resizing and zooming only works with images when it does work at all.

I can't find anything online that explains this clearly to me.

Roger

[Guest nbflint]

I

Does this work only with images? Since you'd earlier asked about making the pedigree chart narrower so it didn't overflow an iFrame I'm guessing yes, the resizing and zooming only works with images when it does work at all.

I can't find anything online that explains this clearly to me.

Roger

You can view any kind of web content inside of an iFrame. For instance you could use the iFrame to open one webpage within another. The browser treats both the main window and the iFrame as a separate window. Resizing content to fit an iFrame requires a java script that I use with my nukeTNG script (the one that displays TNG inside of my phpNuke frame). As you well point out though even that resize has limitations.

[Xau]

ok this is how i do large images... for another site... (long and technical)

1st. i set a cookie to see how big users screen is.

2nd. i call another page do display the image. and pass the screen width (Total width - not available width)

3rd. on 2nd php page (i resize the image, using GD.) and display it. (and i remove out any space that i need for frames/borders/menu... whatever)

4th if the image is larger than the screen i allow the person to click on the image to see it. (full size)

basically this allows me to put a 7megapixal image in a directory and not have to touch it. everything else is automatic. resize to the biggest image you could see on your screen.

Added attachment of the 2 files to automatically resize photo's to total screen width

image.zip

[Guest nbflint]

It's great to have different styles approaching the same type of problem because we are all looking for something different.

I've updated my showphoto.php so that the image still opens in the iFrame but can now be zoomed in or out.

Check it out here.

Open showphoto.php.
Find:
<img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">

and replace with:
<IFRAME NAME="Frame1" SRC="showresizedphoto.php?photo=<? echo $photosrc; ?>" width="100%" height="500" frameborder="0" marginheight="0" marginwidth="0" scrolling="yes">
<img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>"> 
</IFRAME>

Then upload showresizedphoto.php into your TNG directory.

<?
/****************************************************************
    Filename: showresidedphoto.php
    Author: Nichols B. Flint, http://www.flintfamilyhistory.com
    
    To use open showphoto.php.
    
    Find:
    <img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>">

    and replace with:
    <IFRAME NAME="Frame1" SRC="showresizedphoto.php?photo=<? echo $photosrc; ?>" width="100%" height="500" scrolling="yes">
<img src="<?php echo $photosrc; ?>" border="0" <?php echo "$size[3]$mapstr"; ?> alt="<?php echo "$description"; ?>"> 
    </IFRAME>
    
    Then upload showresizedphoto.php into your TNG directory.


****************************************************************/
if(isset($_GET['photo'])){
    $pic = $_GET['photo'];
    
    $tobereplace = array("#");
    $replacewith  = array("%23");

    $photo = str_replace($tobereplace, $replacewith, $pic);
} else if(isset($_POST['photo'])){
    $pic = $_POST['photo'];
    
    $tobereplace = array("#");
    $replacewith  = array("%23");

    $photo = str_replace($tobereplace, $replacewith, $pic);
}

if(isset($_POST['zoom'])){
    $percent = $_POST['zoom'];
    $fullsize = "100";
    $zoom = $percent/$fullsize;
} else {
     $percent = "50";
    $fullsize = "100";
    $zoom = $percent/$fullsize;
}

list($width, $height) = getimagesize($pic);
$newwidth = $width * $zoom;
$newheight = $height * $zoom;

$options = array('5', '10', '20', '30', '40', '50', '60', '70', '80', '90', '100', '150', '200', '250', '300', '350', '400', '450', '500');

?>

<form method="POST" action="showresizedphoto.php">
<input type="hidden" name="photo" value="<? echo $pic; ?>">
        <p><select size="1" name="zoom">
        
        <?
            foreach($options as $key){
              echo "<option ";
               if($key == $percent) echo "selected";
               echo ">$key</option>";
            }
        ?>
        
        </select>
        <input type="submit" value="Zoom" name="submit"></p>
</form>

<img src="<? echo $photo; ?>" width="<? echo $newwidth; ?>" height="<? echo $newheight; ?>">

Let me know what you think.

[clweed]

It's great to have different styles approaching the same type of problem because we are all looking for something different.

I've updated my showphoto.php so that the image still opens in the iFrame but can now be zoomed in or out.

Looks good, but I think I'll wait for you to post the code to be able to use the mouse wheel to zoom in and out. ;)

[clweed]

I posted this under another post but I think it actually fits better here. This

If you have large images like census files from Ancestry.com this may be just what you need. This mod displays the photo on showphoto.php in an iFrame. (In Firefox:The iFrame upon initial load shows a reduced size image that fits completely in the iFrame. Just click the image and it zooms within the iFrame.) If the image is larger then the iFrame it can easily be scrolled.

Personally, I've wanted to do something like this for a long time but didn't get the idea until I was responding to an earlier post.

To see an example of this click here.

One problem that I've found with this, It appears that the photos that had an image map attached to them no longer work.

Lee

[GWood]

Let me know what you think.

OK, I updated the showphoto.php and created the showresizedphoto.php from you code.

I get the drop down zoom box and zoom button so people can adjust in or out that way, which is nice. Two things on the page you sent as an example; one, how do I get the + / - magnifying glass adjustments? Two, the "Open in new window" link did not work for me on your page but it would be another nice option for visitors.

Here is what I am getting so far;

http://famgen.casawood.com/showphoto.php?p...D=20&showdocs=1

Finally, I really like the nice touch of highlighting the census page, did you do that with a photo program?

It is a very nice modification to the showphoto.php and I really like it. If you can guide me a bit further to add the magnifying glass adjustment buttons I would like to add those. Also, I noticed your sample controls are centered, I like that and will be heading over to the code to see where to insert that.

Thanks again for your time and willingness to share this nice method of presentation.

[Guest nbflint]

how do I get the + / - magnifying glass adjustments?

Two, the "Open in new window" link did not work for me on your page but it would be another nice option for visitors.

Finally, I really like the nice touch of highlighting the census page, did you do that with a photo program?

I'm glad you like it. This may have the potential to become a full mod but it's not there yet.

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.

I've been trying to figure out how to highlight census images for months now. That inspiration came along with the photo display idea. I use Paint Shop Pro 9 because I can't afford Photo Shop. There is a free trial of both. All you have to do is select the paint brush tool and the highlight color. Now the key is to adjust the "opacity" setting down. I used a yellow mostly at 30 for an opacity setting. The lower the opacity the more subtle the highlight. Once that is set just paint over the image where you want it highlighted.

displayphoto.zip

[Ken Roy]

Nicolas,

This is a really neat feature. I downloaded your zip file and incorporated your code on my home server. When I clicked on the Open in New Window nothing happens.

I went to your site and it behaves the same way. So I opened it in IE and it appears to work there. It does not appear to work in Mozilla 1.7.12 nor in Firefox 1.5. I normally use Mozilla.

Interestingly when I click on the Open in New Window link at the top of the page frame, that link does open a new window in both Firefox and Mozilla. So something has to be different between how the top link and the one next to the Zoom work.

Ken

[Guest nbflint]

Here's the story on the "Open in New Window" link. I was attempting to cause the photo viewer part of the page to open in a window all by itself without any menus or toolbars. I've never done it before and the closest I've found is a bit of java script that works. . .kinda . .. sometimes. . .well . . .

So here's what I would do to get more reliable results.

in showresizedphoto.php line 103 you'll find:

<td width="38%"><a href="showresizedphoto.php?photo=<? echo $photo; ?>&zoom=<? echo $in; ?>&map=<? echo $map; ?>&alt=<? echo $alt; ?>"><img src="zoomin.gif" border="0" title="Zoom In"></a><a href="java script: newwindow = openWin( 'showresizedphoto.php?photo=<? echo $photo; ?>', 'Title', 'width=900,height=700,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=0,resizable=1' ); newwindow.focus()">Open in New Window</a></td>

change it to:

<td width="38%"><a href="showresizedphoto.php?photo=<? echo $photo; ?>&zoom=<? echo $in; ?>&map=<? echo $map; ?>&alt=<? echo $alt; ?>"><img src="zoomin.gif" border="0" title="Zoom In"></a><a href="showresizedphoto.php?photo=<? echo $photo; ?>&alt=<? echo $alt; ?>" target="_blank">Open in New Window</a></td>

This won't get rid of the toolbars but it is a standard link compatible with all major browsers.

If anyone knows how to open a link in a new window without toolbars please let me know. Also, I don't use image maps so if anyone has an idea of how to get this to work with image maps let me know that to.

[GWood]

I'm glad you like it. This may have the potential to become a full mod but it's not there yet.

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.

I've been trying to figure out how to highlight census images for months now. That inspiration came along with the photo display idea. I use Paint Shop Pro 9 because I can't afford Photo Shop. There is a free trial of both. All you have to do is select the paint brush tool and the highlight color. Now the key is to adjust the "opacity" setting down. I used a yellow mostly at 30 for an opacity setting. The lower the opacity the more subtle the highlight. Once that is set just paint over the image where you want it highlighted.

Thanks again for posting the zip and the background on your highlighting technique!!

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

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

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

<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