large image w/ surrounding thumbnails in viewlisting page

[spaceboy]

Anyone know where I might find a thread explaining the code to create one large listing image on the viewlisting page with smaller thumbnails to the side or underneath the large image?

[Eric Barnes]

Do you mean something like this?
http://www.oceanlakesclassifieds.com...-Highrise.html

[HotAir]

I like that better than the pop-up photo viewer! is the code around somewhere?

Thanks,
HotAir

[Eric Barnes]

Sure since that is our site I will share the code.

viewlisting.tpl.php file

Add:

{* This the image display portion *}
<script type="text/javascript" language="javascript">
{literal}
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.href;
  if (whichpic.title) {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
{/literal}
</script>
                 {if $viewphotos=="Y"}
                     {if $data<>""}
                     
    <table width="100%"  border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="80%">
          
          {section name=image loop=$data max=1}
<p align="center"><img id="placeholder" src="photos/{$data[image].image}" alt="" class="imageborder" /></p>
            <strong><p align="center" id="desc">{$data[image].title}</p></strong>
            {/section}</td>
          <td>
          <DIV STYLE="height:320px; width:170px;overflow:auto">
               <div align="center">
                         {foreach from=$data item="entry"} <a onclick="return showPic(this)" href="photos/{$entry.image}" title="{$entry.title}"><img src="thumbs/small_{$entry.image}" hspace="5" vspace="5" border="0" class="imageborder" /></a>
                         {/foreach}
                    </div>
          </div>
          </td>
     </tr>
</table>
 {/if}
                 {/if}
                 {* This ends the image display portion *}

[VanWertAds*com]

Nice... I think I'll add this to my site also... Man just when I thought I was almost done I keep finding more things to change... thanks for the code! -Josh

[HotAir]

Thank you Eric, that's great!

I was testing it in a clean install, nd found one minor bug. If there are no captions for the photos it generates a javascript error. So I added a non breaking space to the end of each photo caption (the image title) and it fixed the problem. Here is the adjusted code:

{* This the image display portion *}
<script type="text/javascript" language="javascript">
{literal}
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.href;
  if (whichpic.title) {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;
  } else {
   document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;
  }
  return false;
 } else {
  return true;
 }
}
{/literal}
</script>
                 {if $viewphotos=="Y"}
                     {if $data<>""}
                     
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="80%">
          
          {section name=image loop=$data max=1}
<p align="center"><img id="placeholder" src="photos/{$data[image].image}" alt="" class="imageborder" /></p>
            <strong><p align="center" id="desc">{$data[image].title}&nbsp;</p></strong>
            {/section}</td>
          <td>
          <DIV STYLE="height:320px; width:170px;overflow:auto">
               <div align="center">
                         {foreach from=$data item="entry"} <a onclick="return showPic(this)" href="photos/{$entry.image}" title="{$entry.title}&nbsp;"><img src="thumbs/small_{$entry.image}" hspace="5" vspace="5" border="0" class="imageborder" /></a>
                         {/foreach}
                    </div>
          </div>
          </td>
     </tr>
</table>
 {/if}
                 {/if}
                 {* This ends the image display portion *}

[VanWertAds*com]

Just added to my site and looks great!... Thanks again for the code. -Josh

[spaceboy]

looks great!

the only bug is how to not show the thumbnail if they only upload one image

any ideas on how to do this?

[Jessej]

This looks really nice, where do I go to place this code?

[whoazone]

I'm sorry, but where exactly do I plug this code in? do I add it or replace something with it? waiting anxiously...
(this is re: the code which will allow one large image w/caption and clickable thumbnails on the side)