Problem with ElevateZoom on Summer theme.

 On our summer theme you can view a product, but the zoom doesn’t work because the regular image and the zoom image are the same size:
http://lej-stg.bighead.net/women/shoes/heels/black-suede-heels.html
You can go to your own demo, and you see the same thing:
http://summer.demo.ubertheme.com/curabitur-eget-sem.html
If you look at the generated code, you see both urls are the same for img src and data-image-zoom:

<img id="main-image" src="http://lej-dev.bighead.net/media/catalog/product/cache/1/thumbnail/580x580/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-prada-brown-pleated-heels-l11_1.jpg" data-zoom-image="http://lej-dev.bighead.net/media/catalog/product/cache/1/thumbnail/580x580/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-prada-brown-pleated-heels-l11_1.jpg" alt="Brown Pleated Heels 1" title="Brown Pleated Heels 1" />

When I look at the media.phtml view and inspect the code and its output, it SHOULD output this:

<img id="main-image" src="http://lej-dev.bighead.net/media/catalog/product/cache/1/thumbnail/580x580/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-prada-brown-pleated-heels-l11_1.jpg" data-zoom-image="http://lej-dev.bighead.net/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-prada-brown-pleated-heels-l11_1.jpg" alt="Brown Pleated Heels 1" title="Brown Pleated Heels 1" />

With the zoom image being the url for the original image, but it doesn’t show this in the browser. I am a bit stumped on how to fix this.

30 answers

Profile photo of Mall Staff 184060.00 $tone March 5, 2015
Public

Hi [email protected],
Yes, that is a issue of our Jm Summer theme. To solve that issue:
You can download the template file at https://www.dropbox.com/s/49dhx30v5qqqwxq/media.phtml?dl=0
and upload replace it to \app\design\frontend\default\jm_summer\template\catalog\product\view
Do it and let me know how it goes.
Regards,
Mall.
 

#1
Profile photo of adie@lejolie.com 340.00 $tone March 5, 2015
Public

OK, it def fixed the zooming part, but there are a couple of issues. First, there is a typo in your code in the ElevateZoom jquery options:

<script type="text/javascript">
// <![CDATA[
(function($){
$(document).ready(function($){
if($("#main-image").length){
$("#main-image").elevateZoom({
scrollZoom : false,
borderColour : "#e7e7e7",
tintColour : "#e7e7e7",
zoomWindowWidth : 580,
zoomWindowHeight : 576,
lensFadeIn : 580,
lensFadeOut : 576,
asing : true
});
}
});
})(jQuery);

// ]]>
</script>

That “asing” should be easing, so I fixed that, and the zoom now works but the main product image is not loading correctly:
http://lej-stg.bighead.net/women/le-boutique/shoes/lillian-pumps.html
http://lej-stg.bighead.net/rouched-woven-dress.html
Please advise. 

#2
Profile photo of Mall Staff 184060.00 $tone March 5, 2015
Public

Hi [email protected],
The seem are you customized our Jm Summer theme? 
You can provide me the FTP credential of your site. I need to check current code of your site and tell you how to solve the issue as you said.
Regards,
Mall.

#3
Profile photo of adie@lejolie.com 340.00 $tone March 5, 2015
Public

This is the part that is causing me grief, and I am guessing you also. When I step through and debug the code, the value for the $_img block is this:

<img id="main-image" src="http://lej-dev.bighead.net/media/catalog/product/cache/1/thumbnail/580x580/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-balenciaga-rouched-woven-dress-l11_1.jpg" data-zoom-image="http://lej-dev.bighead.net/media/catalog/product/cache/1/thumbnail/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-balenciaga-rouched-woven-dress-l11_1.jpg" alt="Rouched Woven Dress 1" title="Rouched Woven Dress 1" />

But if I then let it go to the browser, it ends up like this:

<img id="main-image" src="http://lej-stg.bighead.net/media/catalog/product/cache/1/thumbnail/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-balenciaga-rouched-woven-dress-l11_1.jpg" data-zoom-image="http://lej-stg.bighead.net/media/catalog/product/cache/1/thumbnail/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-balenciaga-rouched-woven-dress-l11_1.jpg" alt="Rouched Woven Dress 1" title="Rouched Woven Dress 1">

Your code seems to outputting proper $_img block with the src image being 580×580 and the zoom image being larger. But something it touching it before it gets to the browser, what?
This is exactly what was happening before, but the other way around. Before your change, they were both outputted as 580×580. I even bypass helper line and just echo out $_img and it still has the same problem.

#4
Profile photo of Mall Staff 184060.00 $tone March 6, 2015
Public

Hi [email protected],
I have detected your site at http://lej-dev.bighead.net/brown-suede-stilettos.html
and updated the code of two files at app\design\frontend\default\jm_summer\template\catalog\product\view\media.phtml
and file at \skin\frontend\default\jm_summer\js\easy-slider.js
The current code was correct now.
Have a look and let me know how it goes.
Regards,
Mall.

#7
Profile photo of adie@lejolie.com 340.00 $tone March 6, 2015
Public

I see the change, and the change in the code looks right:

<img id="main-image" src="http://lej-dev.bighead.net/media/catalog/product/cache/1/thumbnail/580x580/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-prada-brown-suede-stilettos-l44_1.jpg" data-zoom-image="http://lej-dev.bighead.net/media/catalog/product/cache/1/thumbnail/9df78eab33525d08d6e5fb8d27136e95/l/e/lejolie-women-prada-brown-suede-stilettos-l44_1.jpg" alt="Brown Suede Stilettos 1" title="Brown Suede Stilettos 1”>

Please watch this video for best explanation.
http://www.screencast.com/t/30Id8CCnv0O

#8
Profile photo of Mall Staff 184060.00 $tone March 9, 2015
Public

Hi  [email protected]
I have updated the CSS block code in line 4783 in file at \skin\frontend\default\jm_summer\css\styles.css

.product-view .product-essential .product-image {
border: 1px solid #eaeaea;
margin: 0 0 10px;
position: relative;
width: 575px !important;
}

The ElevateZoom was working fine in your site at http://lej-dev.bighead.net/rouched-woven-dress.html
Have a look and let me know how it goes.
Regards,
Mall.

#9
Profile photo of Mall Staff 184060.00 $tone March 9, 2015
Public

Hi  [email protected],
Did you reverted the css file at at \skin\frontend\default\jm_summer\css\styles.css?
I have re-updated it for your site at  \skin\frontend\default\jm_summer\css\styles.css.
The ElevateZoom was working fine in your site at http://lej-dev.bighead.net/rouched-woven-dress.html
Have a look again!
Regards,
Mall.
 

#11
Profile photo of adie@lejolie.com 340.00 $tone March 10, 2015
Public

I have been out of town for a couple of days…
I just checked, output in HTML looks correct, still not working at all now. We haven’t made any changes to this. We did make some changes before (the zoom wasn’t working before and after this change) to the css file you mention. I also just now reverted to the original CSS from the theme and tested, and it does not help. For a reference, here is a diff of the CSS we have made, all related to the logo and changing the font.
We really need to get this working, please advise.

diff --git a/skin/frontend/default/jm_summer/css/styles.css b/skin/frontend/default/jm_summer/css/styles.css
index a88f4af..ae91301 100755
--- a/skin/frontend/default/jm_summer/css/styles.css
+++ b/skin/frontend/default/jm_summer/css/styles.css
@@ -19,7 +19,8 @@
body {
background: #f5f5f5;
color: #000;
- font: 400 12px/22px sans-serif;
+ font: 400 12px/22px;
+ font-family: 'Lato', sans-serif;
text-align: center;
}

@@ -227,7 +228,7 @@ input.input-text, textarea {
select {
padding: 5px 5px;
font-size: 12px;
- font-family: 'Lora',sans-serif;
+ font-family: 'Lato', 'Lora', sans-serif;
color: #666;
}

@@ -821,7 +822,7 @@ p.required {
line-height: 20px;
padding: 0;
font-weight: 400;
- font-family: 'Domine', serif;
+ font-family: 'Lato', 'Domine', serif;
}

.old-price {
@@ -856,10 +857,10 @@ p.required {
.page-title h2 {
font-size: 36px;
color: #272727;
- font-weight: normal;
+ font-weight: bold;
margin: 0 0 30px;
- font-family: 'bebas_neueregular';
- font-weight: normal;
+ font-family: 'Lato', 'bebas_neueregular';
+ font-weight: bold;
font-style: normal;
letter-spacing: 1px;
line-height: 100%;
@@ -2537,7 +2538,12 @@ tr.summary-details-excluded {
}

#logo a{
+ /*
background-position: 30px 0;
+ top: -12px;
+ */
+ background-position: 0 0;
+ top: 0;
background-repeat: no-repeat;
float: left;
height: 59px;
@@ -2545,7 +2551,6 @@ tr.summary-details-excluded {
min-height: 59px;
position: relative;
text-indent: -999em;
- top: -12px;
width: 220px;
z-index: 10;
}
@@ -2683,7 +2688,7 @@ tr.summary-details-excluded {
padding: 5px 35px;
position: absolute;
text-transform: uppercase;
- font-family: 'bebas_neueregular';
+ font-family: 'Lato', 'bebas_neueregular';
font-weight: normal;
font-style: normal;
letter-spacing: 1px;
@@ -2712,7 +2717,7 @@ tr.summary-details-excluded {

#jm-mass-bottom h3 {
color: #8F9393;
- font-family: sans-serif;
+ font-family: 'Lato', sans-serif;
font-size: 16px;
font-weight: 400;
margin: 0 0 10px;
@@ -2725,7 +2730,7 @@ tr.summary-details-excluded {
color: #fff;
letter-spacing: 1px;
margin: 0 0 21px;
- font-family: 'bebas_neueregular';
+ font-family: 'Lato', 'bebas_neueregular';
font-weight: normal;
font-style: normal;
border: 1px solid #fff;
@@ -2799,7 +2804,7 @@ tr.summary-details-excluded {
text-align: left;
text-indent: 0;
text-transform: none;
- font-family: sans-serif;
+ font-family: 'Lato', sans-serif;
letter-spacing: 0;
}

@@ -2925,7 +2930,7 @@ tr.summary-details-excluded {

#jm-bots2 h3 {
color: #474747;
- font-family: 'bebas_neueregular';
+ font-family: 'Lato', 'bebas_neueregular';
font-size: 18px;
font-style: normal;
font-weight: normal;
@@ -2968,7 +2973,7 @@ tr.summary-details-excluded {

#jm-bots3 .block .block-title {
border-bottom: 0 none;
- font-family: sans-serif;
+ font-family: 'Lato', sans-serif;
font-size: 14px;
letter-spacing: 0;
margin: 0;
@@ -3087,7 +3092,7 @@ tr.summary-details-excluded {
.block .block-title {
border-bottom: 1px solid #E7E7E7;
color: #272727;
- font-family: 'bebas_neueregular';
+ font-family: 'Lato', 'bebas_neueregular';
font-size: 18px;
font-style: normal;
font-weight: normal;
@@ -3324,7 +3329,7 @@ tr.summary-details-excluded {
background: none;
color: #272727 !important;
display: inline-block;
- font-family: sans-serif;
+ font-family: 'Lato', sans-serif;
font-size: 100%;
font-weight: normal;
padding: 0;
@@ -3478,7 +3483,7 @@ tr.summary-details-excluded {

.block-compare .block-content .product-name a {
color: #272727;
- font-family: sans-serif;
+ font-family: 'Lato', sans-serif;
}

.block-compare .actions a:active,
@@ -3699,7 +3704,7 @@ tr.summary-details-excluded {
float: left;
font-size: 12px;
min-width: 150px;
- font-family: sans-serif;
+ font-family: 'Lato', sans-serif;
padding: 10px 15px 9px;
}

@@ -3978,7 +3983,7 @@ h3.product-name{
background: #fff;
display: inline-block;
padding: 0 10px;
- font-family: 'bebas_neueregular';
+ font-family: 'Lato', 'bebas_neueregular';
font-weight: normal;
font-style: normal;
font-size: 36px;
@@ -7408,7 +7413,7 @@ table#checkout-review-table tfoot th{

.account-login .content h2 {
color: #f97352;
- font-family: sans-serif;
+ font-family: 'Lato', sans-serif;
font-size: 18px;
font-weight: 400;
line-height: 100%;
@@ -8003,7 +8008,7 @@ table#checkout-review-table tfoot th{
display: block;
min-height: 60px;
width: 97%;
- font-family: sans-serif;
+ font-family: 'Lato', sans-serif;
font-size: 12px;
color: #a7a7a7;
}
@@ -8306,10 +8311,11 @@ table#checkout-review-table tfoot th{
}

#jm-footer .inner {
- background: url("../images/payment-services.png") no-repeat scroll center 70% rgba(0, 0, 0, 0);
+ /*background: url("../images/payment-services.png") no-repeat scroll center 70% rgba(0, 0, 0, 0);*/
color: #A7A7A7;
font-size: 12px;
- padding: 60px 0 80px;
+ /*padding: 60px 0 80px;*/
+ padding: 60px 0 60px;
text-align: center;
}

@@ -8459,7 +8465,7 @@ table#checkout-review-table tfoot th{
top: 100px;
width: 500px;
font-size: 14px;
- font-family: sans-serif;
+ font-family: 'Lato', sans-serif;
}

.contact-info .infomap {
#12
Profile photo of Mall Staff 184060.00 $tone March 11, 2015
Public

Hi [email protected],
As i said, that is a issue of our Jm summer theme. To solve this issue, you have to update the css file at \skin\frontend\default\jm_summer\css\styles.css too.
Let’s open the css file at \skin\frontend\default\jm_summer\css\styles.css
and find to the block code:

.product-view .product-essential .product-image {
	border: 1px solid #eaeaea;
	margin: 0 0 10px;
	position: relative;
	width: 580px;
}

and replace it by block code:

.product-view .product-essential .product-image {
border: 1px solid #eaeaea;
margin: 0 0 10px;
position: relative;
width: 575px !important;
}

Please dot it to solve the issue as you said at http://lej-dev.bighead.net/rouched-woven-dress.html
Regards,
Mall.

#13
Profile photo of Ziven Staff 100680.00 $tone March 11, 2015
Public

Hi Adie,
Please go to the file: skin/frontend/default/jm_summer/css/styles.css at le 261 and change the z-index like below.

button.button{
background: #fff;
border: 1px solid #272727;
color: #272727;
cursor: pointer;
font-size: 12px;
height: 36px;
line-height: 31px;
margin: 0;
min-height: 36px;
overflow: visible;
padding: 0 20px;
text-align: center;
text-transform: uppercase;
position: relative;
z-index: 1; -> change to z-index: 0;
}

Hope this help you.
Best Regards,
Ziven.

#15
Profile photo of Ziven Staff 100680.00 $tone March 12, 2015
Public

Hi Adie,

You did not followed the solutions we provided properly.
Your site already roll backed to older code . Please check it again.

Best Regards,
Ziven.

#18
Profile photo of Mall Staff 184060.00 $tone March 12, 2015
Public

Hi [email protected]
As i mentioned in the first reply, this is a issue of our Jm Summer theme. To solve this issue,  two following files must be updated :
 1.A template file \app\design\frontend\default\jm_summer\template\catalog\product\view\media.phtml
 2.A javascript file at \skin\frontend\default\jm_summer\js\easy-slider.js
 
I already updated these files for you,  Elevate-Zoom is working fine now, check it out at : http://lej-dev.bighead.net/rouched-woven-dress.html
These files are backup in site directory also.
Please remind that you shouldn’t roll-back to the files in jm_summer package you have downloaded, it will overwrite the code I updated.

Please let me know if  you need any further assistance!

Regards,
Mall.
 

#20
Profile photo of Mall Staff 184060.00 $tone March 12, 2015
Public

Hi [email protected]

As i mentioned in the first reply. To solve this issue,  two following files must be updated:
 1. A template file \app\design\frontend\default\jm_summer\template\catalog\product\view\media.phtml
 2. A javascript file at \skin\frontend\default\jm_summer\js\easy-slider.js
I have create a backup old files and help you updated it but i see you have reverted it to wrong code.
=>
You need to:
1- Download the file at https://www.dropbox.com/s/amxktm7a4wi4jx5/media.phtml?dl=0
and upload replace it to \app\design\frontend\default\jm_summer\template\catalog\product\view\
2- Download load the file at https://www.dropbox.com/s/8z55007z1f6e6n0/easy-slider.js?dl=0
and upload replace it to \skin\frontend\default\jm_summer\js\
Please do it to solve the issue.
Regards,
Mall.

#22
Profile photo of Ziven Staff 100680.00 $tone March 16, 2015
Public

Hi Robert,
I’m added skype of you. But do not see you accept.
Please re-check i’m Ziven.desgin.
Best Regards,
Ziven.

#30

Please login or Register to Submit Answer

Written By

Comments