Home › Forums › Porto – Responsive HTML5 Template › Show navigation and title in lightbox when opened brom the owl-carousel
Tagged: Lightbox, Owl Carousel
- This topic has 2 replies, 2 voices, and was last updated 8 years, 11 months ago by tdyrlund. This post has been viewed 3035 times
-
AuthorPosts
-
May 13, 2015 at 10:30 am #10008565tdyrlundParticipant
Hi
I’m using the owl-carousel with lightbox option like this – which works fine:
<div class="owl-carousel owl-carousel-spaced" data-plugin-options='{"items": 3}'> <div> <div class="portfolio-item img-thumbnail"> <a class="thumb-info lightbox" href="img/1.png" data-plugin-options='{"type":"image"}'> <img alt="" class="img-responsive" src="img/1_small.png"> <span class="thumb-info-title"> <span class="thumb-info-inner">Title 1</span> </span> <span class="thumb-info-action"> <span title="Universal" class="thumb-info-action-icon"><i class="fa fa-search-plus"></i></span> </span> </a> </div> </div> ...
I would however like to add the navigation (= grouping of the images) and the title at the top of the image as seen in example gallery 2 here:
http://ashleydw.github.io/lightbox/#image-galleryI checked the sourcecode of the above page and it seems like only the following is needed to do that:
<a class="thumb-info lightbox" href="img/1.png" data-gallery="multiimages" data-title="People walking down stairs">
How do I integrate this with the above code? I tried the following without luck:
<a class="thumb-info lightbox" href="img/1.png" data-gallery="multiimages" data-title="People walking down stairs" data-plugin-options='{"type":"image"}'> <a class="thumb-info lightbox" href="img/1.png" data-plugin-options='{"type":"image","title":"Title1"}'>
Using the following adds the title at the bottom of the image – I would like it at the top and also have the white border around the text:
<a class="thumb-info lightbox" title="Title 1" href="img/1.png" data-plugin-options='{"type":"image"}'>
May 14, 2015 at 11:00 am #10008577SupportKeymasterHello, I’ve done something similar in the past, so please try this:
HTML
<div class="owl-carousel owl-carousel-spaced" data-plugin-options='{"items": 3}' id="popupGallery"> <div> <div class="portfolio-item img-thumbnail"> <a class="thumb-info" href="img/projects/project.jpg" title="Caption 1"> <img alt="" class="img-responsive" src="img/projects/project.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Title 1</span> </span> <span class="thumb-info-action"> <span title="Universal" class="thumb-info-action-icon"><i class="fa fa-search-plus"></i></span> </span> </a> </div> </div> <div> <div class="portfolio-item img-thumbnail"> <a class="thumb-info" href="img/projects/project-2.jpg" title="Caption 2"> <img alt="" class="img-responsive" src="img/projects/project-2.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Title 2</span> </span> <span class="thumb-info-action"> <span title="Universal" class="thumb-info-action-icon"><i class="fa fa-search-plus"></i></span> </span> </a> </div> </div> <div> <div class="portfolio-item img-thumbnail"> <a class="thumb-info" href="img/projects/project-3.jpg" title="Caption 3"> <img alt="" class="img-responsive" src="img/projects/project-3.jpg"> <span class="thumb-info-title"> <span class="thumb-info-inner">Title 3</span> </span> <span class="thumb-info-action"> <span title="Universal" class="thumb-info-action-icon"><i class="fa fa-search-plus"></i></span> </span> </a> </div> </div> </div>
CSS
(css/custom.css).mfp-figure-custom { background-clip: padding-box; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 6px; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); outline: 0 none; position: relative; padding: 10px; } .mfp-figure-custom .mfp-bottom-bar { margin: 9px 12px; top: 0; width: 80%; } .mfp-figure-custom .mfp-title { color: #000; } .mfp-figure-custom .mfp-close { color: #000; right: 6px; } .mfp-figure-custom .mfp-counter { position: static; } .mfp-figure-custom img.mfp-img { padding-bottom: 0; }
JS
(js/custom.js)$(document).ready(function() { $('#popupGallery').magnificPopup({ delegate: 'a', type: 'image', tLoading: 'Loading image #%curr%...', mainClass: 'mfp-img-mobile', gallery: { enabled: true, navigateByImgClick: true, preload: [0,1] }, image: { markup: '<div class="mfp-figure mfp-figure-custom">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-bottom-bar">'+ '<div class="mfp-title"></div>'+ '<div class="mfp-counter"></div>'+ '</div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: '<a href="%url%">The image #%curr%</a> could not be loaded.', titleSrc: function(item) { return item.el.attr('title'); } } }); });
May 15, 2015 at 4:15 am #10008597tdyrlundParticipantThanks a lot – it works nicely!
-
AuthorPosts
This topic is marked as "RESOLVED" and can not rceive new replies.