Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • March 16, 2023 at 1:01 pm #1401370
    LearnSAP

    Hello,
    I am using woo commerce 3.0 for my shop. I want my product image to open in a lightbox when somebody clicks on any image in the product gallery. this function is currently working with a small expand icon on the bottom right corner but I want this feature on click. I tried to search on the internet but couldn’t find a solution. Is there any way I can fix it?

    March 17, 2023 at 6:09 am #1401488
    Ismael

    Hey LearnSAP,

    Thank you for the inquiry.

    The lightbox option is not available on the default Woocommerce gallery. You have to switch the default theme gallery in the Enfold > Shop Options > Product gallery settings, or install a lightbox plugin. Please check the link below.

    // https://wordpress.org/plugins/responsive-lightbox/

    Best regards,
    Ismael

    March 17, 2023 at 7:52 am #1401492
    Guenni007

    is there a link to your gallery – or is there a page of the demo that is similar to your gallery? https://kriesi.at/themes/enfold-shop/

    March 17, 2023 at 8:38 pm #1401548
    LearnSAP

    I am sending you a link to my gallery — Here is the link –>

    Clothesline Activity

    As you can see there is an expand icon to open this image in a lightbox, and there are thumbnails over there.

    Output required: What I want is, whenever I click on anywhere on the image or any thumbnail it should open a lightbox.

    let me know if you need any other information.

    March 18, 2023 at 5:37 am #1401558
    Guenni007

    you can do that by css only. Just stretch the width and height of that span container and place the pseudo container again to the bottom right position – or set if you like the before container to display none:

    .show_lightbox .nslick-current.nslick-active span.nickx-popup {
  display: block;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  padding: 0;
}

.fa-expand::before {
  content: "\f065";
  position: absolute;
  right: 15px;
  bottom: 15px;
}

    if this comes into conflict with other places in your page – you had to be then more specific in selectors. f.e. only for #top.single-product

    March 18, 2023 at 11:20 am #1401571
    Rikard

    Hi,

    Thanks for helping out @guenni007 :-)

    Best regards,
    Rikard

    March 18, 2023 at 1:49 pm #1401594
    LearnSAP

    Thank you so much for helping me out. Its working fine for the products gallery. I haven’t noticed any conflicts yet. Thank you so very much @guenni007 :)

    • This reply was modified 1 year, 9 months ago by LearnSAP.
    March 18, 2023 at 5:45 pm #1401616
    Mike

    Hi,
    Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Open Lightbox on lick on any image in product gallery’ is closed to new replies.