Problem with ElevateZoom on Summer theme.

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. 

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.

We have only made minor customizations, and nothing to this section or product details.

FTP credentials sent.

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

I just took a look at it. Still does not work. 

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 {

This is done, and now it allows the movement, but the large image is still not zoomed. The zoomed image, in this example, is also distorted wide:
http://www.screencast.com/t/DH3KfoDEfg
Also notice that on chrome and safari, the “add to cart” button is on top of the zoom, this does NOT happen with firefox.

Thank you, that fixed the add to cart over lay, but the zoom image is still skewed and it doesn’t zoom.
 
http://lej-dev.bighead.net/rouched-woven-dress.html

Any update on this? We really need to get this working.

I just double checked each posting by mall, and made sure each change was in, only I fixed the “easing” typo.
Check here:
http://lej-dev.bighead.net/rouched-woven-dress.html
Zoom works, but the original image is not right. What other change needs to be made? I updated from the downloaded media.phtml, and made the styles.css changes, they are all in there, and the cache is completely cleared.

This issue is not resolved, and I need it resolved ASAP. Please view this for a detailed explanation and demonstration.
http://www.screencast.com/t/2XEWVoRe
You have my Skype address, please contact me.

Thank you, both of those files are changed and committed. But when a product image is TALLER than it is wide, it comes out of the bottom of the box, as seen here:
http://www.screencast.com/t/Wqmtje8j

You can view this:
http://lej-dev.bighead.net/rouched-woven-dress.html

Here is another product, where you can see it even looks worse, the image loads from the bottom, instead of the center and is outside the box.
http://lej-dev.bighead.net/women/le-boutique/shoes/black-top-of-the-morning-shoes.html

It is working now, I had to change some of the theme settings values, and now it seems to work.

It is working on the desktop, but these updates seem to have broken the product details on mobile browsers. Now you can’t click a thumbnail on a mobile browser.
http://lej-dev.bighead.net/contrasting-cape-dress.html

Here is a video showing some of the issues with responsiveness now with the changes.
http://www.screencast.com/t/osnL3ztyG

We are trying to go live with this today, any updates on this?