Display full size photo of first photo on viewlisting.tpl

[cwp +]

Anyone have some code they can paste over to make the first full size image of each listing display? An example is this - http://www.oceanlakesclassifieds.com...-Highrise.html

Something like this would make the listing pages stand out.


I found this thread - http://www.68classifieds.com/forums/...ht=viewlisting but it's almost a year old, and seems to be for v3


This is what I've come up with next, but gives me an error when I display the page.

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="761">
  <tr>
    <td width="100%"> </td>
  </tr>
  <tr>
    <td width="100%"> 		  			<script type="text/javascript" language="javascript">
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;
 }
}
                    </script>
<table width="100%"  border="0" cellspacing="0" cellpadding="0">
     <tr>
          <td width="80%">
		  <p align="center">
          <img id="placeholder" src="photos/img_1442.jpg" alt="" class="imageborder" width="400" height="300" /></p>
			<strong><p align="center" id="desc">[[title]]</p></strong>
			</td>
          <td>
		  <DIV STYLE="height:320px; width:170px;overflow:auto">
		       <div align="center">
	 {* This the image display portion *}
	{if $viewphotos=="Y"}
		{if $data<>""}
			{html_table_adv loop=$data cols=$cols table_attr='width="100%"'}
					      <a onclick="return showPic(this)" href="{$smarty.const.URL}/viewimage.php?photo=[[id]]" title="[[title]]">
                          <img src="thumbs/small_[[image]]" hspace="5" vspace="5" border="0" class="imageborder" width="150" height="113" /></a>
                          {/html_table_adv}
                          {else}
			<img src="templates/{$smarty.const.MAIN_TEMPLATE}/images/nophoto.gif" width="100" hspace="5" vspace="5" border="1" />
		{/if}
	{/if}
	{* This ends the image display portion *}
					      					     		            </div>
		  </div>
		  </td>
     </tr>
</table></td>
  </tr>
  <tr>
    <td width="100%"> </td>
  </tr>
</table>

[spaceboy +]

this is what I use, not sure where I found the code I started from...

{* This the image display portion *}
<script type="text/javascript" language="javascript">
{literal}
function showPic (whichpic) {
 if (document.getElementById) {
  document.getElementById('placeholder').src = whichpic.href;
  return false;
 } else {
  return true;
 }
}
{/literal}
</script>
                 {if $viewphotos=="Y"}
                     {if $data<>""}
    <table width="375" height="350" border="0" align="center" cellpadding="0" cellspacing="0">
     <tr>
          <td width="350" height="300" align="center">
          {section name=image loop=$data max=1}
			<table border="1" align="center" cellpadding="5" cellspacing="0" bordercolor="#FFFBE7" bgcolor="#333333" style="border-collapse: collapse">
				<tr>
					<td>
					<p align="center">
					<img id="placeholder" src="photos/{$data[image].image}" alt="" class="imageborder" style="border-left:2px solid #999999; border-right:2px solid #999999; border-top:2px solid #999999; border-bottom:2px solid #999999; " width="350" />{/section}</p>					</td>
				</tr>
			</table></td>
     </tr>
     <tr>
          <td valign="top" height="60" align="center">
                <table border="0" cellpadding="10" cellspacing="0" bgcolor="#E3E4E6">
  <tr>
    <td height="10">
             {foreach from=$data item="entry"}
			<a onClick="return showPic(this)" href="photos/{$entry.image}">
			<img src="thumbs/small_{$entry.image}" hspace="0" vspace="0" border="0" class="imageborder" width="60" height="45" alt="" align="center" style="border: 2px solid #666666; "/></a>
                         {/foreach}    </td>
  </tr>
</table>
                    </div></td>
     </tr>
</table>
 {/if}
                 {/if}
                 {* This ends the image display portion *}

looks like this: sample

[cwp +]

Lindsay,
Thanks for the contribution. I really like this setup as well!