Elevate Zoom - Bug Fixes and Centered Product Images (Page 1) / Maian Cart / Maian Media Support Forums: Maian Media

Community Forum

Please read the intro before joining/posting. Thank you.

If you have questions about our software, chances are this forum has the answers.

You'll need to register before you can post on the forum to ask your question or to answer another one. A reply will be posted to each and every question that is asked so there is no need to double post or bump your post. We'll do our best to answer promptly, but in some cases it may take a day or two. If you bump your post, it may be removed. Bear with us and we'll get your question answered quickly.

Here are a few tips to help you to get your questions answered more rapidly.

IMPORTANT: Posts in English only. We don't employ translators and we'll be unable to understand your message properly and will probably delete it.
SOFTWARE: Each software has it's own forum. Software here is NOT supported. Posts about this software will be deleted. Supported software questions ONLY please.
SEARCH: Use the search option to see if your question has been answered on the forum before now or if there is an answer in the documentation of your software.
PERSONAL SUPPORT: If you have purchased a commercial version of any software, using the contact option at the licence centre ensures a faster response.
AUTO DELETION: Accounts older than 5 days, with no posts or topics, are automatically deleted. Only register if you are thinking of posting.
LINKS: Any links posted are not clickable (to deter spammers) and must be copied / pasted into your browser address bar.

Index Search Register Login

You are not logged in.

Topic Active | Unanswered

Elevate Zoom - Bug Fixes and Centered Product ImagesPosts in the Maian Cart forum by DAustin

DAustin
13-09-2013 12:59:22

For those wishing to have centered images regardless of image width please read the following. I'm actually a bit emabressed to post this, as it seems my Cloud-Zoom hacks were completely over the top for MaianCart 2.05, especially when the quick solution was staring me right in the face all along! As such this one is much easier to implement and requires only 2 or 3 changes to the ElevateZoom javascript (which are all for bug fixes!).

Right let's start with centering the main image (this is the embarrassing bit I mentioned above):

Open up the following file in your text editor - product.tpl.php (located in your theme folder)

From line 29-35 you'll see this:

<div class="left">
<p class="img">
<img src="<?php echo $this->IMG; ?>"<?php echo ($this->ZOOM=='yes' ? ' data-zoom-image="'.$this->IMG_URL.'" ' : ' '); ?>id="displayImg" alt="<?php echo $this->NAME; ?>" title="<?php echo $this->NAME; ?>" />
<?php
   // Only show click zoom if there is an image..
   if ($this->PICTURES_COUNT>0) {
   ?>

Add the following:

<div class="left">
<p class="img">
<ul class="dList">
<li>
<img src="<?php echo $this->IMG; ?>"<?php echo ($this->ZOOM=='yes' ? ' data-zoom-image="'.$this->IMG_URL.'" ' : ' '); ?>id="displayImg" alt="<?php echo $this->NAME; ?>" title="<?php echo $this->NAME; ?>" />
</li>
</ul>
<?php
   // Only show click zoom if there is an image..
   if ($this->PICTURES_COUNT>0) {
   ?>

Then in your CSS add a declaration for your new list element ('dList' in the example above, required declarations are in bold and red):

.viewProduct .productInfo .left .dList {
position:relative;
z-index:30;
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}

Also change the declaration to the img (this is because we have added the list and need to update our css to target it correctly):
from:

.viewProduct .productInfo .left .img img {

to:

.viewProduct .productInfo .left .dList img {

And that's it, no need for a JS hack like cloud-zoom, and I'm embaressed to admit that this may have also worked for cloud-zoom instead of performing all of those offset calculations lol. What we've done is the gallery image list hack using 'text-align: center;' on an image held within a list that I shared in the Cloud-Zoom tutorial.

Centered Gallery Images:
This is EXACTLY the same as before:

Open up your product-pictures.htm file located in _your_theme/html/products:

Replace the contents with those shown below:

<div id="additionalPics">
<ul style="list-style-type:none;margin:0;padding:0;text-align:center;">
<li>
{pictures}
</li>
</ul>
</div>

That's the gallery taken care of, next the ElevateZoom bugs.

Bug Fixes:
I had an issue that took a while to solve involving z-indices (z-index values). My zoom window was appearing underneath my product info which was obviously no good. Even if you don't have this issue I advise you take a quick look at the following as there are a few bugs regardless in the script (Bad Syntax):

To fix the z-index issues if you have any, open up your jquery.elevatezoom.js located in the js/plugins folder of your theme folder. Change line 219 to this to add a z-index (The red and bold bit):

self.zoomContainer = $('<div class="zoomContainer" style="z-index:9999;-webkit-transform: translateZ(0);position:absolute;left:'+self.nzOffset.left+'px;top:'+self.nzOffset.top+'px;height:'+self.nzHeight+'px;width:'+self.nzWidth+'px;"></div>');

This solved my issue but I did fiddle around with z-indices on a few divs, namely the .left and .right divs on the product page, but I don't think this has any effect. Add a reply to correct me if simply performing the above fails to bring the zoom window forward.

One other bug is some bad syntax someone pointed out online as I was googling for a solution.

On line 126 delete the bit in red:

//if window zoom
if(self.options.zoomType == "window") {
self.zoomWindowStyle = "overflow: hidden;"
+ "background-position: 0px 0px;text-align:center;"
+ "background-color: " + String(self.options.zoomWindowBgColour)
+ ";width: " + String(self.options.zoomWindowWidth) + "px;"
+ "height: " + String(self.options.zoomWindowHeight)
+ "px;float: left;"
+ "background-size: "+ self.largeWidth/self.options.zoomLevel+ "px " +self.largeHeight/self.options.zoomLevel + "px;"
+ "display: none;z-index:100"
+ "px;border: " + String(self.options.borderSize)
+ "px solid " + self.options.borderColour
+ ";background-repeat: no-repeat;"
+ "position: absolute;";

This is because z-index doesn't need a px value. You can also add your own custom css here to spruce up the styling. For instance I added a left margin to create some space between the thumbnail image and the zoom windo, as well as adding a box-shadow effect to thezoom window here also.

I think that's it for now. Please let me know if this doesn't work for you, I'm fairly certain I've got all the info needed above, but I may have forgotten to add something crucial.

-Dan Austin

RSS topic feed