Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Emily Easton
13,575 PointsHow do you get the product image to have a light box effect on click - WordPress
I'm using the twenty seventeen theme and WooCommerce for products. On the product images when you hover your mouse over it, it zooms in on that area and you can click on a magnifying glass icon in the corner of the image and it then goes into a Lightbox.
I was wondering if theres a way that I can make it so that when you click on the image it goes into the light box instead of having to click on the icon - http://m-appliances.com/product/a-bag-of-bits-a-bit-pushy-edition/
I've googled the s*** out of this and it just comes up with how to do it on normal images, whereas this is a product image and doesn't offer the same settings. Is there a plugin that I could use? / help :)
1 Answer
Steven Parker
229,732 PointsI noticed that the magnifying glass emoji is wrapped in a link that triggers the lightbox:
<a href="#" class="woocommerce-product-gallery__trigger">
So I wrapped the "zoom" image you see on mouseover (it has a class of "zoomImg" and a "role" attribute of "presentation") in a similar anchor element and it triggers the lightbox when you click.
Also, did you notice the little magnifying glass slides over the sticky header when you scroll?
Emily Easton
13,575 PointsEmily Easton
13,575 PointsCould you elaborate further on that please? I get what you mean in regards to the mouseover bit and what is where etc, but I'm a little lost with the wrapper bit.
Yeah the magnifying glass did that because its z-index was 99 (for anyone reading just make the "z-index: 5;" on ".woocommerce-product-gallery__trigger"and it'll stop)
Steven Parker
229,732 PointsSteven Parker
229,732 PointsI mean "wrapper" in the sense of "container" or "parent element". I just put the anchor element around the image to make it become a link:
Emily Easton
13,575 PointsEmily Easton
13,575 PointsOhh! uh. I'm with you now, thank you very much!
Emily Easton
13,575 PointsEmily Easton
13,575 PointsRight...
I get the principle of what needs doing (I think), but I'm struggling with the implementation of it. Here is my understanding of what I need to do so far:
1 - Something in the theme folder (or is it within the WooCommerce Plugin) constructs the page by using a Javascript / PHP function to obtain the necessary information from the database & wp-content folder to present the product image, applying the zoom feature & light box button to construct the page in the DOM. I'm trying to work out how to locate this in the browser inspector but I am out of my depth figuring it out?
2 - Once I've figured this out, I need to edit that function so that it applies the anchor as you mention (which I've not done before but looking forward to trying to figure it out) - which then because it is a template applies to all the product pages.
Any help - particularly with point 1 to begin with would be very much appreciated. Thank you.
Steven Parker
229,732 PointsSteven Parker
229,732 PointsI used the inspector to identify the link tag to trigger the lightbox, but I don't think it will help to identify how the server constructs the page. The browser only sees the final result of the PHP and has no knowledge of the process itself.
I'm not personally familiar enough with the internals of Wordpress (or your theme) to advise you where in the PHP code this might be done. But I agree with your #2 point that you would edit the code to apply the anchor around the image.