Jump to content

How to re add the product image zoom


Recommended Posts

Hello,

I used to have the product image zoom enabled on my site.  Somewhere along the line it has gone missing.  Now when the additional product images are clicked on they are brought up in a separate window.  Before I could hover over the additional images and they would become the main image.  I have looked all over to find where this option went missing but no luck.  Any ideas? Thanks, Danee

summerscloset.com

Link to comment
Share on other sites

Unless you know of a specific reason why jQuery version 1.latest is required, I will suggest you use the specific jQuery version 1.7.latest. In the file /js/common.html, use these statements:

<!-- Load JavaScript last -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$STORE_URL}/js/plugins.php"></script>
<script type="text/javascript" src="{$STORE_URL}/js/common.js"></script>
Link to comment
Share on other sites

hello,

I checked my file /js/common.html

 

and what you listed is what I already have. Am I missing something?

Thanks!

 

<!-- Load JavaScript last -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
<script type="text/javascript" src="{$STORE_URL}/js/plugins.php"></script>
<script type="text/javascript" src="{$STORE_URL}/js/common.js"></script>

Link to comment
Share on other sites

Then please check the skin template file main.php. My browser is showing these relevant lines. So...

Has this:
{include file='js/common.html'}
 
been replaced with the hard-coded:
<!-- Load JavaScript last -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.summerscloset.com/js/plugins.php"></script>
<script type="text/javascript" src="http://www.summerscloset.com/js/common.js"></script>
Link to comment
Share on other sites

I cant find what you are meaning in the skins template main php

Here is what is in my  skins template main php:

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="{$TEXT_DIRECTION}" lang="{$HTML_LANG}">
<head>
<title>{$META_TITLE}</title>
<link rel="canonical" href="{$VAL_SELF}"/>
<link rel="shortcut icon" href="{$STORE_URL}/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/common.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/dropdown.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/expandingsearch.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/print.css" media="print"/>
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/js/styles/styles.php" media="screen"/>
 {if isset($CSS)} {foreach from=$CSS key=css_keys item=css_files}
<link rel="stylesheet" type="text/css" href="{$STORE_URL}/{$css_files}" media="screen"/>
 {/foreach} {/if}
<!--[if IE]><link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/ie.css" media="screen" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/ie8.css"><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="{$STORE_URL}/skins/{$SKIN_FOLDER}/styles/ie7.css"><![endif]-->
<meta http-equiv="Content-Type" content="text/html;charset={$CHARACTER_SET}"/>
<meta name="description" content="{$META_DESCRIPTION}"/>
<meta name="keywords" content="{$META_KEYWORDS}"/>
<meta name="robots" content="index, follow"/>
<meta name="generator" content="cubecart"/>
 {if $ANALYTICS} {literal}
<script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', '{/literal}{$ANALYTICS}{literal}']);
      _gaq.push(['_trackPageview']);
      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
    </script>
{/literal} {/if}
</head>
<body>
<div id="header">
    <div class="headerContainer">
        <a href="{$STORE_URL}" class="headerLogo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"/></a>
        {$SEARCH_FORM} {$SITE_DOCS}
        <div class="headerSelects">
             {if isset($SKIN_SELECT)}{$SKIN_SELECT}{/if} {$LANGUAGE} {$CURRENCY}
            <div class="clear">
                &nbsp;
            </div>
        </div>
    </div>
</div>
 {$CATEGORIES}
<div id="content">
    <div class="contentLeft">
         {$SESSION} {if isset($POPULAR_PRODUCTS)}{$POPULAR_PRODUCTS}{/if} {$SALE_ITEMS}
    </div>
    <div class="contentMid">
        <div id="breadcrumb">
            <ul>
                <li><a href="{$STORE_URL}">{$LANG.common.home}</a></li>
                 {foreach from=$CRUMBS item=crumb}
                <li><a href="{$crumb.url}">{$crumb.title}</a></li>
                 {/foreach}
            </ul>
        </div>
         {include file='templates/box.errors.php'} {if isset($CHECKOUT_PROGRESS)}{$CHECKOUT_PROGRESS}{/if} {$PAGE_CONTENT}
    </div>
    <div class="contentRight">
         {$SHOPPING_CART} {$MAIL_LIST} {$RANDOM_PROD}
    </div>
    <div class="clear">
        &nbsp;
    </div>
</div>
<div id="footer">
    <div class="footerContainer">
        <a href="{$STORE_URL}" class="footerLogo"><img src="{$STORE_LOGO}" alt="{$META_TITLE}"/></a>
        <div class="copyright">
            {$COPYRIGHT}
        </div>
         {$SITE_DOCS} {if !$CONFIG.disable_mobile_skin}
        <div class="mobile">
            <a href="{$STORE_URL}/index.php?display_mobile=1">{$LANG.common.mobile_site}</a>
        </div>
        {/if}
    </div>
</div>
 {if isset($DEBUG_INFO)}{$DEBUG_INFO}{/if} {include file='js/common.html'} {if isset($JANRAIN)}{$JANRAIN}{/if} {if isset($LIVE_HELP)}{$LIVE_HELP}{/if} {foreach from=$JS_SCRIPTS key=k item=script}
<script type="text/javascript" src="{$STORE_URL}/{$script|replace:'':'/'}"></script>
 {/foreach} {if $COOKIE_DIALOGUE}
<form action="{$VAL_SELF}" class="cookies-notify" method="POST">
    <p>
        {$LANG.notification.cookie_dialogue|replace:'%s':{$CONFIG.store_name}}
    </p>
    <p{if $cookie_dialogue_fail} class="retry" {/if}><input type="checkbox" name="accept_cookies" value="1"/> {$LANG.notification.cookie_dialogue_declaration} <input type="submit" name="accept_cookies_submit" value="{$LANG.common.continue}" class="btn"/>
</p>
</form>
<script type="text/javascript">
      jQuery(document).ready(function(e){
        jQuery(".cookies-notify").css("height", "0px").prependTo(jQuery("body")).animate({ height: "50px" }, 800);
    });
  </script>
 {/if}
</body>
</html>

Link to comment
Share on other sites

Hmmm...

 

The source of the whole page shows jquery/1/ while the source of just /js/common.html shows jquery/1.7/.

 

This leads me to believe that either CubeCart is using a cached copy of the skin which has already incorporated common.html, or your server that runs PHP has implemented some sort of caching mechanism that is not fetching this file afresh.

 

Try this:

main.php, about 19 lines from the bottom:
Was:
{if isset($DEBUG_INFO)}{$DEBUG_INFO}{/if} {include file='js/common.html'} {if isset($JANRAIN)}{$JANRAIN}{/if}
Now:
{if isset($DEBUG_INFO)}{$DEBUG_INFO}{/if} {include file='js/commontest.html'} {if isset($JANRAIN)}{$JANRAIN}{/if}
 
/js/common.html
Rename to:
/js/commontest.html

Then request this URL (don't worry if you get a blank screen):

www.summerscloset.com/?debug-cache-clear=true

 

Here's the outcome of what's happening: CubeCart has javascript code that cannot be used on versions of jQuery higher that 1.7. If jQuery 1.8 or higher is given to the browser, the code in common.js will crash jQuery. Please observe the top of your store's page where the Currency and Language selectors are located. Do you see the Submit buttons? There is code in the common.js that will hide those buttons. There is also code that will manage the gallery images (your original complaint). The Mailing List field is supposed to be pre-populated with "Enter your email address". When jQuery crashes, none of that will work.

Link to comment
Share on other sites

ok I tried that. I did get a white screen and also a white screen when accessing my site. I replaced it back with common because of that.  When I upgraded cubecart the last few times, I was getting this blank screen as well.  My hosting company hostmonster said they had to

"reenable the php settings in the php.ini when i upgrade" to get my site back up.  I am assuming it is the problem?

My submit buttons at the top are there.  What would I need to do to fix this?

Thanks!

Link to comment
Share on other sites

We need to discover where and why I am getting HTML code that fetches jQuery 1.latest as opposed to the HTML code that is obviously in the file common.html. To fix everything that is misbehaving, your installation of CubeCart must include common.html as it is physically found in the /js/ folder, and not from some cache.

 

This may be a server configuration problem. Please have a sit-down with your hosting provider and discuss this situation.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...