Printable View
My client using the theme 'Quantum flat' for his site and in the home he has 'Portfoloi section' to list the product list as like the demo
http://preview.premium-contao-themes...en-teaser.html. In this democlick on the image is redirect to new page.
But my client would like to have the link as lightbox like http://preview.premium-contao-themes...y-galerie.html
Is ther any possibilities to update the nachrichten-teaser.html to have the light box with 'previous' and 'next' option?
Please comment.
Hi
In the slider, change the <a> href value by the link of the image and add class="cboxElement" in the <a> who contains the <img>
Hope that solve the problem :-)
No the class is just to formate with CSS.
You have to add the attribute data-lightbox="myAlbum". All A-elements with "myAlbum" get paginated in the lightbox. If you don't want pagination use different values for each A-element "lb01", "lb02" ....
Are you sure ? Because when I delete the "data-lightbox" attribute, the lightbox appears on click on the <img>.
But when I delete the class, it just create a new window with the img.
The Trigger is maybe on the class, and the attribute "data-lightbox" is just here to connect <img> in the lightbox.
The jQuery colorbox searches for A-elements with attribute "data-lightbox" and adds a colorbox() to those elements.
https://github.com/contao/core/blob/...colorbox.html5
Content in opening lightbox is the value of the href attribute.
That the lightbox did not work anymore when you remove the class with f.e. firebug seems to be a sideeffect.
Okay :-)
Thanks for your comments.
It is working fine.
One more help, in the light box I would like to add embed videos from youtube.
I mean in the gallery if it has any embed video then it should play in the gallery itself or in lightbox.
Is that possible?
Please comment.
Also in the light box preview I would like to show an enlarged image. i.e in the page, it will have thumb image, click on it will open a light box with enlarged image.
So in adminpanel. I have to select both thumb image and enlarged image or te system auto generate te thumb image.
Please help me to set enlarged image for light box.
Thanks again.
Here is the manual of the Colorbox (the jQuery lightbox used in Contao) http://www.jacklmoore.com/colorbox/
Here is the source https://github.com/jackmoore/colorbox
Here are the FAQs where you find informations for youtube videos http://www.jacklmoore.com/colorbox/faq/#faq-youtube
(The MooTools lightbox used in Contao is the mediaboxAdvanced http://iaian7.com/webcode/mediaboxAdvanced)
What you get in opened lightbox is always determined by the href-attribute. The thumbs are irrelevant and can be anything i.e. simple text "click me". Even if you have a set of A-Elements for i.e. an album, you can hide the A-Elements with CSS (show only one of them) and with a click on this one A-Element you open the lightbox and can page flip through your album. Those hidden A-Elements don't even need a text or thumb.
If Contao offers you a field to adjust the thumbnails somewhere in BE, Contao generates those thumbs to /assets/images and manages them for you.
The image that is shown in the lightbox should be the original, you can control this with a look at the html-code. A lightbox resizes the original virtually with CSS if it is too big.
Watch out - some available Contao-Themes virtualy scale the thumbs with CSS.