Image Preview

From TNG Wiki
Jump to: navigation, search

The following describes how the Image Preview in TNG 10.1.2 is driven.

TNG Template footer.php

The changes made in TNG 10.1.2 to support the image preview correctly on smart phones and tablets, require that you use the TNG templates/templateN footer.php code from TNG 10

So if you are using your own custom footer.php files, at a minimum you need to add the following php statements to that file

        $flags['basicfooter'] = true;
        echo tng_footer($flags);

Note that these lines must be enclosed within a php section if added in an html section of the footer.php, so enclose it in the php open and close tags as shown here

<?php
    $flags['basicfooter'] = true;
    echo tng_footer($flags);
?>

You may also need to add $flags to the global line

<?php global $currentuser, $text, $tng_version, $flags;
?>

The tng_basicfooter function does not get processed by the tng_footer function unless the $flags['basicfooter'] is set to true and the tng_basicfooter function is what generates the <script> for the jQuery function that binds the mouseover to a touchstart based on the media-preview class.

Creating Your Own Custom Pages with Image Preview

media-preview class

If you created your own php pages that contain thumbnails for which you want preview to work, then your thumbnail image must include

class="media-preview"

such as the following generated code from getperson.php

<td valign="top" class="databack" align="center"><div class="media-img"><div class="media-prev" id="prev3_523" style="display:none"></div></div>
<a href="showmedia.php?mediaID=3&amp;medialinkID=523" class="media-preview" id="img-3-523-photos%2FRoy_Maxime_Family.jpg"><img src="photos/Roy_Maxime_Family-thumb.jpg" border="0"  width="50" height="32" alt="Roy, Maxime and Elise (Bouchard) family " title="Roy, Maxime and Elise (Bouchard) family " class="thumb" /></a></td>

The class="media-preview" is used to drive the jQuery function that binds the onmouseover to a touchstart event for the smart phones.

$flags['imgprev']

The image preview also requires that the php page set the appropriate $flags['imgprev'] to true

$flags['imgprev'] = true;

call tng_footer

at the end of the page call the tng_footer function

tng_footer("");

so that the TNG generated code looks something like the following

<tr class="t18">
<td valign="top" class="databack" align="center"><div class="media-img"><div class="media-prev" id="prev3_523" style="display:none"></div></div>
<a href="showmedia.php?mediaID=3&amp;medialinkID=523" class="media-preview" id="img-3-523-photos%2FRoy_Maxime_Family.jpg"><img src="photos/Roy_Maxime_Family-thumb.jpg" border="0"  width="50" height="32" alt="Roy, Maxime and Elise (Bouchard) family " title="Roy, Maxime and Elise (Bouchard) family " class="thumb" /></a></td>
<td valign="top" class="databack"><a href="showmedia.php?mediaID=3&amp;medialinkID=523">Roy, Maxime and Elise (Bouchard) family </a><br />Postcard photo of Maxime and Elise (Bouchard) Roy family provided by Therese (Nadeau) Roy</td>
</tr>