CGimage + Lightbox/fancybox

[Haghorst]

In de CGBlog module maak ik gebruik van images die ik aanroep via CGimage. Nu wil ik deze graag weergeven via lightbox of iets dergelijks wanneer je op de thumbnail klikt. Nu opent hij de image wel maar dus niet via lightbox, fancybox oid.

Kan iemand mij helpen? Alvast bedankt!
Onderstaand de gebruikte code om de CGimage aan te roepen.

Code: Select all

{if $entry->CGimage}
{assign var=path value=$entry->file_location}
{assign var=image value=$entry->CGimage}
<a class="lightbox" href="{CGSmartImage src1=$entry->file_location src2=$entry->CGimage notag=1 noembed=1}">
{CGSmartImage src1=$entry->file_location src2=$entry->CGimage filter_croptofit="169,103,tc"}</a>{/if}

[velden]

Dit stukje code zal wel goed in elkaar zitten maar het gaat natuurlijk om de integratie van jQuery, lightBox en de aanroep daarvan.

Om dat na te kijken zou een link naar de betreffende pagina wel helpen. En als dat niet kan dan eventueel het gebruikte template posten waarin dat stukje javascript wordt gebruikt.

[Haghorst]

@Velden

Ja inderdaad, dat deel begrijp ik niet echt.
Hier de url: http://goo.gl/4qV9bt

Er staan 2 images die openen in het eigen scherm. Hopelijk is het duidelijk?
Alvast bedankt voor je hulp. Als je nog iets nodig hebt hoor ik het graag.

[velden]

Volgens mij is de uitleg op http://lokeshdhakar.com/projects/lightbox2/ best duidelijk.

lightbox downloaden en uitpakken. Bestanden uploaden naar je website (bijvoorbeeld naar /uploads/lightbox)
2 .js files linken in je template
1 .css file linken in je template

Aan beide <a...> een data-lightbox="..." toevoegen en dan zou het al moeten werken denk ik.
Zorg dat je goede links aan maakt. Gebruikt {uploads_url} in je src. Bijv:

Code: Select all

<__script__ src="{uploads_url}/lightbox/js/jquery-1.10.2.min.js"></__script>
<__script__ src="{uploads_url}/lightbox/js/lightbox-2.6.min.js"></__script>
<link href="{uploads_url}/lightbox/css/lightbox.css" rel="stylesheet" />

[Haghorst]

Bedankt. Het is inderdaad vrij duidelijk, ik wist echter niet waar ik moest zoeken. Nu zit ik nog met het probleem dat de foto etcetera erg donker is. Even kijken hoe ik dat kan oplossen. Als je tips hebt hoor ik het graag!

[velden]

Code: Select all

.lightboxOverlay {
    background-color: #000000;
    display: none;
    left: 0;
    opacity: 0.8;
    position: absolute;
    top: 0;
    z-index: 9999;
}

#lightbox {
    left: 0;
    line-height: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 100;
}

De lightbox overlay (de donkere transparante 'achtergrond') heeft een hogere z-index dan de #lightbox div zelf. Dus de achtergrond wordt een voorgrond.

Maar er 99 van ipv 9999 en het werkt bij mij. Maar dat betekent wel dat je natuurlijk geen andere elementen in je site een z-index moet geven groter dan 98.

[Haghorst]

Top, het werkt.
Erg bedankt.

[Haghorst]

@Velden

Ik zou dit ook graag willen toepassen in mijn album:
http://goo.gl/4tGWUB

Echter krijg ik dit niet voor elkaar.
Dit is de code:

Code: Select all

 <li>
          <a href="{$image->file}" rel="lightbox">
            <img src="{$image->thumb}" longdesc="url" class="image{$image->fileid}">
          </a>
        </li>

Wellicht dat ik iets moet doen met:

Code: Select all

longdesc="url"