Page 1 of 1
CGimage + Lightbox/fancybox
Posted: Tue Sep 24, 2013 4:17 pm
by 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}
Re: CGimage + Lightbox/fancybox
Posted: Tue Sep 24, 2013 6:17 pm
by 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.
Re: CGimage + Lightbox/fancybox
Posted: Tue Sep 24, 2013 10:29 pm
by 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.
Re: CGimage + Lightbox/fancybox
Posted: Fri Sep 27, 2013 5:29 pm
by 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" />
Re: CGimage + Lightbox/fancybox
Posted: Sat Sep 28, 2013 12:09 pm
by 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!
Re: CGimage + Lightbox/fancybox
Posted: Sat Sep 28, 2013 5:03 pm
by 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.
[OPGELOST] CGimage + Lightbox/fancybox
Posted: Sat Sep 28, 2013 6:19 pm
by Haghorst
Top, het werkt.
Erg bedankt.
Re: CGimage + Lightbox/fancybox
Posted: Sat Oct 05, 2013 12:18 pm
by 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: