Gallery
Untitled Image
Description:
No description.
Copyright
Image © Martijn van Steenbergen,
used with permission under a Creative Commons licence.
For more details on licencing and higher resolution copies of this image and
others, please visit http://martijn.van.steenbergen.nl/.
HTML source
The above gallery and rollover is generated by the HTML below.
<div class="gallerybody">
<div class="pagerbox">
<table align="center">
<tr>
<td>
<span class="pagerbutton-inactive"><< First</span>
<span class="pagerbutton-inactive">< Prev</span>
</td>
<td>
Everything to this point is preamble before the magnifier.
<div class="magnifier-bar" sgmagnifier:orientation="horizontal" sgmagnifier:scalingdropoff="4">
The navigation magnifier bar:
The class="magnifier-bar" indicates that this div should be made to behave as a magnifier.
The sgmagnifier: namespace attributes allow you to configure the parameters of the bar without messing with Javascript: orientation - can be horizontal or vertical; scalingdropoff - how sharply it drops off with distance from pointer. See the documentation for more parameters.
<table align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="25" align="center" valign="top">
This table is optional, I'm using it because the images and the page numbers beneath them need to stay nicely aligned while the images resize.
<a href="static_example1.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/618_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
The image has class="magnifier-item" to indicate that is is an item within the bar that should be magnified.
Note that the image used is a 60x60 pixel image, that we've marked as 25x25 in the img tag, this is because we'll be magnifying it and don't want it to look blocky when we do.
You must set the size in the width and height attributes of the img tag rather than via CSS, otherwise sgMagnifier.js has trouble convincing some browsers that the image should change size.
</td>
<td width="25" align="center" valign="top">
<a href="static_example2.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/620_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
<td width="25" align="center" valign="top">
<a href="static_example3.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/621_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
<td width="25" align="center" valign="top">
<a href="static_example4.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/622_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
<td width="25" align="center" valign="top">
<a href="static_example5.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/623_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
<td width="25" align="center" valign="top">
<a href="static_example6.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/624_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
<td width="25" align="center" valign="top">
<a href="static_example7.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/625_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
<td width="25" align="center" valign="top">
<a href="static_example8.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/626_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
<td width="25" align="center" valign="top">
<a href="static_example9.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/627_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
<td width="25" align="center" valign="top">
<a href="static_example10.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/629_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
<td width="25" align="center" valign="top">
<a href="static_example11.html#image"><img
class="thumbnail magnifier-item"
width="25" height="25"
src="images/631_60s.jpg"
alt="Untitled Image"
title="Untitled Image" /></a>
</td>
</tr>
This is the end of the table row with the thumbnails in.
<tr>
<td align="center">
<span class="pagernumber-inactive">1</span>
</td>
<td align="center">
<a href="static_example2.html#image"><span class="pagernumber">2</span></a>
</td>
<td align="center">
<a href="static_example3.html#image"><span class="pagernumber">3</span></a>
</td>
<td align="center">
<a href="static_example4.html#image"><span class="pagernumber">4</span></a>
</td>
<td align="center">
<a href="static_example5.html#image"><span class="pagernumber">5</span></a>
</td>
<td align="center">
<a href="static_example6.html#image"><span class="pagernumber">6</span></a>
</td>
<td align="center">
<a href="static_example7.html#image"><span class="pagernumber">7</span></a>
</td>
<td align="center">
<a href="static_example8.html#image"><span class="pagernumber">8</span></a>
</td>
<td align="center">
<a href="static_example9.html#image"><span class="pagernumber">9</span></a>
</td>
<td align="center">
<a href="static_example10.html#image"><span class="pagernumber">10</span></a>
</td>
<td align="center">
<a href="static_example11.html#image"><span class="pagernumber">11</span></a>
</td>
</tr>
This row contains the page numbers beneath each thumbnail.
There's no need to flag these specially, since the table cells they are in will be resized automatically as the cells with the thumbnails in expand.
</table>
</div>
This is the end of the class="magnifier-bar" div, everything below here is the rest of the gallery page.
</td>
<td>
<span class="pagerbutton"><a href="static_example2.html#image">Next ></a></span>
<span class="pagerbutton"><a href="static_example11.html#image">Last >></a></span>
</td>
</tr>
</table>
<br />Image 1 of 11<br />
</div>
<div class="gallerybox">
<img alt="Untitled Image"
title="Untitled Image"
src="images/618_600.jpg" />
</div>
</div>