How to create a custom image gallery using URL placeholders

You can insert the following HTML snipet into your eBay template and it will show a large image with thumbnails for the supplemental images.

<div id="ImgGal">
    <br>
    <table cellspacing="0" cellpadding="0" align="center" style="width: 492px;">
        <br>
        <tbody>
            <br>
            <tr>
                <br>
                <td valign="100" align="center" style="width: 492px; height: 492px;">
                    <br>
                    <div width="492" height="492"> <img alt="" width="328" src="#?ImageFileMedium?#" id="mainImage" name="mainImage" /> </div>
                    <br> </td>
                <br>
                <td style="vertical-align: 100px;">
                    <br> <img alt="" onmouseover="document.images['mainImage'].src='#?ImageFileMedium?#';" src="#?ImageFileMedium?#" style="width: 94px; height: 94px; cursor: pointer; border: 1px solid #000000;" />
                    <br />
                    <br> <img alt="" id="supp1" name="supp1" onmouseover="document.images['mainImage'].src='#?SupplementalImageURL01?#';" src="#?SupplementalImageURL01?#" style="width: 94px; height: 94px; cursor: pointer; border: 1px solid #000000;" />
                    <br>
                    <br />
                    <br> <img alt="" id="supp2" name="supp2" onmouseover="document.images['mainImage'].src='#?SupplementalImageURL02?#';" src="#?SupplementalImageURL02?#" style="width: 94px; height: 94px; cursor: pointer; border: 1px solid #000000;" />
                    <br>
                    <br />
                    <br> <img alt="" id="supp3" name="supp3" onmouseover="document.images['mainImage'].src='#?SupplementalImageURL03?#';" src="#?SupplementalImageURL03?#" style="width: 94px; height: 94px; cursor: pointer; border: 1px solid #000000;" />
                    <br>
                    <br />
                    <br> </td>
                <br> </tr>
            <br> </tbody>
        <br> </table>
    <br>
</div>


You can also insert this script before the end BODY tag to toggle visibility of the additional suplimental images in the event that they are not available:

 <script language="javascript" type="text/javascript">
if ("#?SupplementalImageURL01?#" == "")
document.getElementById('supp1').style.visibility='hidden';
if ("#?SupplementalImageURL02?#" == "")
document.getElementById('supp2').style.visibility='hidden';
if ("#?SupplementalImageURL03?#" == "")
document.getElementById('supp3').style.visibility='hidden';
 </script>

How did we do?