Gallery gerelateerde vraag[SOLVED]

[René]

In de wiki over de gallery lees ik bij de faq http://forum.cmsmadesimple.org/viewtopic.php?t=37638 hoe je de omschrijving van een foto kan tonen.

Jos vertelt hoe je de omschrijving erbij voegt:

Code: Select all

title="{$image->title}<br/ >{$image->comment|escape:'html'}"

Op zich mooi maar ik zie letterlijk

Code: Select all

<br />

in plaats van een nieuwe regel. Dit gebeurt alleen als ik boven de miniaturen zweef met de muis, als je een foto groot maakt dan werkt het wel. Dit heb ik geconstateerd in Google Chrome.

Kort en bondig vraag ik me af hoe je wèl een nieuwe regel in het title attribuut krijgt?

[Jos]

De beschrijving geldt voor de Lightbox template. In andere *box systemen kan het anders zijn, of zelfs niet mogelijk zonder de javascript code te hacken.

Welke template gebruik jij?

[René]

Hallo Jos,

Ik gebruik Fancy Box. Ik zou het trouwens ook niet erg vinden als bij de miniaturen alleen de titel werd getoond maar dan wordt de omschrijving ook niet bij de uitvergroting getoond, en dat vind ik wel noodzakelijk.


René

[deactivated010521]

----------

[René]

Arnoud, bedankt voor je response.

Ik zou alleen niet weten hoe ik dit moet gebruiken in het sjabloon

René

[deactivated010521]

----------

[René]

Hoi Arnoud,

Ik ben meteen aan de slag gegaan met jouw advies, en bedankt daarvoor!

2 opmerkingen:

1. Als ik hover over een miniatuur, dan weet ik nog steeds niet hoe ik die break wegkrijg? Of is er iets te verzinnen dat de eerste x karakters worden getoond ter grootte van {$image->titlename}??

zie attachment probleem001.gif

2. Is een nieuw probleem... er staat nu bij uitvergroten een symbool voor de titel dat erop duidt dat een image niet getoond kan worden, als ik erover hover is het een link naar 'javascript'
Zoals je ziet wordt de break hier wel goed toegepast.

zie attachment probleem002.gif

René

[René]

Probleem 2 kan genegeerd worden, ik snap waar dat vandaan kwam en heb dat weggehaald

Enige probleem is nu nog dat ik in de title van de miniaturen de breaktag zie.
Maw mijn oorspronkelijke probleem is er nog. Dus ik moet er wellicht mee leren leven dat fototitel en foto-omschrijving achter elkaar in de title van de miniatuur staan...

René

[René]

Nog een laatste poging.
Ik heb in het Javascript gedeelte van de gallery sjabloon geprobeerd om alsnog alleen bij de fancybox (niet bij de miniaturen) de omschrijving erbij te zetten maar mijn beperkte javascript/smarty kennis doet me de das om.
Probleem is dat $image->content niet wordt vertaald naar een waarde. Tweede probleem is dat zelfs als ik test999 met een string vul, bv test999="blabla", die waarde niet aan de functie wordt doorgegeven. Ik zie dan in de uitvergrote foto de titel verschijnen en dan zoiets als [object]. Kan iemand een hint geven?

Code: Select all

<__script__ type="text/javascript">
test999 = {/literal}{$image->comment}{literal};
function formatTitle(title,test999) {
    return '<div id="fancybox-title-over">' + (title && title.length ? '<strong>' + title + '</strong>' : '' ) + '<br />' + test999 + '</div>';
}

$(document).ready(function() {
	$("a.group").fancybox({
		'speedIn':		300,
		'speedOut':	300,
		'overlayColor':	'#000',
		'overlayOpacity':	0.7,
                'titleShow': true,
                'titlePosition': 'over',
                'titleFormat': formatTitle
	});
});
</__script>

[deactivated010521]

----------

[deactivated010521]

----------

[René]

Arnoud,

Ik sta te popelen om dit te implementeren maar ik heb daar vanavond pas tijd voor
Nu al enorm bedankt voor het meedenken en zodra ik het heb kunnen uitproberen laat ik het weten!

Ik heb er alle vertrouwen in dat er [SOLVED] in de titel komt te staan

René

[René]

Even wat feedback:

1. Arnoud, ik heb jouw tooltip getest maar dan zie je naast de prachtige tooltip ook nog de originele popup met helaas lelijke html tags...
Niettemin bedankt voor je moeite

2. Nu het goede nieuws, ik heb eindelijk mijn oorspronkelijke probleem met Fancybox opgelost! Resultaat is als je nu met je muis over de miniaturen zweeft dan zie je alleen de titel van de foto. En als je de foto uitvergroot dan zie je de titel en vervolgens de omschrijving op een nieuwe regel...

Dit kostte me vele uren uitzoeken dus ik deel het graag met dit forum. De oplossing:

a. Sjabloon:

Code: Select all

Vervang:
	{else}
   <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>
	{/if}

door:

	{else}
   <a class="group" href="{$image->file|escape:'url'|replace:'%2F':'/'}" rel="gallery-{$galleryid}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" title="{$image->titlename}" alt="{$image->titlename}<br />{$image->comment}" /></a>
	{/if}

Let op, het is essentieel dat de title wordt verplaatst van de anchor tag naar image tag! (anders werkt de optie titleFromAlt niet, zie javascript gedeelte hieronder...

b. En nu het javascript gedeelte. Je hoeft alleen maar de optie titleFromAlt toe te voegen en op true te zetten:

Code: Select all

<__script__ type="text/javascript">
$(document).ready(function() {
   $("a.group").fancybox({
      'speedIn':      300,
      'speedOut':   300,
      'overlayColor':   '#000',
      'overlayOpacity':   0.7,
      'titleFromAlt': true,
      'titleShow': true,
      'titlePosition': 'over'
});
});
</__script>