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">
    <table cellspacing="0" cellpadding="0" align="center" style="width: 492px;">
         <tbody>
                 <tr>
                     <td valign="100" align="center" style="width: 492px; height: 492px;">
                                <div width="492" height="492">                <img alt="" width="328" src="#?ImageFileMedium?#" id="mainImage" name="mainImage" />            </div>
                     </td>
                     <td style="vertical-align: 100px;">           
                         <img alt="" onmouseover="document.images['mainImage'].src='#?ImageFileMedium?#';" src="#?ImageFileMedium?#" style="width: 94px; height: 94px; cursor: pointer; border: 1px solid #000000;" /><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 />
                         <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 />
                         <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 />
                     </td>
                 </tr>
        </tbody>
     </table>
</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?