CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

[Opgelost] Lytebox gebruiken in Cataloger

https://forum.cmsmadesimple.org/viewtopic.php?t=27979

Page 1 of 1

[Opgelost] Lytebox gebruiken in Cataloger

Posted: Mon Nov 24, 2008 4:14 pm
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>

Re: Lytebox gebruiken in Cataloger

Posted: Tue Nov 25, 2008 8:35 pm
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>

Re: Lytebox gebruiken in Cataloger

Posted: Tue Nov 25, 2008 10:52 pm
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

Re: Lytebox gebruiken in Cataloger

Posted: Wed Nov 26, 2008 10:39 am
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.

Re: Lytebox gebruiken in Cataloger

Posted: Wed Nov 26, 2008 1:44 pm
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

Re: Lytebox gebruiken in Cataloger

Posted: Wed Nov 26, 2008 2:00 pm
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

Re: Lytebox gebruiken in Cataloger

Posted: Wed Nov 26, 2008 2:52 pm
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

Re: Lytebox gebruiken in Cataloger

Posted: Wed Nov 26, 2008 2:58 pm
by wpbremer
Bedankt Dee,

had dat over het hoofd gezien.

het werkt nu.
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited