|
|||
|
TNG Image Viewer The TNG Image Viewer provides an easy way to view large images on your TNG website. This is particulary useful for images such as census records, which are unreadable if shrunk to fit on the screen. You can see an example here. This has been tested on IE6, IE7, Chrome, Firefox, Mozilla, Opera and Safari. Thanks to Nicholas B. Flint who posted the original implementation on which this was based, and to http://persistent.info, from which I took the magnifier concept and adapted it for my own use. If you like this mod, be sure to check out my others here. Revision History Revision 1.8.1 (17 Feb 2009) - The img_utils.js file included in the 1.8 version was not resizing the iframe properly and resulted in images only displaying the first few rows of pixels. Revision 1.8 (5 Feb 2009) - Fixed issue with image maps not being properly scaled when an image was "Fit to Width". Also renamed the image map ID to 'imgMapViewer' to prevent any name conflicts. Revision 1.7.1 (28 July 2008) - Fixed a minor bug that caused images with non-alphanumeric character in their description to not display.
Revision 1.7 (30 June 2008)
- Many modifications made to the javascript to allow for the image to be sized into the iframe even if the width of the TNG table is less than 100%. The browser width is also no longer calculated and passed via cookies, so it will now work even if a user does not have cookies enabled. - The ever-annoying "black-box" at the upper right hand corner in IE is now gone. - Image maps would not work properly if zoom was selected to be "Fit to Width" or "Fit to Height" - Several changes to improve compatability with Opera and Safari (it is now fully functional with Opera). Revision 1.6.2 (14 June 2008) - Updates necessary to work with TNG 7.0. Revision 1.6.1 (24 Feb 2008) - Transparency of image canvas was inadvertently reverted back to white, instead of using the background. - The Image Viewer will shrink to meet the height of images that are less than the specified height. - The window title when opening up an image in a new window was not displaying correctly. - Javascript to size the Image Viewer was moved into its own file and included, which minimizes the number of lines being added to the files. Revision 1.6 (8 Feb 2008) - Image controls can be turned on/off. If the image fits on the screen, they will automatically be disabled. - When the image controls are disabled, the image will automatically be scaled to fit on the screen. Revision 1.5.2 (1 Feb 2008) - Fixed issue with titles containing carriage returns. - img_viewer.php now included meta.html file, instead of hard-coding the style sheets to include. - Background color is now defined at the top of the img_viewer.js file - The image viewer controls will no longer appear when viewing an image that fits on the screen without scaling. Revision 1.5.1 (31 Jan 2008) - Fixed problem with filenames containing spaces. Revision 1.5 (31 Jan 2008) - Added support for image maps, which will automatically scale when zooming in or out. - Cleaned up some oddities with zoom levels. - Added some additional checks to the img_viewer.php file to prevent viewing of living individuals. - Please note that these revisions require TNG v6.x. This addon is no longer compatible with earlier versions. Revision 1.4.2 (26 May 2007) - Updated instructions for installation with TNG v6.1.0. - Width of popup window was not being specified directly, which was causing some issues with the new window in IE. - Removed an errant width setting. Revision 1.4.1 (3 Apr 2007) - Changed 'Fit Image' to 'Fit Width', and added a 'Fit Height' option to the zoom selections. 'Fit width' will zoom to fit the image to the width of the screen, but not over 100%. 'Fit Height' zooms to fit the image to the height of the viewer, also up to 100%. - Viewers that were set to a fixed height were cutting off the bottom ~50 pixels of the image. Revision 1.4 (25 Feb 2007) - Mozilla will now properly display the image both in the main page and when you click 'New Window'. - No more javascript errors if you try to zoom below 25% or above 200%. - The value that zoom+ or zoom- will zoom to is now intelligently determined based on the actual zoom, instead of defaulting to 75%. - Text has been added to the controller bar to let users know that they should click and drag to pan around the image. - Redid much of the controller bar CSS styles to make it more cross-browser friendly. - Modified the img_break.png image to be shorter, so as not to stretch the controller bar vertically. Revision 1.3.1 (15 Feb 2007) - Panning on images that began as zoomed to 100% was not working properly. - Images initially zoomed to 100% would go to 75% if the Mag+ button was hit, instead of 125% like you might expect. Revision 1.3 (14 Feb 2007) - The image could become shifted and a black bar introduced above the image if the zoom level was changed to 'Fit Image' (this didn't occur when the image was first shown at this level). Revision 1.2 (5 Jan 2007) - 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. Revision 1.1 (21 Dec 2006) - Zoom level is set to 100% for images that will already fit on the screen. - Fixed pan issues on IE6. - Optimized code to remove unnecessary getElementById calls. - Magnifiy wasn't working properly if the image filename contained spaces. - Transparency was not correct on some of the magnifier images. Revision 1.0 (18 Dec 2006) - Original version posted on the TNG Forum. Download A zip file containing all of the necessary files can be downloaded here: img_viewer.zip Installation instructions can be found below, as well as in the img_viewer_readme.txt file included in the zip file. Modifications Required Before attempting any edits on your TNG files, it is always a good idea to make a backup!
1) Open showmedia.php and add the following line after the tng_header command:
tng_header( $description, $flags );
@include('img_utils.js'); 2) Open showmedialib.php and find the showMediaSource function (around line 310). You need to add the following variable to the global statement just below the existing globals:
global $text, $usefolder, $size, $imagetypes, $htmldocs, $histories_url, $cms, $tngconfig, $videotypes, $recordingtypes;
global $mediatypeID; 3) Also in showmedialib.php, find the following line in the same showMediaSource function (around line 361):
echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n";
and replace it with:
echo "<span id=\"msg\" class=\"normal\">Please wait while the image is loaded...</span><iframe name=\"iframe1\" id=\"iframe1\" src=\"img_viewer.php?mediaID=$imgrow[mediaID]&medialinkID=$imgrow[medialinkID]\" width=\"100%\" height=\"1\" onLoad=\"calcHeight(600)\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\"></iframe>";
If you want the Image Viewer to be active only when displaying documents, you would replace the original line with the following lines:
if ($mediatypeID == "documents")
echo "<span id=\"msg\" class=\"normal\">Please wait while the image is loaded...</span><iframe name=\"iframe1\" id=\"iframe1\" src=\"img_viewer.php?mediaID=$imgrow[mediaID]&medialinkID=$imgrow[medialinkID]\" width=\"100%\" height=\"1\" onLoad=\"calcHeight(600)\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\"></iframe>"; else echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n"; You can also define the Image Viewer to automatically set the height to the scaled height of the image. Just set the value passed in the calcHeight function to be 1 (instead of 600). You can also adjust this value to be any number you'd like... I found 600 pixels to be about right for my images. Do not change the height property... this should remain set to 1 regardless of what the parameter passed to calcHeight is set to 4) Upload all of the files included in the img_viewer.zip into your TNG directory.
1) Open showmedia.php and add the following line after the tng_header command:
tng_header( $description, $flags );
@include('img_utils.js'); 2) Open showmedialib.php and find the showMediaSource function (around line 292). You need to add the following variable to the global statement just below the existing globals:
global $text, $usefolder, $size, $imagetypes, $htmldocs, $histories_url, $cms, $tngconfig, $videotypes, $recordingtypes;
global $mediatypeID; 3) Also in showmedialib.php, find the following line in the same showMediaSource function (around line 343):
echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n";
and replace it with:
echo "<span id=\"msg\" class=\"normal\">Please wait while the image is loaded...</span><iframe name=\"iframe1\" id=\"iframe1\" src=\"img_viewer.php?mediaID=$imgrow[mediaID]&medialinkID=$imgrow[medialinkID]\" width=\"100%\" height=\"1\" onLoad=\"calcHeight(600)\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\"></iframe>";
If you want the Image Viewer to be active only when displaying documents, you would replace the original line with the following lines:
if ($mediatypeID == "documents")
echo "<span id=\"msg\" class=\"normal\">Please wait while the image is loaded...</span><iframe name=\"iframe1\" id=\"iframe1\" src=\"img_viewer.php?mediaID=$imgrow[mediaID]&medialinkID=$imgrow[medialinkID]\" width=\"100%\" height=\"1\" onLoad=\"calcHeight(600)\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\"></iframe>"; else echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n"; You can also define the Image Viewer to automatically set the height to the scaled height of the image. Just set the value passed in the calcHeight function to be 1 (instead of 600). You can also adjust this value to be any number you'd like... I found 600 pixels to be about right for my images. Do not change the height property... this should remain set to 1 regardless of what the parameter passed to calcHeight is set to 4) Upload all of the files included in the img_viewer.zip into your TNG directory.
1) Open showmedia.php and add the following line after the tng_header command:
tng_header( $description, $flags );
$tngconfig[ssdisabled] = 1; @include('img_utils.js'); 2) Now you need to disable to the slideshow DIV tags.
<?php
if (!$tngconfig[ssdisabled]) { ?> <div id="slideshow"<?php if($size[0]>640) echo " style=\"width:$size[0]px;\""; ?>> <div id="loadingdiv"><?php echo $text[loading]; ?></div> <div id="div1" class="slide"<?php if($size[0]>640) echo " style=\"width:$size[0]px;\""; ?>> <?php } echo "<p class=\"subhead\"><strong>$description</strong></p>\n"; Note that this these edits will disable the slide show feature for any media types that you list in the first line. If you are using the Image Viewer for all media types you simply disable the slide show feature in the Administration pages and ignore the first two lines. You can also choose to use the Image Viewer for multiple media types. If this is the case, just add additional mediatypeID values that you wish to check for. 3) Also in showmedialib.php, find the ShowMediaSource function (around line 292). You need to add the following variable to the global statement just below the existing globals:
global $text, $usefolder, $size, $imagetypes, $htmldocs, $histories_url, $cms, $tngconfig, $videotypes, $recordingtypes;
global $mediatypeID; 4) Again in showmedialib.php, find the following line in the same showMediaSource function (around line 343):
echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n";
and replace it with:
echo "<span id=\"msg\" class=\"normal\">Please wait while the image is loaded...</span><iframe name=\"iframe1\" id=\"iframe1\" src=\"img_viewer.php?mediaID=$imgrow[mediaID]&medialinkID=$imgrow[medialinkID]\" width=\"100%\" height=\"1\" onLoad=\"calcHeight(600)\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\"></iframe>";
If you want the Image Viewer to be active only when displaying documents, you would replace the original line with the following lines:
if ($mediatypeID == "documents")
echo "<span id=\"msg\" class=\"normal\">Please wait while the image is loaded...</span><iframe name=\"iframe1\" id=\"iframe1\" src=\"img_viewer.php?mediaID=$imgrow[mediaID]&medialinkID=$imgrow[medialinkID]\" width=\"100%\" height=\"1\" onLoad=\"calcHeight(600)\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\"></iframe>"; else echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n"; You can also define the Image Viewer to automatically set the height to the scaled height of the image. Just set the value passed in the calcHeight function to be 1 (instead of 600). You can also adjust this value to be any number you'd like... I found 600 pixels to be about right for my images. Do not change the height property... this should remain set to 1 regardless of what the parameter passed to calcHeight is set to 5) Upload all of the files included in the img_viewer.zip into your TNG directory.
Open showmedia.php and do the following modifications:
1) Add the following line after the tng_header command:
tng_header( $description, $flags );
@include('img_utils.js'); 2) Find:
echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n";
and replace it with:
echo "<span id=\"msg\" class=\"normal\">Please wait while the image is loaded...</span><iframe name=\"iframe1\" id=\"iframe1\" src=\"img_viewer.php?mediaID=$imgrow[mediaID]&medialinkID=$imgrow[medialinkID]\" width=\"100%\" height=\"1\" onLoad=\"calcHeight(600)\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\"></iframe>";
If you want the Image Viewer to be active only when displaying documents, you would replace the original line with the following lines:
if ($mediatypeID == "documents")
echo "<span id=\"msg\" class=\"normal\">Please wait while the image is loaded...</span><iframe name=\"iframe1\" id=\"iframe1\" src=\"img_viewer.php?mediaID=$imgrow[mediaID]&medialinkID=$imgrow[medialinkID]\" width=\"100%\" height=\"1\" onLoad=\"calcHeight(600)\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\"></iframe>"; else echo "<img src=\"$mediasrc\" border=\"0\" $widthstr $heightstr $mapstr alt=\"$description\">\n"; You can also define the Image Viewer to automatically set the height to the scaled height of the image. Just set the value passed in the calcHeight function to be 1 (instead of 600). You can also adjust this value to be any number you'd like... I found 600 pixels to be about right for my images. Do not change the height property... this should remain set to 1 regardless of what the parameter passed to calcHeight is set to 3) Upload all of the files included in the img_viewer.zip into your TNG directory. | |||
|
This site powered by The Next Generation of Genealogy Sitebuilding ©, written by Darrin Lythgoe 2001-2010 |
|||
Search
Print
Login