Mooie fotogalerie plaatsen, hoe? Topic is solved

[YouriClaessens]

Ik wil voor mijn foto portfolio een mooie gallery maken. Maar nu wil ik de voorbeeldfoto's in thumbnails en als je erop klikt moet een apart (flash?) venstertje open springen voor in het scherm waarmee je de foto groter ziet en je ook kunt doorklikken naar de volgende of vorige foto.

Is hier een plugin voor te vinden?

[Jos]

Kijk eens naar de module 'Album'. Die doet precies wat je wenst. Kies lightbox als template voor de weergave van foto's. De uitleg bij de module helpt je erbij.

[Arno]

Precies, zo heb ik het het ook gemaakt op www.cultuurweken.nl en www.popupkoor.nl. Het is de standaard album-module in combinatie met een lightview-script (http://www.nickstakenburg.com/projects/lightview/).

[realrock]

Precies, zo heb ik het het ook gemaakt op www.cultuurweken.nl en www.popupkoor.nl. Het is de standaard album-module in combinatie met een lightview-script (http://www.nickstakenburg.com/projects/lightview/).

Dat ziet er prachig uit Arno!, mag ik vragen hoe je het lightview-scipt van die link ge-importeerd hebt in jou project?

Ik neem aan dat je een nieuw sjabloon hebt aangemaakt onder de album module, en dat je de sripts hebt gekoppelt. Kun je misschien laten zie hoe je het sjabloon aangepast voor het gebruik van de album module?

Voorbaat dank voor je reactie!

[Arno]

Even snel uitgelegd; de scripts van Lightview heb ik geplaatst in de map /uploads/js/lightview. Vervolgens heb ik twee sjablonen aangemaakt in de fotoalbum-module; eentje voor het album-overzicht en eentje voor het album zelf.

De template voor het album-overzicht is:

Code: Select all

{* Album List *}

{if !$album}
<ul class="albumlist">
	{foreach from=$albums item=album}
	<li>
 	<div class="text"><a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name}" title="{$album->name}"{$album->autothumbnailsize} /></a>

<h2><a href="{$album->link}">{$album->name}</a></h2>
{$album->comment}
</div>
</li>
	{/foreach}
</ul>

{/if}

<div style="clear:both"></div>

En die van de albums zelf is:

Code: Select all

{* Album List *}

{if !$album}
<ul class="albumlist">
	{foreach from=$albums item=album}
	<li>
 	<div class="text"><a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name}" title="{$album->name}"{$album->autothumbnailsize} /></a>

<h2><a href="{$album->link}">{$album->name}</a></h2>
{$album->comment}
</div>
</li>
	{/foreach}
</ul>

{else}



{* Photo List *}
<h3>{$album->name}</h3>

{$album->comment}

	{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}
	    <li><a href="{$onepicture->picture}" class="lightview" rel="gallery[{$album->name}]" title="{$album->name} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name} - {$onepicture->comment}" title="{$onepicture->name} - {$onepicture->comment}" /></a>
   	   </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
	    {/foreach}
	{/foreach}
</ul>
<div style="clear:both;"></div>
{if $picturecount==0}No image{/if}
{/if}

<div style="clear:both"></div>

{if $returnlink}<p><a class="terug" href="{$returnlink}">Terug naar het albumoverzicht</a></p>{/if}

Op de pagina waar m'n fotoalbum getoond wordt heb ik dan via de 'opties' tab handmatig deze metadata toegevoegd die gebruikt wordt om de Lightview-scripts te laden:

Code: Select all

{literal}<link rel="stylesheet" type="text/css" href="uploads/js/lightview/lightview.css" />
<__script__ type="text/javascript" src="uploads/js/prototype.js"></__script>
<__script__ type="text/javascript" src="uploads/js/scriptaculous.js?load=effects"></__script>
<__script__ type="text/javascript" src="uploads/js/lightview/lightview.js">
</__script>{/literal}

Dit is even in het kort hoe ik het ingesteld heb staan bij de Pop-Up website. Ik hoop dat je er iets mee kunt.