-
Posts
-
Hi,
I would like to have a button that opens a lightbox with some images (a gallery). I read a lot of support posts and came to the conclusion that it’s best to use Magnific Popup functions for that. So I came up with the following.
in my functions.php of my enfold-child theme I added:
wp_enqueue_script('fs-custom-js', get_stylesheet_directory_uri().'/js/custom.js', array('jquery'), null, true); add_theme_support('avia_template_builder_custom_css');to add my custom javascript file and have custom css feature in the ui builder. That works fine.
In my script file I did:
jQuery(document).ready(function( $ ) { $('.fs-gallery-button').magnificPopup({ items: { src: 'link/to/my/image.jpg' }, type: 'image' // this is default type }); });I added the fs-gallery-button class to the button and now if I click it it opens the lightbox image for about 1ms and then some css sets the opacity to 0.
This is just a one image test, but I want to add multiple images (hence a complete gallery) later.I hope you can give me some hints what I’m doing wrong.
PS: I checked the generated html of your lightbox (if used via a masonry gallery) here is the comparison for completeness. First is “my” code second is yours.
<body id="top" class="home page-template-default page page-id-812 logged-in admin-bar stretched roboto open_sans customize-support mfp-zoom-out-cur" itemscope="itemscope" itemtype="https://schema.org/WebPage" style=""> <div class="mfp-bg mfp-ready"></div> <div class="mfp-wrap mfp-close-btn-in mfp-auto-cursor mfp-ready" tabindex="-1" style="overflow-x: hidden; overflow-y: auto;"> <div class="mfp-container mfp-s-ready mfp-image-holder"> <div class="mfp-content"> <div class="mfp-figure"><button title="Close (Esc)" type="button" class="mfp-close">×</button> <figure><img class="mfp-img" src="url/to/image.jpg" style="max-height: 471px;"> <figcaption> <div class="mfp-bottom-bar"> <div class="mfp-title"></div> <div class="mfp-counter"></div> </div> </figcaption> </figure> </div> </div> <div class="mfp-preloader">Loading...</div> </div> </div> </body> <body id="top" class="home page-template-default page page-id-812 logged-in admin-bar stretched roboto open_sans customize-support mfp-zoom-out-cur" itemscope="itemscope" itemtype="https://schema.org/WebPage" style=""> <div class="mfp-bg avia-popup mfp-zoom-in mfp-ready" style="height: 17269px; position: absolute;"></div> <div class="mfp-wrap mfp-gallery mfp-close-btn-in mfp-auto-cursor avia-popup mfp-zoom-in mfp-ready mfp-image-loaded" tabindex="-1" style="top: 11658px; position: absolute; height: 471px;"> <div class="mfp-container mfp-image-holder mfp-s-ready"> <div class="mfp-content"> <div class="mfp-figure"><button title="" type="button" class="mfp-close">×</button> <figure><img class="mfp-img" src="url/to/image.jpg" style="max-height: 471px;"> <figcaption> <div class="mfp-bottom-bar"> <div class="mfp-title">Some Title</div> <div class="mfp-counter">2 / 3</div> </div> </figcaption> </figure> </div> </div> <div class="mfp-preloader"></div><button title="" type="button" class="mfp-arrow mfp-arrow-left mfp-prevent-close"></button><button title="" type="button" class="mfp-arrow mfp-arrow-right mfp-prevent-close"></button></div> </div> </body>Hey nyloc,
Could you please give us a link to your website, we need more context to be able to help you.
Best regards,
VictoriaHi nyloc,
Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look. Are you making an ajax call to get the images?
Best regards,
VictoriaI 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.
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.Hi,
The best solution is to consider hire someone to help you with the solution to be better.
I am sure there are ways to do it, but it is a bit outside from our support policy.
We hope you do understand.Best regards,
BasilisSure, 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.
- You must be logged in to reply to this topic.