[SOLVED] GALLERY - how to have one thumb and the rest hidden?

[Mads Rasmussen]

The headline says it.
I want one thumb displayed on the page and when clicked the rest that are hidden can be viewed.

I looked in the template for lightbox and I can't figure out how to do it, so any help will be appreciated.

If it was in pure HTML I would simply create a class-display none.



Mads

[Jos]

This is not very difficult with smarty.

In the template source field you see a foreach loop. If you replace that with this code, you get what you want. Probably some change to the css is nescesary to not see the empty links, just assign the border to the image in stead of the <a>element.

Code: Select all

{assign var='firstimage' value='1'}
{foreach from=$images item=image}
	<div class="img">
	{if $image->isdir}
		<a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}" alt="{$image->title}" /></a><br />
		{$image->title}
	{elseif $firstimage}
   <a href="{$image->file}" title="{$image->title}" rel="lightbox[gallery]"><img src="{$image->thumb}" alt="{$image->title}" /></a>
	{assign var='firstimage' value='0'}
	{else}
   <a href="{$image->file}" title="{$image->title}" rel="lightbox[gallery]">{* no thumb here *}</a>
	{/if}
	</div>
{/foreach}

Note that you can't use the smarty code $smarty.foreach.foo.first here, because it may well be that the first item is a subgallery.

[Mads Rasmussen]

**Thank You** - Jos

Works like a charm.

I inserted a class in CSS

Code: Select all

.gallery .img .hide{  display: none; }

and assigned it here:

Code: Select all

<a class="hide" href="{$image->file}" title="{$image->title}" rel="lightbox[gallery]">{* no thumb here *}</a>

If you ever come to Copenhagen, I'll buy you a beer

Now I only have to find out how to enlarge an image, with out the use of you excellent modul. It sure does save a lot of time, when one finds out how to really use it



Mads

[Jos]

For Fancybox, one could use this code instead:

Code: Select all

{assign var='firstimage' value='1'}
{foreach from=$images item=image}
   <div class="img">
   {if $image->isdir}
      {* commented out: don't show subgalleries
      <a href="{$image->file}" title="{$image->title}"><img src="{$image->thumb}" alt="{$image->title}" /></a><br />
      {$image->title}  *}
   {elseif $firstimage}
   <a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
   {assign var='firstimage' value='0'}
   {else}
   <a class="group hide" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="gallery-{$galleryid}">{* no thumb here *}</a>
   {/if}
   </div>
{/foreach}

[brandy]

I run jcarousel inside the gallery template. Now I want that the last level of the gallery isn´t reached, but shown on the right side
You can see the site on http://www.foto-riedler.com/index.php.
The gallery is biuld up like this

- Gallery
- Men
- ..Name..
- ..Name..
- Women
- ..Name..
- ..Name..

Now when I´m in Women i should see all women-projects, but when I click on them I should see the same level on the left side and the photos of the chosen project on the right side.
Do you understand? I think i can solve the problem with your code!

Thanks a lot!

[SimonJ]

I actually got this working but I wanted it to show the latest gallery, in order. The option latestdir is random and latest just keeps going. Is there another way of doing the last dir in the order you set them?

[Jos]

No, but you could file a feature request for that

[SimonJ]

This is a Lytebox version, I have also added a line to use comments instead of filenames if available.

This is the template source

Code: Select all

<div class="gallery">

{assign var='firstimage' value='1'}
{foreach from=$images item=image}

   
   {if $firstimage}
<div class="img">
            {if !empty($image->comment)}
   <a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->comment}" rel="lyteshow[gallery]" ><img  class="img"  src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
              {else}
   <a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="lyteshow[gallery]"><img  class="img"  src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}"  /></a>
               {/if}
   {assign var='firstimage' value='0'}
   {else}
<div class="img hide">
            {if !empty($image->comment)}
   <a class="group hide" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->comment}" rel="lyteshow[gallery]" >{* *}</a>
              {else}
   <a class="group hide" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="lyteshow[gallery]">{* *}</a>
               {/if}
   {/if}
   </div>
{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>
<div align="center"><br /><a href="index.php?page=photos">View all Galleries</a><br /><br /></div>

This is the template css addition

Code: Select all

 .img.hide {  
display: none; 
}

[hinti]

Hi Guys and Ladies,

concerning this article, i could made it possible to show only one image for starting the gallery.
But i made some changes to put in also a link to open that gallery correctly.
But now i have the problem, that it opens the gallery with the first image showing up twice.

Can someone check this code and perhaps give me a hint?

Code: Select all

<div class="gallery">

{assign var='firstimage' value='1'}
{foreach from=$images item=image}

   {if $firstimage}
<div class="img">
            {if !empty($image->comment)}
   <a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->comment}" rel="prettyPhoto[{$galleryid}]" ><img  class="img"  src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
              {else}
<table style="width: 674px; height: 6px;" border="0">
<tbody>
<tr>
<td style="text-align: left;" valign="top"><strong>{$gallerytitle}<br /><br /></strong><a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="prettyPhoto[{$galleryid}]">Gallerie</a><br /></td>
<td style="width: 75px;"><img src="images/spacer.png" alt="" width="31" height="12" /></td>
<td style="text-align:"left"; width: 300px;" valign="top"><a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="prettyPhoto[{$galleryid}]"><img  class="img"  src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" alt="{$image->titlename}" /></a>
</td>
</tr>
</tbody>
</table>
               {/if}
   {assign var='firstimage' value='0'}
   {else}
<div class="hide">
            {if !empty($image->comment)}
   <a class="group hide" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->comment}" rel="prettyPhoto[{$galleryid}]" >{* *}</a>
              {else}
   <a class="group hide" href="{$image->file|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" rel="prettyPhoto[{$galleryid}]">{* *}</a>
               {/if}
   {/if}
   </div>
{/foreach}
<div class="galleryclear">&nbsp;</div>
</div>

View http://www.plattformlaax.ch/index.php?seite=valserstein for the problem.

Thanxs in advance

[SimonJ]

Did we ever get a latestdir in order? I have re-done this to work with prettyphoto but am still not sure about the ordering.