Page 1 of 1
[SOLVED] GALLERY - how to have one thumb and the rest hidden?
Posted: Fri Feb 12, 2010 10:25 am
by 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
Re: GALLERY - how to have one thumb and the rest hidden?
Posted: Fri Feb 12, 2010 10:59 am
by 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.
Re: GALLERY - how to have one thumb and the rest hidden?
Posted: Fri Feb 12, 2010 11:42 am
by 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
Re: [SOLVED] GALLERY - how to have one thumb and the rest hi
Posted: Tue Mar 08, 2011 11:23 am
by 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}
Re: [SOLVED] GALLERY - how to have one thumb and the rest hi
Posted: Fri May 06, 2011 7:24 am
by 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!
Re: [SOLVED] GALLERY - how to have one thumb and the rest hi
Posted: Sun Jun 03, 2012 10:02 am
by 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?
Re: [SOLVED] GALLERY - how to have one thumb and the rest hi
Posted: Sun Jun 03, 2012 12:42 pm
by Jos
No, but you could file a feature request for that
Re: [SOLVED] GALLERY - how to have one thumb and the rest hi
Posted: Thu Jun 07, 2012 10:52 am
by 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"> </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
Re: [ReOPEN] GALLERY - how to have one thumb and the rest hi
Posted: Wed Jan 30, 2013 12:02 pm
by 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"> </div>
</div>
View
http://www.plattformlaax.ch/index.php?seite=valserstein for the problem.
Thanxs in advance
Re: [SOLVED] GALLERY - how to have one thumb and the rest hi
Posted: Wed Jul 30, 2014 11:59 am
by 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.