Jump to content

Guide: How to make jqZoom transparent


Recommended Posts

I was pretty annoyed that jqZoom has a white background, or overall, any background at all...

 

Here is what you need to do, to make it transparent while not braking the view

 

CSS

#product .zoomWindow{ background: none; } /* removes the background */
  
#product #image-block:hover img.original_product_image{ visibility: hidden; } /* hides original image */

product.tpl

In product.tpl add class "original_product_image" to the jqZoom source image, code will loook for example like this:

{if $jqZoomEnabled && $have_image && !$content_only}
   <a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" rel="gal1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')|escape:'html':'UTF-8'}">
      <img class="original_product_image" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$product->name|escape:'html':'UTF-8'}{/if}"/>
   </a>
{* ..... *}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More