[Opgelost] Lytebox gebruiken in Cataloger

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
User avatar
wpbremer
Power Poster
Power Poster
Posts: 455
Joined: Thu Nov 13, 2008 12:15 pm

[Opgelost] Lytebox gebruiken in Cataloger

Post by wpbremer »

Beste mensen,

ik ben met cataloger een verzameling strips aan het uitwerken, het programma werkt uitstekend.

Alleen heb ik een vraagje met betrekking op de item-page, hiervoor gebruik ik de tabel-versie.

Hierin wordt op de pagina boven aan alle afbeeldingen van dit item getoond, door links van het grote plaatje te klikken op een thumbnail dan wordt deze gewisseld met het grote plaatje.
Nu wil ik dit graag veranderen met lytebox, zodat ik in de eerste rij van de tabel een vijftal plaatjes (thumbnails) op een rij krijg en als je hier dan op klikt dat deze thumbnail met lytebox wordt vergroot.

Ik heb diverse pogingen gedaan, maar krijg de code niet werkend, misschien kunnen jullie mij helpen.

Hieronder de code van de item-page welke aangepast moet worden:

Code: Select all

<div class="item">
<table><tr><td><img name="item_image" id="item_image" src="{$image_1_url}" title="{$title}" alt="{$title}" /></td>
<td>{section name=ind loop=$image_url_array}
<a href="javascript:repl('{$image_url_array[ind]}')"><img src="{$image_thumb_url_array[ind]}" title="{$title}" alt="{$title}" /></a>
{/section}</td></tr></table>
{section name=at loop=$attrlist}
<p><strong>{$attrlist[at].name}</strong>: {eval var=$attrlist[at].key}</p>
{/section}
{literal}
<__script__ type="text/javascript">
function repl(img)
   {
   document.item_image.src=img;
   }
</__script>
{/literal}
</div>
Last edited by wpbremer on Wed Nov 26, 2008 3:01 pm, edited 1 time in total.
User avatar
wpbremer
Power Poster
Power Poster
Posts: 455
Joined: Thu Nov 13, 2008 12:15 pm

Re: Lytebox gebruiken in Cataloger

Post by wpbremer »

Ben een stukje verder gekomen, maar krijg lytebox maar niet aan de praat, wie kan mij verder helpen??

op dit moment krijg ik met onderstaande code alle afbeelding mooi als thumbnail naast elkaar. Als ik op een afbeelding klik dan vergroot hij de afbeelding ook keurig, maar gebruikt alleen hiervoor nog geen lytebox. Heb diverse manieren geprobeerd om de link aan te passen zodat hij lytebox gebruik bij het vergroten van de afbeelding alleen het lukt nog niet. Wie helpt mij verder?

Code: Select all

<div class="item">
<table><tr>
<td>
{section name=ind loop=$image_url_array}

<a href="{$image_url_array[ind]}"><img src="{$image_thumb_url_array[ind]}" title="{$title}" alt="{$title}" /></a>

{/section}
</td>
</tr>
</table>
{section name=at loop=$attrlist}
<p><strong>{$attrlist[at].name}</strong>: {eval var=$attrlist[at].key}</p>
{/section}
</div>
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm
Location: the Netherlands

Re: Lytebox gebruiken in Cataloger

Post by Dee »

wpbremer wrote: Als ik op een afbeelding klik dan vergroot hij de afbeelding ook keurig, maar gebruikt alleen hiervoor nog geen lytebox. Heb diverse manieren geprobeerd om de link aan te passen zodat hij lytebox gebruik bij het vergroten van de afbeelding alleen het lukt nog niet. Wie helpt mij verder?
Wat heb je geprobeerd? Kun je een link posten?
Wat ik uit de lytebox documentatie haal zou je

Code: Select all

<__script__ type="text/javascript" language="javascript" src="lytebox.js"></__script>
<link rel="stylesheet" href="lytebox.css" type="text/css" media="screen" />
moeten toevoegen aan de head sectie van je template (i.p.v. het gebruik van een externe stylesheet kun je de stylesheet ook in CMS definieren en aan je template koppelen natuurlijk)
En dan zo'n link gebruiken:

Code: Select all

<a href="{$image_url_array[ind]}" rel="lytebox[groepnaam]" title="{$title}">
  <img src="{$image_thumb_url_array[ind]}" alt="{$title}" />
</a>
Grtz,
D
User avatar
wpbremer
Power Poster
Power Poster
Posts: 455
Joined: Thu Nov 13, 2008 12:15 pm

Re: Lytebox gebruiken in Cataloger

Post by wpbremer »

Beste Dee,

het werkt, bedankt.

Alleen krijg ik nog geen CLOSE en NEXT afbeelding wanneer lytebox zich opent.

Kijk maar even op http://www.wpbremer.nl/index.php?page=dossier-rebecca-r.

en tevens heb ik tussen de afbeeldingen een laag streepje staan, hoe krijg ik die weg?
Inmiddels opgelost door style='text-decoration: none;' toe te voegen.
Last edited by wpbremer on Wed Nov 26, 2008 11:02 am, edited 1 time in total.
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm
Location: the Netherlands

Re: Lytebox gebruiken in Cataloger

Post by Dee »

wpbremer wrote: Alleen krijg ik nog geen CLOSE en NEXT afbeelding wanneer lytebox zich opent.
De plaatjes hiervoor staan gedefinieerd in de stylesheet, bijvoorbeeld voor de "Previous" link:

Code: Select all

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
	#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }
	#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(images/prev_red.gif) left 15% no-repeat; }
	#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(images/prev_green.gif) left 15% no-repeat; }
	#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(images/prev_blue.gif) left 15% no-repeat; }
	#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(images/prev_gold.gif) left 15% no-repeat; }
Doordat de stylesheet in de map "styles" staat zoekt Lytebox de plaatjes nu daar:

Code: Select all

http://www.wpbremer.nl/styles/images/blank.gif
http://www.wpbremer.nl/styles/images/close_grey.png
http://www.wpbremer.nl/styles/images/loading.gif
http://www.wpbremer.nl/styles/images/pause_grey.png
http://www.wpbremer.nl/styles/images/play_grey.png
Je kunt het oplossen door de "images" map te verplaatsen naar de "styles" map.
Wat netter is: de inhoud van styles/lytebox.css kopieren en plakken in een nieuwe Stylesheet in CMS Made Simple en deze vervolgens koppelen aan je template. Dan kun je dit weer verwijderen uit de head sectie:

Code: Select all

<link rel="stylesheet" href="styles/lytebox.css" type="text/css" media="screen" />
Grtz,
D
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm
Location: Raalte, the Netherlands

Re: Lytebox gebruiken in Cataloger

Post by RonnyK »

wpbremer wrote: Alleen krijg ik nog geen CLOSE en NEXT afbeelding wanneer lytebox zich opent.
De plaatjes hiervoor staan gedefinieerd in de stylesheet, bijvoorbeeld voor de "Previous" link:

Code: Select all

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
	#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }
	#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(images/prev_red.gif) left 15% no-repeat; }
	#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(images/prev_green.gif) left 15% no-repeat; }
	#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(images/prev_blue.gif) left 15% no-repeat; }
	#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(images/prev_gold.gif) left 15% no-repeat; }
Doordat de stylesheet in de map "styles" staat zoekt Lytebox de plaatjes nu daar:

Code: Select all

http://www.wpbremer.nl/styles/images/blank.gif
http://www.wpbremer.nl/styles/images/close_grey.png
http://www.wpbremer.nl/styles/images/loading.gif
http://www.wpbremer.nl/styles/images/pause_grey.png
http://www.wpbremer.nl/styles/images/play_grey.png
Je kunt het oplossen door de "images" map te verplaatsen naar de "styles" map.
Wat netter is: de inhoud van styles/lytebox.css kopieren en plakken in een nieuwe Stylesheet in CMS Made Simple en deze vervolgens koppelen aan je template. Dan kun je dit weer verwijderen uit de head sectie:

Code: Select all

<link rel="stylesheet" href="styles/lytebox.css" type="text/css" media="screen" />
Grtz,
D
Dee
Power Poster
Power Poster
Posts: 1197
Joined: Sun Mar 19, 2006 8:46 pm
Location: the Netherlands

Re: Lytebox gebruiken in Cataloger

Post by Dee »

wpbremer wrote: Alleen krijg ik nog geen CLOSE en NEXT afbeelding wanneer lytebox zich opent.
De plaatjes hiervoor staan gedefinieerd in de stylesheet, bijvoorbeeld voor de "Previous" link:

Code: Select all

#lbPrev { width: 49%; height: 100%; background: transparent url(images/blank.gif) no-repeat; display: block; left: 0; float: left; }
	#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(images/prev_grey.gif) left 15% no-repeat; }
	#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(images/prev_red.gif) left 15% no-repeat; }
	#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(images/prev_green.gif) left 15% no-repeat; }
	#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(images/prev_blue.gif) left 15% no-repeat; }
	#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(images/prev_gold.gif) left 15% no-repeat; }
Doordat de stylesheet in de map "styles" staat zoekt Lytebox de plaatjes nu daar:

Code: Select all

http://www.wpbremer.nl/styles/images/blank.gif
/styles/images/close_grey.png
/styles/images/loading.gif
/styles/images/pause_grey.png
/styles/images/play_grey.png
Je kunt het oplossen door de "images" map te verplaatsen naar de "styles" map.
Wat netter is: de inhoud van styles/lytebox.css kopieren en plakken in een nieuwe Stylesheet in CMS Made Simple en deze vervolgens koppelen aan je template. Dan kun je dit weer verwijderen uit de head sectie:

Code: Select all

<link rel="stylesheet" href="styles/lytebox.css" type="text/css" media="screen" />
Grtz,
D
User avatar
wpbremer
Power Poster
Power Poster
Posts: 455
Joined: Thu Nov 13, 2008 12:15 pm

Re: Lytebox gebruiken in Cataloger

Post by wpbremer »

Bedankt Dee,

had dat over het hoofd gezien.

het werkt nu.
Post Reply

Return to “Dutch - Nederlands”