[Opgelost] Lightbox / slideshow

[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

[Jos]

Al de Gallery module geprobeerd?

[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

[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.

Code: Select all

{Gallery dir='naam'}

Bij naam geef je aan hoe je hebt genoemt. bijvoorbeeld in dit geval algemeen.

Succes!

[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.

[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

[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

[sjoerdd87]

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.

[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.

[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">&nbsp;</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.