Page 1 of 1
[Opgelost] Lightbox / slideshow
Posted: Fri Apr 20, 2012 7:24 pm
by sjoerdd87
Hallo allemaal,
Hoe kan je een lightbox en een slideshow integregen in de website, ik neem aan dat dit met modules gaat, maar ik krijg het niet voor elkaar.
Hoe kan ik een module gebruiken? en kan dit dan ook via de wysiwyg editor?
Alvast bedankt.
Gr. Sjoerd
Re: Lightbox / slideshow
Posted: Fri Apr 20, 2012 10:33 pm
by Jos
Al de Gallery module geprobeerd?
Re: Lightbox / slideshow
Posted: Sat Apr 21, 2012 2:00 pm
by sjoerdd87
nee, nog niet geprobeerd, ik dacht namelijk te lezen dat je hier alleen maar een foto pagina toe kon voegen en geen slideshow, of lightbox met tekst ervoor/erachter.
Ik zal het gaan proberen, enig idee hoe ik dit kan gebruiken?
Gr. Sjoerd
Re: Lightbox / slideshow
Posted: Sat Apr 21, 2012 2:38 pm
by Gangstah
download en instaleer Gallery. Vervolgens kun je naar inhoud -> gallery gaan.
Daar kun je nieuwe 'album' toevoegen. Klik hiervoor op 'voeg subgalerie toe'
Daarin geef je naam aan. Bijvoorbeeld algemeen. Bij sjabloon kun je kiezen welke je wilt gebruiken. Klik vervolgens op opslaan.
Daarna kun je klikken op 'voeg afbeeldingen toe'. Zo voeg je in die album verschillende foto's die je wilt.
Vervolgens wil je natuurlijk ergens op een pagina laten zien, hiervoor geef je onderstaande code in die pagina.
Bij naam geef je aan hoe je hebt genoemt. bijvoorbeeld in dit geval algemeen.
Succes!
Re: Lightbox / slideshow
Posted: Sat Apr 21, 2012 6:31 pm
by sjoerdd87
Het is inderdaad gelukt, helaas staat er een blokje bij om e gallery in te vouwen en ook staat er geen omschrijving bij de foto's, dit is wel erg jammer.
Had liever gehad dat als ik een foto toevoeg via de knop image je hier lightbox in kan stellen.
Gr.
Re: Lightbox / slideshow
Posted: Tue Apr 24, 2012 9:19 am
by sjoerdd87
iemand een idee hoe je zoals een portfolio site zoals
http://forum.cmsmadesimple.org/viewtopi ... 55&t=56727 kan instellen?
Ik gebruik nu de module Gallery, echter wil ik dat er ook tekst naast de foto's gezet kan worden.
Zoals in het voorbeeld op de portfolio pagina.
Gr. Sjoerd
Re: Lightbox / slideshow
Posted: Tue Apr 24, 2012 9:29 am
by Jos
Stap 1: zoek op internet een jquery slider die precies voldoet aan hoe jij het graag hebben wilt
Stap 2: Maak een nieuwe Gallery-template waar je de benodigde code voor die slider in plakt/koppelt en plaats op de juiste plekken de {smary} code en variabelen
Stap 3: Stel je (sub)gallery in met die template
klaar
Re: Lightbox / slideshow
Posted: Tue Apr 24, 2012 7:00 pm
by sjoerdd87
Jos wrote:Stap 1: zoek op internet een jquery slider die precies voldoet aan hoe jij het graag hebben wilt
Stap 2: Maak een nieuwe Gallery-template waar je de benodigde code voor die slider in plakt/koppelt en plaats op de juiste plekken de {smary} code en variabelen
Stap 3: Stel je (sub)gallery in met die template
klaar
Ben ermee bezig geweest, maar krijg het tot nu toe niet voor elkaar, je krijgt de foto's gewoon naast elkaar erg vreemd, misschien dat iemand hier een voorbeeld van heeft?
Gr. Sjoerd.
Re: Lightbox / slideshow
Posted: Tue Apr 24, 2012 7:34 pm
by andre_designer
you got mail. Ik heb de module die ik in m&c factory heb aangemaakt via de mail toegestuurd plus de lightbox die ik heb gebruikt.
Re: Lightbox / slideshow
Posted: Wed Apr 25, 2012 12:10 pm
by sjoerdd87
Na hier en daar wat te vragen ben ik begonnen met de originele gallery module aan te passen.
Hieronder een korte omschrijving:
Ik heb de gallery module (lightbox versie ervan) gekopieerd en helemaal veranderd en de naam DekkerDesign gegeven.
Ik zal het even uitleggen misschien is dit wel handig voor de rest.
je wijzigt de sjabloon die je gekopieerd hebt als volgt:
Voor de miniatuur afbeelding heb ik ingesteld: 250 bij 133 en dan op bijsnijden laten staan.
De sjabloon code:
Code: Select all
<h1>{title}</h1>
<br>
{foreach from=$images item=image}
<h2>{$image->comment|escape:'html'}</h2>
<br>
{if $image->isdir}
<a href="{$image->file}" title="{$image->titlename}"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" width="250px" height="15%" class="img6" alt="{$image->titlename}"></a>
{$image->titlename}
{else}
<a href="{$image->file}" title="{$image->titlename}" rel="lightbox[gallery{$galleryid}]"><img src="{$image->thumb|escape:'url'|replace:'%2F':'/'}" width="250px" height="15%" class="img6" alt="{$image->titlename}" /></a> {/if}
<br><br><br><br><br><br><br><br>
<img src="uploads/DekkerDesign/images/line_bottom.gif" class="img2" width="920px" height="1px" alt="line_bottom">
<br>
{/foreach}
<div class="galleryclear"> </div>
Sjabloon CSS-stylesheet:
Code: Select all
img.img2
{
float: left;
margin-left: 20px;
margin-top: 7.5px;
}
img.img6
{
float: left;
margin-left: 15px;
margin-top: 0px;
border: 0px;
}
h2
{
font-family: Arial;
font-size: 13px;
color: #745e50;
font-weight: normal;
margin: 0;
text-align: left;
margin-left: 15px;
margin-top: 0px;
}
/* LIGHTBOX */
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../lightbox/images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: autopx; z-index: 90; width: 100%; height: 500px; background-color: #000; }
En de javascript code heb ik zo gelaten.
De img 2, img6 en de H2 code staat in de "hoofd stylesheet (template)"
Hierna een gallery aangemaakt met dit sjabloon dan krijg je als het goed is:
http://dekker-design.nl/CMS/index.php?page=test
Ik hoop dat jullie er wat aan hebben.