-
Posts
-
There has been a thread in the past about an issue with WooThumbs (http://codecanyon.net/item/woothumbs-awesome-product-imagery/2867927) and other plugins using the Magnific Popup Script from Dmitry Semenov. Users report a problem with displaying images in fullscreen mode and even disabling the lightbox option in Enfold does not solve it. Having the same issue I investigated deeper. Here is my finding:
The Enfold CSS (layout.css) defines
.mfp-ready .mfp-figure { opacity: 0; }
and
.mfp-zoom-in.mfp-image-loaded .mfp-figure { opacity: 1; }
The second rule renders the images visible in fullscreen mode.Adding
.mfp-ready .mfp-figure { opacity: 1; }
to the style.css of a child theme or to the quick css field will solve the issue and images will be displayed in fullscreen mode (lightbox).However I prefer a more universal solution so I already contacted the developer of WooThumbs to make a modification to his implementation of Magnific Popup.
For those who are familiar with coding and curious about the necessary changes within WooThumbs.
/jck_woothumbs/assets/frontend/js/main.js
insert into line 503 the following line
mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',/jck_woothumbs/jck_woothumbs.php
comment out line 512
// $this->load_file( $this->slug . '-script', '/assets/frontend/js/main.min.js', true );
insert into line 513
$this->load_file( $this->slug . '-script', '/assets/frontend/js/main.js', true );Remember those changes will be lost after an update. This solution has the advantage of applying the same css classes as Enfold does and your layout wont break.
Hey Michael!
Thanks for sharing. What is the actual problem though? Can you send us a link to your page so we can take a look? I haven’t noticed any issues with Magnific popup before.
Best regards,
ElliottBecause I already solved the issue you can’t see the problem any more. If you activate the fullscreen option in WooThumbs you will get a fullscreen indicator displayed as an overlay to the product image on the single product page. If you click it the lightbox will be triggered, the gray overlay will appear but the product image does not due to Enfolds CSS rule “.mfp-ready .mfp-figure { opacity: 0; }”. Enfold will set the opacity to 1 only if the root container has the css classes mentioned in my post.
Because WooThumbs uses its own implementation of the Maginific Popup script and its own event listener the classes you define in avia.js (mainClass) do not get applied and therefore the opacity is 0. Thus the image is invisible. To be honest this is neither an Enfold nor a WooThumbs problem in means of faulty or bad development. This is one of the major issue in WordPress if it comes to loading resources/scripts that are not part of the core development (like with bootstrap). If many developers use the same scripts you likely get this kind of problems due to unnecessary redundancy that cant be solved unless WordPress bundles the script to be used as dependency.
And because a plugin will always be the second thing to install (a theme is mandatory) I asked the developer of WooThumbs to add either a custom css class to the root container of the lightbox or an option to define additional classes by the user. Either way one can write a more specific css rule or simply apply the classes needed to match the theme rules.
I hope I could describe the problem well enough.
- You must be logged in to reply to this topic.