Page 1 of 1
Slim Box and Album {solved}
Posted: Wed May 23, 2007 5:05 am
by kcharity
I have a version of album running Slimbox however I am having issues with it....
Previous and next are not appearing when rolling over images.
Caption will appear but how to I remove the file name?
How do I add image x of x?
I have looked on Slimbox site but have not been able to find out how to do this. Any help would be great.
thanks
K
Re: Slim Box and Album {solved}
Posted: Wed May 23, 2007 5:38 am
by kcharity
So after spending some more time with it I answered my own questions. The solution was in the album template. For anyone wondering how I did it here is the template.
Code: Select all
{* Include JS files. You can move this to the head of your page template if you want *}
<!--Slimbox stuff-->
<link rel="stylesheet" href="modules/Album/templates/db/slimbox/css/slimbox.css" type="text/css" media="screen" />
<__script__ type="text/javascript" src="modules/Album/templates/db/slimbox/js/mootools.v1.1.js"></__script>
<__script__ type="text/javascript" src="modules/Album/templates/db/slimbox/js/slimbox.js"></__script>
{* Album List *}
{if !$album}
<ul class="albumlist">
{foreach from=$albums item=album}
<li class="thumb">
<a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name}" title="{$album->name} - {$album->comment}" /></a>
<p class="albumname">{$album->name}<br />
<span class="albumpicturecount">({$album->picturecount} images)</span><br />
<span class="albumcomment">{$album->comment}</span></p>
</li>
{/foreach}
</ul>
{else}
{* Photo List *}
<p><strong>{$album->name}</strong><br />
{$album->comment}<br />
<span class="instructiontext">Click on a thumbnail to view a larger image. Click on the larger image, to close it. {if $returnlink}<a href="{$returnlink}">Return to the album index page</a>{/if}</span></p>
{if $pagecount>1}
<p class="albumnav">
<a href="{$link.page.first}" title="first page"><< </a>
{if $link.page.previous}<a href="{$link.page.previous}" title="previous page">< </a>{/if}
page {$pagenumber}/{$pagecount}
{if $link.page.next}<a href="{$link.page.next}" title="next page"> ></a>{/if}
<a href="{$link.page.last}" title="last page"> >></a>
</p>
{/if}
<ul class="picturelist">
{foreach from=$pictures item=picturesrow}
{foreach from=$picturesrow item=onepicture}
<!--This is the important part that I needed to add per Slimbox website, specifically the rel="lightbox[anynamehere]" I then modified the tag to include "title" and associated the comment -->
<li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[album]" title="{$onepicture->comment}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name} - {$onepicture->comment}" title="{$onepicture->comment}" /></a>
</li>
{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
{/foreach}
{/foreach}
</ul>
{if $picturecount==0}No image{/if}
{/if}
{if $picture->id>0}
{/if}
<div style="clear:both"></div>
I hope this helps someone.