Home › Forums › Porto – Responsive HTML5 Template › Zoom Image Gallery + Carousel not working as expected
Tagged: ligthbox carousel
- This topic has 4 replies, 2 voices, and was last updated 8 years, 8 months ago by ljsimon. This post has been viewed 4752 times
-
AuthorPosts
-
July 27, 2015 at 8:52 am #10009891ljsimonParticipant
Hi!
I’m trying to markup a Zoom Image Gallery + Carousel, but images appear stacked vertically. Zoom works as expected, and Safari tools don’t throw me javascript error.
My markup:
<div class="lightbox" data-plugin-options='{"delegate": "a", "type": "image", "gallery": {"enabled": true}, "mainClass": "mfp-with-zoom", "zoom": {"enabled": true, "duration": 300}}'> <div class="owl-carousel stage-margin" data-plugin-options='{"items": 5, "margin": 10, "loop": false, "nav": true, "dots": false, "stagePadding": 40}'> <div> <a href="/images/v2015/laboratorios/laboratorios-ambientales-1.jpg"> <img src="/images/v2015/laboratorios/laboratorios-ambientales-1.jpg" alt="Laboratorio de Ambientales" /> </a> </div> <div> <a href="/images/v2015/laboratorios/laboratorios-ambientales-2.jpg"> <img src="/images/v2015/laboratorios/laboratorios-ambientales-2.jpg" alt="Laboratorio de Ambientales" /> </a> </div> <div> <a href="/images/v2015/laboratorios/laboratorios-ambientales-3.jpg"> <img src="/images/v2015/laboratorios/laboratorios-ambientales-3.jpg" alt="Laboratorio de Ambientales" /> </a> </div> <div> <a href="/images/v2015/laboratorios/laboratorios-ambientales-4.jpg"> <img src="/images/v2015/laboratorios/laboratorios-ambientales-4.jpg" alt="Laboratorio de Ambientales" /> </a> </div> <div> <a href="/images/v2015/laboratorios/laboratorios-ambientales-5.jpg"> <img src="/images/v2015/laboratorios/laboratorios-ambientales-5.jpg" alt="Laboratorio de Ambientales" /> </a> </div> </div>
July 27, 2015 at 10:58 am #10009896SupportKeymasterHello,
Could you please send me the URL of your site so I can check that problem?
I made a quick test using the HTML you sent (just changing the images) and it worked well.
Kind Regards,
Jonas
July 28, 2015 at 4:04 am #10009919ljsimonParticipantThis reply has been marked as private.July 29, 2015 at 11:18 am #10009938SupportKeymasterHello, looks like the CSS is not being loaded in the page.
<link rel="stylesheet" href="vendor/owlcarousel/owl.carousel.min.css" media="screen"> <link rel="stylesheet" href="vendor/owlcarousel/owl.theme.default.min.css" media="screen">
So please download the theme again and update the folder vendor/owlcarousel.
Please try that and let me know if you need further assistance.
Kind Regards, Jonas
July 30, 2015 at 4:27 am #10009947ljsimonParticipantOMG Why did I forget those files?!?!?!?
Thanks!!! It works 🙂
Greetings,
LJ
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.