View Single Post
  #8  
Old 02-17-2011, 02:32 PM
BooBox's Avatar
BooBox BooBox is offline
 
Join Date: Oct 2010
Location: We are based in the busy market town of Mold in North Wales.
Posts: 68
Default Zoom Integration

I am posting this with a request for some more help. It does work but as usual there are problems in Internet Explorer. All other browsers work OK except Opera 10 where the zoomed image does not show until the page is refreshed. IE8 in normal mode works but in compatibility mode (IE6, IE7) the image is pushed down the page. IE9 does not work at all. If anybody would like to try and fix it it would save waiting months for a fully integrated Ecwid solution. Here is another example http://www.boobox.co.uk/store.php#ec...

Zoom integration

Step 1: Go here http://www.professorcloud.com/mainsite/cloud-zoom.htm and download the file. Upload "cloud-zoom.1.0.2.js" to your site and make sure you have "jquery.js" also uploaded. Add this to the `HEAD` of your page where Ecwid is installed
Code:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/cloud-zoom.1.0.2.js" type="text/javascript"></script>
- adjust the file paths to suit your site.

Step 2: In the product page of your catalogue upload an image for the thumbnail as normal; also add at least one larger version of the same image into the gallery section.

The two images should be of different sizes. Make the size of the product thumbnail image relatively small - about 10-15KB (200 x 400 pixels approx) the size of the additional image in the gallery section can be as they are now about 400KB (1300 x 2700 pixels approx).


Step 3: Add this to your product description into the HTML editor (not directly to the page) changing the parts in red:
Code:
<script src="js/cloud-zoom.1.0.2.js" type="text/JavaScript"></script>

<p><a onmouseover="onload=&quot;jQuery('.cloud-zoom').CloudZoom()&quot;" id="zoom1" class="cloud-zoom" href="PATH TO LARGE IMAGE" rel="adjustX: 15, zoomWidth: 300"> 
<img title="NAME OF PRODUCT" src="PATH TO SMALL IMAGE" onload="jQuery('.cloud-zoom').CloudZoom()" style="float: left;" align="left" height="400" width="300" /> </a></p>

<div class="product-description">

<p>YOUR PRODUCT DESCRIPTION HERE</p>
<p>&nbsp;</p>
</div>

PATH TO LARGE IMAGE: Go to the `Gallery` page and right click on the `Larger Image`, copy location and paste into the above where it says `PATH TO LARGE IMAGE`.

NAME OF PRODUCT: This is the actual name of the product.

PATH TO SMALL IMAGE: To get the link to your small image right click on the `Product Image` thumbnail on the catalogue product page, copy location and paste into the above where it says `PATH TO SMALL IMAGE`.

YOUR PRODUCT DESCRIPTION HERE: Move all the existing description and code here between the <p> tags.

Height & Width: The given height of 400 pixels x 300 pixels should be changed to match your images .

zoomWidth: This value of 300 pixels is the width of the zoom window. Change this to suit your needs.

In order to make the background fit around the image and text correctly you may need to add a few more line spaces below the page text. This can simply be achieved by moving the cursor to the last line of text and pressing return on the keyboard.

You will also need to add this to each page:
Code:
<style type="text/css"><!--
div.ecwid-productBrowser-details-thumbnail {
    display: none;
}
--></style>
This is the CSS instruction to prevent the normal thumbnail image from being displayed on the product page only (it does not prevent it showing in the main category pages). This can be applied globally in the Ecwid CSS so that you do not need to add it to every page but if this is added globally now, none of your existing products (if you have any) will have a product image showing until you have individually changed every product.

Add this CSS to your Ecwid theme tweaking where required
Code:
/********************************************************************************/
/******************************** Cloud Zoom ************************************/
/********************************************************************************/
/* This is the moving lens square underneath the mouse pointer. */
div.cloud-zoom-lens {
	border: 2px solid #eeeeee;
	margin:0px;	/* Set this to minus the border thickness. */
	background-color:#eee;	
	cursor:move;		
}

/* This is for the title text. */
div.cloud-zoom-title {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position:absolute !important;
	background-color:#000;
	color:#fff;
	padding:3px;
	width:100%;
	text-align:center;	
	font-weight:bold;
	font-size:16px;
	top:0px;
}

/* This is the zoom window. */
div.cloud-zoom-big {
	border:1px solid #aaa;
	overflow:hidden;
}

/* This is the loading message. */
div.cloud-zoom-loading {
	color:white;	
	background:#222;
	padding:3px;
	border:1px solid #000;
}

/* This is the image window. */
div.mousetrap {
        border: solid 1px #aaa;
}

/*This is the product description*/
div.product-description {
        padding-left: 325px;
}
I think part of the problem of the image shift and IE6,7 compatibility is the last part of the CSS where I have added a class for the product description - I did this to move the text to the right rather than underneath the image. If there is a better way please post it here.
Reply With Quote