Need help with the captions on this gallery slider

Marisa
Marisa used Ask the Experts™
on
If you go to this page and scroll down to the gallery section, https://www.stadriemblems.com/products/enamel-pins-test/ I want the links in the image descriptions to open in their own windows and not behave as if they are part of the image slideshow. This is probably a dumb question, but is there a way to accomplish that without re-configuring all the code and css?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

here is an example with  caption, animation and fading for owl carousel 2  
https://codepen.io/lenamtl/pen/EdYLRJ
leakim971Multitechnician
Top Expert 2014

Commented:
<script>
     jQuery(function($) {
              $(".owl-stage-outer").on("click",".gallery_item_info a", function(event) { 
                      event.preventDefault();
                      var href = $(this).attr("href");
                      window.open(href, "_blank");
              });
     });
</script>

Open in new window

Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
I am guessing the problem is in your static/js/main.js
$('.image-gallery').magnificPopup({
    delegate: 'a',
    type: 'image',
    fixedContentPos: true,
    gallery: {
        enabled: true
    },
    removalDelay: 300,
    mainClass: 'mfp-fade',
    retina: {
        ratio: 1,
        replaceSrc: function(item, ratio) {
            return item.src.replace(/\.\w+$/, function(m) {
                return '@2x' + m;
            });
        }
    }
});
$('.image-gallery2').magnificPopup({
    delegate: 'a',
    type: 'image',
    fixedContentPos: true,
    gallery: {
        enabled: true
    },
    removalDelay: 300,
    mainClass: 'mfp-fade',
    retina: {
        ratio: 1,
        replaceSrc: function(item, ratio) {
            return item.src.replace(/\.\w+$/, function(m) {
                return '@2x' + m;
            });
        }
    }
})

Open in new window

I have unpacked the code but it appears that you are binding magificPopup twice with the same data - not the problem in itself but something to fix.

Next if you look at what you are doing - you are binding magnificPopup to all <a> elements in the container with class .image-gallery - which is your carousel container.

All you need to do - after you have removed the duplicate binding is just change the delegate to specifically reference the <a> elements that contain images.

I notice you have the h_lightbox class on image links so you could do this

$('.image-gallery').magnificPopup({
    delegate: 'a.h_lightbox',
    type: 'image',
    fixedContentPos: true,
    gallery: {
        enabled: true
    },
    removalDelay: 300,
    mainClass: 'mfp-fade',
    retina: {
        ratio: 1,
        replaceSrc: function(item, ratio) {
            return item.src.replace(/\.\w+$/, function(m) {
                return '@2x' + m;
            });
        }
    }
});

Open in new window


You can change the h_lightbox class for any class you want - just add the class to the image <a> element and then change the above code.

EDIT:
Correction: you do not have the binding twice - you are binding it to two different classes .image-gallery and .image-gallery2 - so you just need to make the change to the first item

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial