Skip to content

Instantly share code, notes, and snippets.

@sashas777

sashas777/view.phtml

Last active August 29, 2015 14:17
Show Gist options
  • Save sashas777/e337ff0cc17f7312cf71 to your computer and use it in GitHub Desktop.
Save sashas777/e337ff0cc17f7312cf71 to your computer and use it in GitHub Desktop.
Download ZIP
Code for integration ConfImages with CloudZoom 1.0.2
Raw
view.phtml
<?php
/**
* @author Sashas
* @category Sashas
* @package Sashas_Confimages
* @copyright Copyright (c) 2015 Sashas IT Support Inc. (http://www.sashas.org)
* @license http://opensource.org/licenses/GPL-3.0 GNU General Public License, version 3 (GPL-3.0)
*/
$_product=$this->getProduct();
$extension_enabled=$this->isEnabled();
$theme_package=Mage::getSingleton('core/design_package')->getPackageName();
if ($extension_enabled && $_product->getTypeId() =='configurable') :
$js_product_options=$this->getProductOptionsJs();
$js_observe_onchange_handles=$this->getAttributeHandlers();
?>
<!-- Sashas Configurable Image -->
<script type="text/javascript">
jQuery( document ).ready(function() {
jQuery('.cloud-zoom').CloudZoom();
});
function format(str) {
for (var i = 1; i < arguments.length; i++) {
str = str.replace('%' + (i - 1), arguments[i]);
}
return str;
}
function CloudZoom(jWin, opts) {
var sImg = jQuery('img', jWin);
var img1;
var img2;
var zoomDiv = null;
var jQuerymouseTrap = null;
var lens = null;
var jQuerytint = null;
var softFocus = null;
var jQueryie6Fix = null;
var zoomImage;
var controlTimer = 0;
var cw, ch;
var destU = 0;
var destV = 0;
var currV = 0;
var currU = 0;
var filesLoaded = 0;
var mx,
my;
var ctx = this, zw;
// Display an image loading message. This message gets deleted when the images have loaded and the zoom init function is called.
// We add a small delay before the message is displayed to avoid the message flicking on then off again virtually immediately if the
// images load really fast, e.g. from the cache.
//var ctx = this;
setTimeout(function () {
// <img src="/images/loading.gif"/>
if (jQuerymouseTrap === null) {
var w = jWin.width();
jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>', w / 3, (w / 2) - (w / 6))).find(':last').css('opacity', 0.5);
}
}, 200);
var ie6FixRemove = function () {
if (jQueryie6Fix !== null) {
jQueryie6Fix.remove();
jQueryie6Fix = null;
}
};
// Removes cursor, tint layer, blur layer etc.
this.removeBits = function () {
//jQuerymouseTrap.unbind();
if (lens) {
lens.remove();
lens = null;
}
if (jQuerytint) {
jQuerytint.remove();
jQuerytint = null;
}
if (softFocus) {
softFocus.remove();
softFocus = null;
}
ie6FixRemove();
jQuery('.cloud-zoom-loading', jWin.parent()).remove();
};
this.destroy = function () {
jWin.data('zoom', null);
if (jQuerymouseTrap) {
jQuerymouseTrap.unbind();
jQuerymouseTrap.remove();
jQuerymouseTrap = null;
}
if (zoomDiv) {
zoomDiv.remove();
zoomDiv = null;
}
//ie6FixRemove();
this.removeBits();
// DON'T FORGET TO REMOVE JQUERY 'DATA' VALUES
};
// This is called when the zoom window has faded out so it can be removed.
this.fadedOut = function () {
if (zoomDiv) {
zoomDiv.remove();
zoomDiv = null;
}
this.removeBits();
//ie6FixRemove();
};
this.controlLoop = function () {
if (lens) {
var x = (mx - sImg.offset().left - (cw * 0.5)) >> 0;
var y = (my - sImg.offset().top - (ch * 0.5)) >> 0;
if (x < 0) {
x = 0;
}
else if (x > (sImg.outerWidth() - cw)) {
x = (sImg.outerWidth() - cw);
}
if (y < 0) {
y = 0;
}
else if (y > (sImg.outerHeight() - ch)) {
y = (sImg.outerHeight() - ch);
}
lens.css({
left: x,
top: y
});
lens.css('background-position', (-x) + 'px ' + (-y) + 'px');
destU = (((x) / sImg.outerWidth()) * zoomImage.width) >> 0;
destV = (((y) / sImg.outerHeight()) * zoomImage.height) >> 0;
currU += (destU - currU) / opts.smoothMove;
currV += (destV - currV) / opts.smoothMove;
zoomDiv.css('background-position', (-(currU >> 0) + 'px ') + (-(currV >> 0) + 'px'));
}
controlTimer = setTimeout(function () {
ctx.controlLoop();
}, 30);
};
this.init2 = function (img, id) {
filesLoaded++;
//console.log(img.src + ' ' + id + ' ' + img.width);
if (id === 1) {
zoomImage = img;
}
//this.images[id] = img;
if (filesLoaded === 2) {
this.init();
}
};
/* Init function start. */
this.init = function () {
// Remove loading message (if present);
jQuery('.cloud-zoom-loading', jWin.parent()).remove();
/* Add a box (mouseTrap) over the small image to trap mouse events.
It has priority over zoom window to avoid issues with inner zoom.
We need the dummy background image as IE does not trap mouse events on
transparent parts of a div.
*/
jQuerymouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background:#fff;opacity:0;filter:alpha(opacity=0);z-index:99;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');
//////////////////////////////////////////////////////////////////////
/* Do as little as possible in mousemove event to prevent slowdown. */
jQuerymouseTrap.bind('mousemove', this, function (event) {
// Just update the mouse position
mx = event.pageX;
my = event.pageY;
});
//////////////////////////////////////////////////////////////////////
jQuerymouseTrap.bind('mouseleave', this, function (event) {
clearTimeout(controlTimer);
//event.data.removeBits();
if(lens) { lens.fadeOut(299); }
if(jQuerytint) { jQuerytint.fadeOut(299); }
if(softFocus) { softFocus.fadeOut(299); }
zoomDiv.fadeOut(300, function () {
ctx.fadedOut();
});
return false;
});
//////////////////////////////////////////////////////////////////////
jQuerymouseTrap.bind('mouseenter', this, function (event) {
mx = event.pageX;
my = event.pageY;
zw = event.data;
if (zoomDiv) {
zoomDiv.stop(true, false);
zoomDiv.remove();
}
var xPos = opts.adjustX,
yPos = opts.adjustY;
var siw = sImg.outerWidth();
var sih = sImg.outerHeight();
var w = opts.zoomWidth;
var h = opts.zoomHeight;
if (opts.zoomWidth == 'auto') {
w = siw;
}
if (opts.zoomHeight == 'auto') {
h = sih;
}
//jQuery('#info').text( xPos + ' ' + yPos + ' ' + siw + ' ' + sih );
var appendTo = jWin.parent(); // attach to the wrapper
switch (opts.position) {
case 'top':
yPos -= h; // + opts.adjustY;
break;
case 'right':
xPos += siw; // + opts.adjustX;
break;
case 'bottom':
yPos += sih; // + opts.adjustY;
break;
case 'left':
xPos -= w; // + opts.adjustX;
break;
case 'inside':
w = siw;
h = sih;
break;
// All other values, try and find an id in the dom to attach to.
default:
appendTo = jQuery('#' + opts.position);
// If dom element doesn't exit, just use 'right' position as default.
if (!appendTo.length) {
appendTo = jWin;
xPos += siw; //+ opts.adjustX;
yPos += sih; // + opts.adjustY;
} else {
w = appendTo.innerWidth();
h = appendTo.innerHeight();
}
}
zoomDiv = appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>', xPos, yPos, w, h, zoomImage.src)).find(':last');
// Add the title from title tag.
if (sImg.attr('title') && opts.showTitle) {
zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>', sImg.attr('title'))).find(':last').css('opacity', opts.titleOpacity);
}
// Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue...
if (navigator.userAgent.toUpperCase().indexOf('MSIE') < 7) {
jQueryie6Fix = jQuery('<iframe frameborder="0" src="#"></iframe>').css({
position: "absolute",
left: xPos,
top: yPos,
zIndex: 99,
width: w,
height: h
}).insertBefore(zoomDiv);
}
zoomDiv.fadeIn(500);
if (lens) {
lens.remove();
lens = null;
} /* Work out size of cursor */
if(typeof event.data.zoomDivWidth == 'undefined'){
event.data.zoomDivWidth = zoomDiv.get(0).offsetWidth - (zoomDiv.css('border-left-width').replace(/\D/g, '')*1) - (zoomDiv.css('border-right-width').replace(/\D/g, '')*1);
}
if(typeof event.data.zoomDivHeight == 'undefined'){
event.data.zoomDivHeight = zoomDiv.get(0).offsetHeight - (zoomDiv.css('border-top-width').replace(/\D/g, '')*1) - (zoomDiv.css('border-bottom-width').replace(/\D/g, '')*1);
}
cw = (sImg.outerWidth() / zoomImage.width) * event.data.zoomDivWidth;
ch = (sImg.outerHeight() / zoomImage.height) * event.data.zoomDivHeight;
// Attach mouse, initially invisible to prevent first frame glitch
lens = jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>", cw, ch)).find(':last');
jQuerymouseTrap.css('cursor', lens.css('cursor'));
var noTrans = false;
// Init tint layer if needed. (Not relevant if using inside mode)
if (opts.tint) {
lens.css('background', 'url("' + sImg.attr('src') + '")');
jQuerytint = jWin.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />', sImg.outerWidth(), sImg.outerHeight(), opts.tint)).find(':last');
jQuerytint.css('opacity', opts.tintOpacity);
noTrans = true;
jQuerytint.fadeIn(500);
}
if (opts.softFocus) {
lens.css('background', 'url("' + sImg.attr('src') + '")');
softFocus = jWin.append(format('<div style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />', sImg.outerWidth() - 2, sImg.outerHeight() - 2, opts.tint)).find(':last');
softFocus.css('background', 'url("' + sImg.attr('src') + '")');
softFocus.css('opacity', 0.5);
noTrans = true;
softFocus.fadeIn(500);
}
if (!noTrans) {
lens.css('opacity', opts.lensOpacity);
}
if ( opts.position !== 'inside' ) { lens.fadeIn(500); }
// Start processing.
zw.controlLoop();
return; // Don't return false here otherwise opera will not detect change of the mouse pointer type.
});
};
img1 = new Image();
jQuery(img1).load(function () {
ctx.init2(this, 0);
});
img1.src = sImg.attr('src');
img2 = new Image();
jQuery(img2).load(function () {
ctx.init2(this, 1);
});
img2.src = jWin.attr('href');
}
jQuery.fn.CloudZoom = function (options) {
// IE6 background image flicker fix
try {
document.execCommand("BackgroundImageCache", false, true);
} catch (e) {}
this.each(function () {
var relOpts, opts;
// Hmm...eval...slap on wrist.
eval('var a = {' + jQuery(this).attr('rel') + '}');
relOpts = a;
if (jQuery(this).is('.cloud-zoom')) {
jQuery(this).css({
'position': 'relative',
'display': 'block'
});
jQuery('img', jQuery(this)).css({
'display': 'block'
});
// Wrap an outer div around the link so we can attach things without them becoming part of the link.
// But not if wrap already exists.
if (jQuery(this).parent().attr('id') != 'wrap') {
jQuery(this).wrap('<div id="wrap" style="top:0px;z-index:99;position:relative;"></div>');
}
opts = jQuery.extend({}, jQuery.fn.CloudZoom.defaults, options);
opts = jQuery.extend({}, opts, relOpts);
jQuery(this).data('zoom', new CloudZoom(jQuery(this), opts));
} else if (jQuery(this).is('.cloud-zoom-gallery')) {
opts = jQuery.extend({}, relOpts, options);
jQuery(this).data('relOpts', opts);
jQuery(this).bind('click', jQuery(this), function (event) {
var data = event.data.data('relOpts');
// Destroy the previous zoom
jQuery('#' + data.useZoom).data('zoom').destroy();
// Change the biglink to point to the new big image.
jQuery('#' + data.useZoom).attr('href', event.data.attr('href'));
// Change the small image to point to the new small image.
jQuery('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);
// Init a new zoom with the new images.
jQuery('#' + event.data.data('relOpts').useZoom).CloudZoom();
return false;
});
}
});
return this;
};
jQuery.fn.CloudZoom.defaults = {
zoomWidth: 'auto',
zoomHeight: 'auto',
position: 'right',
tint: false,
tintOpacity: 0.5,
lensOpacity: 0.5,
softFocus: false,
smoothMove: 3,
showTitle: true,
titleOpacity: 0.5,
adjustX: 0,
adjustY: 0
};
//<![CDATA[
var conf_product_images=JSON.parse('<?php echo $js_product_options; ?>');
document.observe('dom:loaded', function() {
<?php echo $js_observe_onchange_handles; ?>
});
function conf_change_image(id, option_id){
var active_product_id;
var products=[];
if (option_id.length == 0)
active_product_id=-1;
else {
spConfig.config.attributes[id].options.each(
function(element){
if (option_id==element.id) {
if (element.allowedProducts===undefined)
products=element.products;
else
products=element.allowedProducts;
}
});
/* if (products.length==1) */
active_product_id=products[0];
}
/* $('image').up().href */
<?php if (Mage::getConfig()->getModuleConfig('Sashas_Zoom')->is('active', 'true')): ?>
var ez = jQuery('#image').data('elevateZoom');
ez.swaptheimage(conf_product_images[active_product_id]['small_image'], conf_product_images[active_product_id]['full_image']);
<?php else: ?>
<?php if (substr(Mage::getVersion(),0,3)=="1.9" && $theme_package=='rwd'): ?>
jQuery('#image-main').attr('src',conf_product_images[active_product_id]['small_image']);
jQuery('#image-main').attr('zoom-image',conf_product_images[active_product_id]['full_image']);
jQuery(".zoomContainer").remove();
jQuery("#image-main").elevateZoom();
<?php else:?>
if (window.jQuery && jQuery('.cloud-zoom').length>0) {
jQuery('.product-image .cloud-zoom img').attr('src',conf_product_images[active_product_id]['small_image']);
jQuery('.product-image .cloud-zoom').attr('href',conf_product_images[active_product_id]['full_image']);
/* jQuery('.cloud-zoom').CloudZoom();*/
/*Custom Cloud Zoom*/
jQuery('#zoom1').data('zoom').destroy();
jQuery('.cloud-zoom').CloudZoom();
/*Custom Clod Zoom*/
if (jQuery('.ma-a-lighbox').length>0) {
jQuery('.ma-a-lighbox').attr('href',conf_product_images[active_product_id]['small_image']);
}
if (jQuery('#zoom-btn').length>0) {
jQuery('#zoom-btn').attr('href',conf_product_images[active_product_id]['small_image']);
}
} else {
$('image').src=conf_product_images[active_product_id]['full_image'];
if ($('zoom-btn') != undefined) {
$('zoom-btn').href=conf_product_images[active_product_id]['full_image'];
}
}
<?php endif;?>
<?php endif;?>
}
//]]>
</script>
<!-- Sashas Configurable Image -->
<?php endif; ?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment