Lightbox: Make entire product picture clickable to open in lightbox

[westcoastsurf]

Hello, on the single product page, how can I remove the little zoom icon and make the whole image clickable to popup in lightbox?

Thank you

[Kyle – SUPPORT]

Hi

Add this to your custom css:

#product-img-slider li a.zoom {
  background: none repeat scroll 0 0 transparent;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#product-img-slider li a.zoom > i {
  display: none;
}

– Kyle

[westcoastsurf]

Thank you @kyle

Also if anyone wants to keep the zoom icon but make it less obtrusive try this:

#product-img-slider li a.zoom {
  background: none repeat scroll 0 0 transparent;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  color: #fff !important;
  opacity: .4 !important;
}

#product-img-slider li a.zoom > i {
  color: #fff !important;
  float:left !important;
  margin-left: 10px !important;
  margin-top: 10px !important;
}

If your product images are on a white background then change the “color:#fff;” to something darker.

[Rui Guerreiro – SUPPORT]

Thanks for sharing.
-Rui