Aleš Sýkora wrote

Better product gallery lightbox with Oxygen and Fancybox

18. 1. 2021 in ,

I will show you, how I am creating galleries like this (open random car to see it) in Oxygen Builder. I hate the product builder and default behavior of WooCommerce lightbox and magnifying glass function on hover.

Gallery has more than 50 images, but you can see only main image + 8 thumbnails on frontend

So I am using Image block wrapped in link – for featured image. And Oxygen’s gallery block for rest of images. It’s usable fwith ACF gallery, alsowith your custom gallery from selected images and finally with WooCommerce product images too!

For image URL I am using dynamic data – featured image. For link wrapping over image too.

What’s also needed is 3rd party script – fancybox for image lightbox. You can use My custom funcionality plugin or you can just put those lines in Code block PHP section.

<!-- Load the fancybox css and js files -->
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

Then you need to got some CSS and JS to work. Here are styles for hiding the images and displaying the “More images” text over last visible image.

a.oxy-gallery-item:nth-of-type(1n+9) {  
          display:none;
 /*hiding the rest of gallery images*/
}

a.oxy-gallery-item:nth-of-type(n+8) figure::after {
  content: "More images";
 /*Text on last visible image*/
  position: absolute;
 /*Positioning the text*/
  color:#FFF;  
  z-index: 9;
  right:0;
  bottom:0;
  display:flex;
  flex-direction:column;
  justify-items:center;
  padding:10px;
  background:rgba(0,0,0,50%);
}

@media only screen and (max-width:650px) {
  a.oxy-gallery-item:nth-of-type(n+8) figure::after {
  font-size:13px;}
}

And finally put this javascript to code block. Don’t forget to change the link ID, to your link wrapper overlapping featured mage.

You can also change the “car-gallery” to anything else. It is just saying, that those elements should be displayed in same lightbox.

(function($) {
'use strict';

	$('.oxy-gallery-item').attr('data-fancybox', 'car-gallery');
	$('#link-231-15' ).attr('data-fancybox', 'car-gallery'); 

}(jQuery));

Thats it :-).

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

More from category
Aleš Sýkora wrote
Solve “No ACF gallery field data found” when the gallery field is empty with Oxygen conditionals
11. 3. 2021 in ,
If you want to hide the gallery field, when your ACF gallery is empty, use this tutorial! 🙂 Wrap Gallery with DIV and add class .gallery-wrapper (set the width of div to 100%) Open conditionals on the div.gallery-wrapper Create conditional: Dynamic Data > Advance Custom Field > Your Gallery Field Name Output type – leave […]
Read More
Aleš Sýkora wrote
Fix WooCommerce coupon input in Oxygen
9. 4. 2021 in ,
The field for adding coupons in WooCommerce cart is horrible in Oxygen. If you want to fix it from: Before: After: Then feel free to use and edit my CSS:
Read More
Aleš Sýkora wrote
Make slow YouTube embed faster with Toolset
12. 11. 2018 in
Speed up your Toolset website with YouTube embeded videos. Load them faster in a minute. Try it right with this tutorial.
Read More
magnifiercross linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram