Family Tree Tips ~ Multimedia Image Popups

Introduction

FH V5 & V6 offer several Multimedia Image Popup options in the Family Tree Wizard ~ Step 7 – Presentation and Behaviour dialogue. Also the Plugin Improve Website or CD DVD HTML offers alternative Image Popups options and hyperlinks to non-image media.

FH V3 & V4 need their HTML files to be edited to offer image popups as explained below.

Web Browsers & Image Popups

Some browsers may object to the JavaScript used by the Image Popups, but http://www.enable-javascript.com/ offers a cure.

  • Internet Explorer
    • Its message is Internet Explorer restricted this webpage from running scripts or ActiveX controls followed by an Allow blocked content button.
    • To eliminate this message click the Cog or Tools, and choose Internet Options and the Security tab.
    • Click Custom level button and in Security Settings - Internet Zone find the Scripting section.
    • In the Active Scripting item select Enable, accept the warning, and click OK.
    • Refresh the displayed page.
  • Mozilla Firefox
    • Image Popups do not work and the image is simply displayed on its own.
    • To correct version 23 or later:
    • Enter about:config in the address bar, and accept the warning I'll be careful, I promise.
    • Enter javascript.enabled in the search bar, right-click javascript.enabled below, and choose Toggle to select true.
    • Alternatively, install an add-on such as No-Script or Quickjava.

V3 & V4 Image Popups

:!: Multimedia images inserted into HTML files by Family Historian V3 & V4 present photos quite well, but are less satisfactory for document images. A popular website feature allows an image thumbnail to be clicked in order to obtain a full-size popup version. Four adjustments must be made to achieve this effect with V3 & V4.

1. Adjust Report Options ~ Adjust the Family Historian Reports to create higher resolution images.

2. Insert HTML Head Code ~ Instruct Family Historian to insert HTML code that calls a Java Script.

3. Edit HTML Image Tags ~ Edit the HTML to yield thumbnail images that popup full-size when clicked.

4. Add Popup Java Script ~ Add the popup Java Script file to the CD/Website folder.

1. Adjust Report Options

In the Report Options on the Pictures tab set each Size to Custom and set all Height and Width to 40” or 100cm or larger.

In the Report Options on the Sources tab set Max Picture Height/Width both to 40” or 100cm or even larger.
Remember to tick Enlarge Small Pictures To Max. Width.

When the Report is created, much higher resolution images are produced.

2. Insert HTML Head Code

In the Wizard Family Tree Wizard ~ Step 8 – Final Details click the Advanced button and insert the following HTML code at the end of the <head> section: to call the Java Script.

<script type="text/javascript" src="custom/fhpopup.js"></script>

3. Edit HTML Image Tags

The HTML edit must insert an anchor <a…>…</a> tag on each image <img src=…> tag to invoke a popup Java Script, and also set the image width="200" for the desired thumbnail size. Then the popup image will have the higher resolution and all the thumbnail images will be neatly aligned. The change is summarised below:

<td><img src="img9-9-99-99.jpg" width="99" height="99" …></td> where img9-9-99-99.jpg is the image filename,
must become:
<td><a href=’javascript:void(0)’ onclick=’fhpopup("img9-9-99-99.jpg")'><img src="img9-9-99-99.jpg" width="200" …></a></td>

If you are familiar with an editor that supports Regular Expressions such as the Utility ~ PSPad Editor then the required expressions are:

Find: <td><img src="(img.+?)" width="[0-9]{1,4}" height="[0-9]{1,4}" (.+?)></td>
Replace: <td><a href='javascript:void(0)' onclick='fhpopup("$1")'><img src="$1" width="200" $2></a></td>

However, these will only work reliably on HTML Tidy V3 & V4 HTML files.

4. Add Popup Java Script

The following Java Script must be placed in a plain text file named fhpopup.js which must be included in the …\Public\FH CD\data\custom folder or the …\Public\FH Web Page\custom folder.

Placing the fhpopup.js file in the custom subfolder prevents it from being deleted when the wizard recreates the pages.

/*
 * Family Historian JavaScript Fullscreen Image Popup Function
 * fhpopup() takes an image filename as its parameter and generates the HTML script to render in the new window
 * fhresize() adjusts the width and height of the image to nearly fill the window depending on their aspect ratios
 */
function fhpopup(filename)
{
 openwindow=window.open('','popup','channelmode=yes,fullscreen=yes,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes');
 openwindow.document.write('<html><head><title>popup</title>');
 openwindow.document.write('<link rel="stylesheet" href="fhstyle.css">');
 openwindow.document.write('<script type="text/javascript">');
 openwindow.document.write('function fhresize()');
 openwindow.document.write('{');
 openwindow.document.write(' var window_height = document.body.clientHeight;');
 openwindow.document.write(' var window_width = document.body.clientWidth;');
 openwindow.document.write(' var image_height = document.images[0].height;');
 openwindow.document.write(' var image_width = document.images[0].width;');
 openwindow.document.write(' var height_ratio = image_height / window_height;');
 openwindow.document.write(' var width_ratio = image_width / window_width;');
 openwindow.document.write(' if (height_ratio > width_ratio)');
 openwindow.document.write(' {');
 openwindow.document.write('  document.images[0].style.height = "92%";');
 openwindow.document.write('  document.images[0].style.width = "auto";');
 openwindow.document.write(' }');
 openwindow.document.write(' else');
 openwindow.document.write(' {');
 openwindow.document.write('  document.images[0].style.height = "auto";');
 openwindow.document.write('  document.images[0].style.width = "98%";');
 openwindow.document.write(' }');
 openwindow.document.write('}');
 openwindow.document.write('</script>');
 openwindow.document.write('</head><body><center>');
 openwindow.document.write('<form action="javascript:void(0)">');
 openwindow.document.write('<input type="button" value="Close Popup Window" onclick="javascript:self.close()">');
 openwindow.document.write('</form>');
 openwindow.document.write('<img src="'+filename+'" onload="fhresize()" alt="popup" border="1">');
 openwindow.document.write('</center></body></html>');
 openwindow.document.close();
 openwindow.focus();
}