[Opgelost] Probleem met news en fancybox / modal window

[onamorus]

Hoi,

Voor onze lokale voetbalvereniging ben ik bezig met een redesign van de website.

Op de website is voor elk elftal (dat zijn er ongeveer 40) een eigen pagina aangemaakt, waarop men middels getabde panels de verschillende informatie over het elftal kan bekijken. Zo is er o.a. een kopje voor nieuws en voor wedstrijdverslagen. (zie http://vsv.creativecollective.nl/elftal ... n/zondag-1 als voorbeeld)

Voor het nieuws en de wedstrijdverslagen zijn aparte nieuwscategorieën aangemaakt, zodat elke elftalpagina zijn eigen nieuws en verslagenoverzicht toegewezen kan krijgen. So far, so good.

Nu heb ik wat lopen stoeien met de beste manier om nieuwsberichten te tonen en dan met name de manier om weer terug te komen in de specifieke tab (nieuws of wedstrijdverslag) en dat blijkt een crime…

Uiteraard kan ik een nieuwbericht laten openen in een nieuw venster, maar dat vind ik zelf geen elegante oplossing, dus ik ben aan de slag gegaan om het te proberen met een fancybox of modal window. Zo blijft de actieve tab openstaan en is er geen probleem met het terugkeren naar het nieuwsoverzicht.

Het is me inmiddels gelukt om het enigszins werkend te krijgen, maar als ik het eerste nieuwsbericht open en weer sluit en vervolgens een volgend bericht open, dan komt de tekst van het eerste bericht er in te voorschijn. Ik ben inmiddels al de hele dag bezig om uit vinden hoe ik dit moet fixen, maar kom op geen enkele oplossing. Ben ook niet zo'n codeheld, dus daar loop ik vast…

Weten jullie wellicht een oplossing?

Alvast bedankt,

Romano

Dit is de code die ik gebruik in het samenvattingensjabloon:

Code: Select all

<!-- Start News Display Template -->
{if $pagecount > 1}
  <p class="return">
{if $pagenumber > 1}
{$firstpage}&nbsp;{$prevpage}&nbsp;
{/if}
{$pagetext}&nbsp;{$pagenumber}&nbsp;{$oftext}&nbsp;{$pagecount}
{if $pagenumber < $pagecount}
&nbsp;{$nextpage}&nbsp;{$lastpage}
{/if}
</p>
{/if}

{foreach from=$items item=entry}
<div class="NewsSummaryOud">

{if $entry->postdate}
<div class="NewsSummaryLinkOud">
<a class="fancybox" href="#inline" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</div>
	<div class="NewsSummaryPostdateOud">
		{$entry->postdate|date_format:"%A %e %B %Y"}
	</div>
{/if}
<div id="inline" style="display:none">
		<p>{eval var=$entry->summary}</p>
		<p>{eval var=$entry->content}</p>
{if isset($entry->extra)}
        {eval var=$entry->extra}
	{* {cms_module module='Uploads' mode='simpleurl' upload_id=$entry->extravalue} *}
{/if}
{if isset($entry->fields)}
  {foreach from=$entry->fields item='field'}
        {if $field->type == 'file'}
          <img src="{$entry->file_location}/{$field->value}"/>
        {else}
          {$field->name}:&nbsp;{eval var=$field->value}
        {/if}
  {/foreach}
{/if}

</div>
</div>
{/foreach}
<!-- End News Display Template -->

[velden]

Het is niet toegestaan één ID meerdere keren op één pagina te gebruiken.

Voeg {$entry->id} toe op 2 plaatsen in jouw template.

...
<a class="fancybox" href="#inline-{$entry->id}" title="{$entry->title|cms_escape:htmlall}">{$entry->title|cms_escape}</a>
</div>
<div class="NewsSummaryPostdateOud">
{$entry->postdate|date_format:"%A %e %B %Y"}
</div>
{/if}
<div id="inline-{$entry->id}" style="display:none">
<p>{eval var=$entry->summary}</p>
<p>{eval var=$entry->content}</p>
...

Op die manier krijg je unieke id's zodat fancybox weet welke te gebruiken bij welke link.

[onamorus]

Hoi Velden,

Dat werkt als een zonnetje. Heb veel geprobeerd, maar op die oplossing zou ik zelf niet gekomen zijn.

Bedankt!! Scheelt weer een paar nagels...