MODIFICATION: Changing the photo layout on the viewlisting.tpl page.

[cwp +]

There are currently 2 different ways that I know of to change the way the photos appear. Credit goes to spaceboy for example one, and for example two the credit goes to suzkaw. Just plug the code into your viewlisting.tpl template. Remember to have a backup on hand if you find out that you don't either of them.

Example 1:

{* 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 *}

Example 2:

  {* This the image display portion *}
			     {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:180px;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 *}

[crystal +]

Excellent mod... thank you cwp! I am using the first one in the viewlisting2.tpl template (so the photos are on top). Also looks good with the photos on the right (in viewlisting.tpl).

Is there any way to add to the code so that if the user only has one photo the thumbnail does not appear? This would be an awesome addition.

[cwp +]

Originally Posted by crystal

Excellent mod... thank you cwp! I am using the first one in the viewlisting2.tpl template (so the photos are on top). Also looks good with the photos on the right (in viewlisting.tpl).

Is there any way to add to the code so that if the user only has one photo the thumbnail does not appear? This would be an awesome addition.

I'm sure theres a way to do this with smarty, but I don't know how. I didn't even write the code that you see above, I just gathered it from the forums and put it here so people months or a year in the future would be able to find it easily.

[crystal +]

Originally Posted by cwp

I'm sure theres a way to do this with smarty, but I don't know how. I didn't even write the code that you see above, I just gathered it from the forums and put it here so people months or a year in the future would be able to find it easily.

Right, well thank you spaceboy for the code and thanks cwp for the gathering of. If anyone could point me in the right direction of how to do an {if} statement on those thumbnails, that would be great!

[crystal +]

Still working on trying to get the thumbnail to only appear when there are 2 or more photos. Any suggestions? I am also wondering how to show the title of the images and have them change when clicking a thumbnail.

In version 2 of the image changes that were posted, the title appears under the first photo, but it does not change when clicking different thumbs. How do I change the title with the photo? There is an error in the version 2 code that was posted... it does not work unless you add the javascript (the code between and including the <script> tags) from the first example.

Any help is always appreciated!

[JP2 Designs +]

Thanks for providing these parts of code. exactly what i needed

Thanks

[seymourjames +]

Tongue in cheek CWP. The debug feature of 68C shows you the variables available and you can see it in the template file.

Google is your friend.

Smarty :: View topic - How to find the length of an array?

You can make a test on {$data|@count} to see if you have 2 images in the array. Any logic you like. Like this

{if $data|@count == 1}
Hello Everyone
{/if}

[JP2 Designs +]

Hey,
Just trying to do a mixture of both where you have the images listed to the right with the thumbnails below but when you click on the bigger image. It will use the thickbox JavaScript.

Example: Trading Hub Classifieds Australia Pram
Code:

<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 border="0" align="center" cellpadding="5" cellspacing="0">
     <tr>
          <td>
          {section name=image loop=$data max=1}
		<table border="1" align="center" cellpadding="5" cellspacing="0" bordercolor="#000" style="border-collapse: collapse">
			<tr>
				<td> 
				 <a href="photos/{$data[image].image}" title="{$data[image].title}" class="thickbox" rel="gallery">
				  <img id="placeholder" src="photos/{$data[image].image}" alt="" class="imageborder" width="250" /></a>{/section}
				</td>
			</tr>
		</table>
</td></tr>
<tr>
   <td valign="top" align="center">
       <table border="1" cellpadding="5" cellspacing="0" bordercolor="#000" style="border-collapse: collapse" width="100%">
<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" height="70" alt="" /></a>
        {/foreach}
    </td>
</tr>
</table>

Any idea on how to make it so the thickbox will bring up the image and then you can go to the next image etc.

Thanks

[Eric Barnes]

I believe you can just add rel="gallery" to your small images and that will make them apart of the set. Not sure if that will cause them to popup in the lightbox though.

[JP2 Designs +]

Originally Posted by Eric Barnes

I believe you can just add rel="gallery" to your small images and that will make them apart of the set. Not sure if that will cause them to popup in the lightbox though.

Yes adding the rel="gallery" to the a:link does add it to the gallery...
Only problem is that it adds an extra image in the gallery but you cannot view it. Not a big issue though