Skip to content

Instantly share code, notes, and snippets.

@potatosalad

potatosalad/cloud-zoom.diff

Created January 18, 2012 03:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save potatosalad/1630595 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save potatosalad/1630595 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
cloud-zoom.diff
--- /Users/andrew/Work/Rejuvenation/web/vendor/assets/javascripts/cloud-zoom.js Mon Jan 9 14:09:04 2012
+++ /Users/andrew/Work/Rejuvenation/web/vendor/assets/javascripts/cloud-zoom.js Tue Jan 17 20:01:30 2012
@@ -20,20 +20,19 @@
function CloudZoom(jWin, opts) {
var sImg = $('img', jWin);
- var img1;
- var img2;
+ var img1;
+ var img2;
var zoomDiv = null;
- var $mouseTrap = null;
- var lens = null;
- var $tint = null;
- var $background = null;
- var softFocus = null;
- var $ie6Fix = null;
- var zoomImage;
+ var $mouseTrap = null;
+ var lens = null;
+ var $tint = null;
+ var softFocus = null;
+ var $ie6Fix = null;
+ var zoomImage;
var controlTimer = 0;
var cw, ch;
var destU = 0;
- var destV = 0;
+ var destV = 0;
var currV = 0;
var currU = 0;
var filesLoaded = 0;
@@ -43,9 +42,9 @@
// 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;
+ //var ctx = this;
setTimeout(function () {
- // <img src="/images/loading.gif"/>
+ // <img src="/images/loading.gif"/>
if ($mouseTrap === 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);
@@ -72,10 +71,6 @@
$tint.remove();
$tint = null;
}
- if ($background) {
- $background.remove();
- $background = null;
- }
if (softFocus) {
softFocus.remove();
softFocus = null;
@@ -107,11 +102,11 @@
// This is called when the zoom window has faded out so it can be removed.
this.fadedOut = function () {
- if (zoomDiv) {
+ if (zoomDiv) {
zoomDiv.remove();
zoomDiv = null;
}
- this.removeBits();
+ this.removeBits();
//ie6FixRemove();
};
@@ -154,7 +149,7 @@
this.init2 = function (img, id) {
filesLoaded++;
- //console.log(img.src + ' ' + id + ' ' + img.width);
+ //console.log(img.src + ' ' + id + ' ' + img.width);
if (id === 1) {
zoomImage = img;
}
@@ -171,35 +166,34 @@
/* 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.
- */ // background-image:url(\".\");
- $mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='z-index:5;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');
-
- //////////////////////////////////////////////////////////////////////
+ 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.
+ */
+ $mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;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. */
$mouseTrap.bind('mousemove', this, function (event) {
// Just update the mouse position
mx = event.pageX;
my = event.pageY;
});
- //////////////////////////////////////////////////////////////////////
+ //////////////////////////////////////////////////////////////////////
$mouseTrap.bind('mouseleave', this, function (event) {
clearTimeout(controlTimer);
//event.data.removeBits();
- if(lens) { lens.fadeOut(299); }
- if($tint) { $tint.fadeOut(299); }
- if($background) { $background.fadeOut(299); }
- if(softFocus) { softFocus.fadeOut(299); }
- zoomDiv.fadeOut(300, function () {
+ if(lens) { lens.fadeOut(299); }
+ if($tint) { $tint.fadeOut(299); }
+ if(softFocus) { softFocus.fadeOut(299); }
+ zoomDiv.fadeOut(300, function () {
ctx.fadedOut();
- });
+ });
return false;
});
- //////////////////////////////////////////////////////////////////////
+ //////////////////////////////////////////////////////////////////////
$mouseTrap.bind('mouseenter', this, function (event) {
- mx = event.pageX;
+ mx = event.pageX;
my = event.pageY;
zw = event.data;
if (zoomDiv) {
@@ -222,19 +216,19 @@
h = sih;
}
//$('#info').text( xPos + ' ' + yPos + ' ' + siw + ' ' + sih );
- var appendTo = jWin.parent(); // attach to the wrapper
+ var appendTo = jWin.parent(); // attach to the wrapper
switch (opts.position) {
case 'top':
yPos -= h; // + opts.adjustY;
break;
case 'right':
- xPos += siw; // + opts.adjustX;
+ xPos += siw; // + opts.adjustX;
break;
case 'bottom':
yPos += sih; // + opts.adjustY;
break;
case 'left':
- xPos -= w; // + opts.adjustX;
+ xPos -= w; // + opts.adjustX;
break;
case 'inside':
w = siw;
@@ -254,20 +248,20 @@
}
}
- 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:4;"></div>', xPos, yPos, w, h, zoomImage.src)).find(':last');
+ 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...
+ // Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue...
if ($.browser.msie && $.browser.version < 7) {
$ie6Fix = $('<iframe frameborder="0" src="#"></iframe>').css({
position: "absolute",
left: xPos,
top: yPos,
- zIndex: 6,
+ zIndex: 99,
width: w,
height: h
}).insertBefore(zoomDiv);
@@ -283,26 +277,20 @@
ch = (sImg.outerHeight() / zoomImage.height) * zoomDiv.height();
// Attach mouse, initially invisible to prevent first frame glitch
- lens = jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:3;position:absolute;width:%0px;height:%1px;'></div>", cw, ch)).find(':last');
+ 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');
$mouseTrap.css('cursor', lens.css('cursor'));
var noTrans = false;
- // Init tint layer if needed. (Not relevant if using inside mode)
+ // Init tint layer if needed. (Not relevant if using inside mode)
if (opts.tint) {
lens.css('background', 'url("' + sImg.attr('src') + '")');
$tint = 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');
$tint.css('opacity', opts.tintOpacity);
noTrans = true;
$tint.fadeIn(500);
- }
- if (opts.background) {
- lens.css('background', 'url("' + sImg.attr('src') + '")');
- $background = jWin.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background:url(%2) repeat 0 0;" />', sImg.outerWidth(), sImg.outerHeight(), opts.background)).find(':last');
- $background.css('opacity', opts.tintOpacity);
- noTrans = true;
- $background.fadeIn(500);
+
}
if (opts.softFocus) {
lens.css('background', 'url("' + sImg.attr('src') + '")');
@@ -314,9 +302,9 @@
}
if (!noTrans) {
- lens.css('opacity', opts.lensOpacity);
- }
- if ( opts.position !== 'inside' ) { lens.fadeIn(500); }
+ lens.css('opacity', opts.lensOpacity);
+ }
+ if ( opts.position !== 'inside' ) { lens.fadeIn(500); }
// Start processing.
zw.controlLoop();
@@ -344,10 +332,10 @@
document.execCommand("BackgroundImageCache", false, true);
} catch (e) {}
this.each(function () {
- var relOpts, opts;
- // Hmm...eval...slap on wrist.
- var a = $(this).data('cloud-zoom')
- relOpts = a;
+ var relOpts, opts;
+ // Hmm...eval...slap on wrist.
+ eval('var a = {' + $(this).attr('rel') + '}');
+ relOpts = a;
if ($(this).is('.cloud-zoom')) {
$(this).css({
'position': 'relative',
@@ -359,7 +347,7 @@
// 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 ($(this).parent().attr('id') != 'wrap') {
- $(this).wrap('<div id="wrap" style="top:0px;z-index:6;position:relative;"></div>');
+ $(this).wrap('<div id="wrap" style="top:0px;z-index:9999;position:relative;"></div>');
}
opts = $.extend({}, $.fn.CloudZoom.defaults, options);
opts = $.extend({}, opts, relOpts);
@@ -376,7 +364,7 @@
$('#' + data.useZoom).attr('href', event.data.attr('href'));
// Change the small image to point to the new small image.
$('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);
- // Init a new zoom with the new images.
+ // Init a new zoom with the new images.
$('#' + event.data.data('relOpts').useZoom).CloudZoom();
return false;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment