Hi Yigit,
thanks a lot, it worked I already tried changing the z-index but I couldn’t figure out the right selector. It now works as it should. You can mark this as resolved.

Hi Yigit,

I checked the test-page and it has the same issue with this button:

View post on imgur.com

The Facebook Button below the Like!.
I think I could add a spacer below the button and move the diagonal border so low that the box doesn’t overlap the button anymore but that doesn’t look very good.

Sure, no problem I will figure it out on my own. I was just under the impression that almost the exact same functionality exists in enfold in form of a gallery that shows only one picture and on click displays a lightbox to navigate through that gallery. I just thought there would be an easy way to trigger that behavior on a button click instead of a image click.

Thanks for your time.

Hi,

I got it to “work” at least it now does what it should, but the code is really a mess. I currently use the following in my function.php:

function fs_magnific_popup(){
?>
<script>
(function($){
  $(window).load(function() {
    $('.fs-hochzeit-button').magnificPopup({
      items: [
        { src: 'https://www.fotosphere.de/wp-content/uploads/2017/05/hund-sonnenbrille-1500x996.jpg' },
        { src: ' https://www.fotosphere.de/wp-content/uploads/2017/06/Texas-Lightning-2.jpg' }
      ],
      gallery: {
        enabled: true
      },
      mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
      type: 'image'
    });
  });
})(jQuery);
</script>
<?php
}

add_action('wp_footer', 'fs_magnific_popup');

This looks ugly as I know would have to add a new function to my function.php for every gallery I want to show. I hope you have a better solution to achieve what I want. The trick I was missing was mainClass: ‘avia-popup mfp-zoom-in mfp-image-loaded’.
I had to manually assign the mfp-image-loaded class to make the image show.

I added a temporary admin account with the details below.

No I dont use ajax to get the images currently I just added the following to my functions.php in my child theme

function fs_magnific_popup(){
?>
<script>
(function($){
  $(window).load(function() {
    $('.fs-haustier-shooting-button').magnificPopup({
      items: {
        src: '{fqdn replaced}wp-content/uploads/2017/05/hund-sonnenbrille-1500x996.jpg'
      },
      gallery: {
        enabled: true
      },
      mainClass: 'avia-popup mfp-zoom-in',
      type: 'image'
    });
  });
})(jQuery);
</script>
<?php
}

and gave the button the class fs-haustier-shooting-button. If that works I was going to add more images to the functions.php. I know that this doesn’t look very clean and I’m happy for other suggestions how to solve that.

Sure I added it to the private section.