-
AuthorPosts
-
August 27, 2014 at 9:49 am #309714
Hi,
In Single Post Pages is it possible to have the same lightbox (group images) for featured image and gallery images in the post?
Point would be to open featured image lightbox (e.g. a product) and then use arrows to see more images from the gallery in the post (instead of having separate lightboxes)
Thanks
August 28, 2014 at 1:12 am #310149Hi,
Try adding this at the very end of your theme / child theme functions.php file:
function add_custom_script(){ ?> <script> (function($){ $(window).load(function() { $('.single-post .big-preview, .single-post .avia-gallery').magnificPopup({ delegate: 'a', type: 'image', mainClass: 'avia-popup mfp-zoom-in', gallery: { enabled:true }, callbacks: { imageLoadComplete: function() { var self = this; setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16); } } }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');
Regards,
Josue- This reply was modified 10 years, 2 months ago by Josue.
August 28, 2014 at 1:48 am #310158Cheers it’s working BUT the mfp arrows for previous-next are not displayed.
(keyboard arrows work)P.S.
also changed small typo from:
$('.single-post big-preview, .single-post avia-gallery').magnificPopup({
to
$('.single-post .big-preview, .single-post .avia-gallery').magnificPopup({
- This reply was modified 10 years, 3 months ago by Adenadoume.
August 28, 2014 at 3:45 am #310172Hi,
Can you post the link to one of your posts please?
Regards,
JosueAugust 28, 2014 at 9:19 am #310300August 28, 2014 at 9:22 am #310302Try with this code instead:
function add_custom_script(){ ?> <script> (function($){ $(window).load(function() { $('.single-post .big-preview, .single-post .avia-gallery').magnificPopup({ delegate: 'a', type: 'image', mainClass: 'avia-popup mfp-zoom-in', gallery: { enabled:true }, callbacks: { imageLoadComplete: function() { var self = this; setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16); } } }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');
August 28, 2014 at 9:49 am #310309No arrows still don’t show
August 30, 2014 at 11:43 am #311249Hey!
Try with this:
function add_custom_script(){ ?> <script> (function($){ $(window).load(function() { $('.single-post .big-preview, .single-post .avia-gallery').magnificPopup({ delegate: 'a', type: 'image', mainClass: 'avia-popup mfp-zoom-in', gallery: { tPrev: '', tNext: '', tCounter: '%curr% / %total%', enabled: true, preload: [1,1] // Will preload 1 - before current, and 1 after the current image }, callbacks: { imageLoadComplete: function() { var self = this; setTimeout(function() { self.wrap.addClass('mfp-image-loaded'); }, 16); } } }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'add_custom_script');
Cheers!
JosueAugust 30, 2014 at 12:01 pm #311262Unfortunately this doesn’t work either.
Arrows are shown only in Gallery and only if it has one than more photos inside.
September 2, 2014 at 8:17 am #312084Hi,
Can you please create me an administrator account? post it here as a private reply.
Regards,
JosueSeptember 2, 2014 at 11:08 am #312191This reply has been marked as private.September 4, 2014 at 1:43 am #313151Hey!
I can’t login, the form asks for “Google Authenticator code”.
Regards,
JosueSeptember 4, 2014 at 10:45 am #313247This reply has been marked as private.September 4, 2014 at 10:15 pm #313614Hi!
It’s working now, i had to edit loop-index.php (child) too, line 91.
Best regards,
JosueSeptember 4, 2014 at 11:07 pm #313640Excellent work, exactly what was needed.
Thanks a lot!
September 5, 2014 at 12:01 am #313677You are welcome, glad to help :)
Regards,
Josue -
AuthorPosts
- The topic ‘Same Lightbox for Featured Image and Gallery Images’ is closed to new replies.