Implementing feature from product view in category view

[FanieLumia]

Hi guys

 

First off my appologies if this is posted in the wrong category.

 

So here is my story, I bought a theme from Template Monster, and am busy personalising and adjusting to suite my needs.

When you are viewing products, a jqZoom viewer allows you to zoom in on the product by hovering over the image. Now, when you view a category, it shows a static small image next to the name of the category. So what I am trying to do is implement that jqZoom feature in place of the static image in the category. I thought it would be an easy copy and paste and change links story, but have been trying the whole day with no luck.

 

Here is the section of code for the product view:

<!-- product img-->        
                    <div id="image-block" class="clearfix{if isset($images) && count($images) > 0} is_caroucel{/if}">
                        {if $product->new}
                            <span class="new-box no-print">
                                <span class="new-label">{l s='New'}</span>
                            </span>
                        {/if}
                        {if $product->on_sale}
                            <span class="sale-box no-print">
                                <span class="sale-label">{l s='Sale!'}</span>
                            </span>
                        {/if}
                        {if $have_image}
                            <span id="view_full_size">
                                {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, 'tm_thickbox_default')|escape:'html':'UTF-8'}" itemprop="url">
                                        <img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'tm_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>
                                {else}
                                    <img id="bigpic" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'tm_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}" width="{$largeSize.width}" height="{$largeSize.height}"/>
                                    {if !$content_only}
                                        <span class="span_link no-print">{l s='View larger'}</span>
                                    {/if}
                                {/if}
                            </span>
                        {else}
                            <span id="view_full_size">
                                <img itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'html':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}"/>
                                {if !$content_only}
                                    <span class="span_link">
                                        {l s='View larger'}
                                    </span>
                                {/if}
                            </span>
                        {/if}
                    </div> <!-- end image-block -->

And here is the category image that I am trying to update with above feature:

<!-- Category image -->
                    <div class="content_scene_cat_bg row">
                    	{if $category->id_image}
                        <div class="category-image hidden-xs col-xs-12 col-sm-5 col-md-4 col-lg-3">
                        	<img class="img-responsive" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'tm_category_default')|escape:'html':'UTF-8'}" alt="{$category->name|escape:'html':'UTF-8'}" />
                        </div>

I would be eternally grateful if someone could give me some guidance on how to achieve this. Please let me know if you need more info and so on. I just cant seem to get it right...

 

Thanks in advance!

[FanieLumia]

Okay I have figured out that both pages use different js and css files, so I have copied over what looks like the right stuff for it to work to the category page js and css, but no luck.

It is implemented, but it seems to fall back on a large image view script because it either cant activate the js, or locate the image.

 

My category page looks like this now:

 <!-- product img-->        
                    <div id="image-block" class="clearfix{if isset($images) && count($images) > 0} is_caroucel{/if}">
                        {if $category->id_image}
                            <span id="view_full_size">
                                {if $jqZoomEnabled && $category->id_image}
                                    <a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$category->name|escape:'html':'UTF-8'}{/if}" rel="gal1" href="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'tm_thickbox_default')|escape:'html':'UTF-8'}" itemprop="url">
                                        <img itemprop="image" src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'tm_large_default')|escape:'html':'UTF-8'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$category->name|escape:'html':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html':'UTF-8'}{else}{$category->name|escape:'html':'UTF-8'}{/if}"/>
                                    </a>
                                {/if}
                            </span>
                        {else}
                            <span id="view_full_size">
                                <img itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'html':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}"/>
                                {if !$content_only}
                                    <span class="span_link">
                                        {l s='View larger'}
                                    </span>
                                {/if}
                            </span>
                        {/if}
                    </div> <!-- end image-block -->  

Compared to the product page:

{if $have_image}
                            <span id="view_full_size">
                                {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, 'tm_thickbox_default')|escape:'html':'UTF-8'}" itemprop="url">
                                        <img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'tm_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>
                                {else}
                                    <img id="bigpic" itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'tm_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}" width="{$largeSize.width}" height="{$largeSize.height}"/>
                                    {if !$content_only}
                                        <span class="span_link no-print">{l s='View larger'}</span>
                                    {/if}
                                {/if}
                            </span>
                        {else}
                            <span id="view_full_size">
                                <img itemprop="image" src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'html':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}"/>
                                {if !$content_only}
                                    <span class="span_link">
                                        {l s='View larger'}
                                    </span>
                                {/if}
                            </span>
                        {/if}
                    </div> <!-- end image-block -->

Can anyone see something I missed or have any suggestions? Please guys!

Edited October 15, 2015 by LumiaStudio (see edit history)