-
Posts
-
How do I manually trigger lightbox on an image link with Enfold? Adding rel=”lightbox” as one normally would do with a lightbox plugin. I even tried using “prettyPhoto” and that didn’t work. The reason is that I am not using the default Woocommerce product page. Instead I am manually creating one using the Advanced Layout. I have created a custom shortcode that will display the product/featured image so I only have to set it once. I would like to add a link to a larger version of the image and have it display via lightbox. It just isn’t working….just links to the image directly. Here is the code I am using.
// Shortcode for product image function show_product_image() { $product_image = get_the_post_thumbnail( $post_id, 'shop_catalog' ); $product_image_large = get_the_post_thumbnail_url( $post_id, 'large' ); return '<div style="border: 1px solid rgba(136, 187, 200, .4) !important; border-radius: 2px !important; padding:6px 6px 0px 6px !important;" class="avia-image-container av-styling- av-hover-grow avia-builder-el-12 el_after_av_codeblock el_before_av_hr avia-align-center " itemscope="itemscope" itemtype="https://schema.org/ImageObject"><div class="avia-image-container-inner"><a href="' . $product_image_large . '" itemprop="image" class="woocommerce-main-image zoom lightbox-added" rel="lightbox">' . $product_image . '</a></div></div>'; } add_shortcode( 'product_image', 'show_product_image' );Everything looks and works correctly…except it isn’t triggering lightbox.
Aaaaaand…. I figured it out on my own. Simply copying the html code for an image to use the same classes, etc….doesn’t work. Guessing that there was something in the classes used that broke it, called “lightbox” more than once, or something else. So….if anyone is interested and if it helps…
Below is how I was able to call the product image that you need to set for a product. To refresh, I am using the Advanced Layout versus the default editor for Woocomerce products so I have a bit more control over the look. Personally, the default layout hasn’t been updated by the devs in so long and certain things didn’t layout logically when viewed on a tablet or phone. So here we go…
Add the following to your functions.php file:
// Shortcode for product image function show_product_image() { $product_image = get_the_post_thumbnail( $post_id, 'shop_catalog' ); $product_image_large = get_the_post_thumbnail_url( $post_id, 'large' ); return '<div class="product-image avia-image-container av-styling- av-hover-grow avia-builder-el-12 el_after_av_codeblock el_before_av_hr avia-align-center no-overlay" itemscope="itemscope" itemtype="https://schema.org/ImageObject"><div class="avia-image-container-inner"><a rel="lightbox" href="' . $product_image_large . '">' . $product_image . '</a></div></div>'; } add_shortcode( 'product_image', 'show_product_image' );Add the following to your quick css:
.no-overlay .image-overlay {display: none !important;} .product-image {border: 1px solid rgba(136, 187, 200, .4) !important; border-radius: 2px !important; padding:6px !important; margin-bottom:0px !important;} .product-image .avia-image-container-inner {height:340.922px !important; overflow:hidden !important;}To call the image where you want it, use the “code” layout widget with the following shortcode:
[product_image]
- The topic ‘Manual image code with lightbox’ is closed to new replies.