From f99140113b696300b05bb2ce00295dea5fc894f2 Mon Sep 17 00:00:00 2001 From: TMMeilleur Date: Mon, 2 Dec 2013 16:41:13 +0200 Subject: [PATCH] updated jqzoom and products compare page is responsive now --- js/jquery/plugins/jqzoom/jquery.jqzoom.css | 131 ++- js/jquery/plugins/jqzoom/jquery.jqzoom.js | 791 ++++++++++++++++-- js/jquery/plugins/jqzoom/zoomloader.gif | Bin 0 -> 1849 bytes themes/default-bootstrap/css/comparator.css | 83 ++ themes/default-bootstrap/css/product.css | 9 +- themes/default-bootstrap/js/product.js | 18 +- themes/default-bootstrap/product.tpl | 15 +- themes/default-bootstrap/sass/comparator.scss | 97 ++- themes/default-bootstrap/sass/product.scss | 13 +- 9 files changed, 1056 insertions(+), 101 deletions(-) create mode 100644 js/jquery/plugins/jqzoom/zoomloader.gif diff --git a/js/jquery/plugins/jqzoom/jquery.jqzoom.css b/js/jquery/plugins/jqzoom/jquery.jqzoom.css index 1d5cdc988..cafb63632 100755 --- a/js/jquery/plugins/jqzoom/jquery.jqzoom.css +++ b/js/jquery/plugins/jqzoom/jquery.jqzoom.css @@ -1,21 +1,120 @@ -div.zoomdiv { -z-index : 100; -position : absolute; -top:0px; -left:0px; -width : 200px; -height : 200px; -background: #ffffff; -border:1px solid #CCCCCC; -display:none; -text-align: center; -overflow: hidden; - +.zoomPad{ + position:relative; + float:left; + z-index:99; + cursor:crosshair; } -img.jqzoom{ -cursor:crosshair; -position:relative; +.zoomPreload{ + -moz-opacity:0.8; + opacity: 0.8; + filter: alpha(opacity = 80); + color: #333; + font-size: 12px; + font-family: Tahoma; + text-decoration: none; + border: 1px solid #CCC; + background-color: white; + padding: 8px; + text-align:center; + background-image: url(zoomloader.gif); + background-repeat: no-repeat; + background-position: 43px 30px; + z-index:110; + width:90px; + height:43px; + position:absolute; + top:0px; + left:0px; + * width:100px; + * height:49px; +} + + +.zoomPup{ + overflow:hidden; + background-color: #FFF; + -moz-opacity:0.6; + opacity: 0.6; + filter: alpha(opacity = 60); + z-index:120; + position:absolute; + border:1px solid #CCC; + z-index:101; + cursor:crosshair; +} + +.zoomOverlay{ + position:absolute; + left:0px; + top:0px; + background:#FFF; + /*opacity:0.5;*/ + z-index:5000; + width:100%; + height:100%; + display:none; + z-index:101; +} + +.zoomWindow{ + position:absolute; + left:110%; + top:40px; + background:#FFF; + z-index:6000; + height:auto; + z-index:10000; + z-index:110; +} +.zoomWrapper{ + position:relative; + border:1px solid #999; + z-index:110; +} +.zoomWrapperTitle{ + display:block; + background:#999; + color:#FFF; + height:18px; + line-height:18px; + width:100%; + overflow:hidden; + text-align:center; + font-size:10px; + position:absolute; + top:0px; + left:0px; + z-index:120; + -moz-opacity:0.6; + opacity: 0.6; + filter: alpha(opacity = 60); +} +.zoomWrapperImage{ + display:block; + position:relative; + overflow:hidden; + z-index:110; } +.zoomWrapperImage img{ + border:0px; + display:block; + position:absolute; + z-index:101; +} + +.zoomIframe{ + z-index: -1; + filter:alpha(opacity=0); + -moz-opacity: 0.80; + opacity: 0.80; + position:absolute; + display:block; +} + +/********************************************************* +/ When clicking on thumbs jqzoom will add the class +/ "zoomThumbActive" on the anchor selected +/*********************************************************/ \ No newline at end of file diff --git a/js/jquery/plugins/jqzoom/jquery.jqzoom.js b/js/jquery/plugins/jqzoom/jquery.jqzoom.js index 8ef27f743..47ef96a25 100755 --- a/js/jquery/plugins/jqzoom/jquery.jqzoom.js +++ b/js/jquery/plugins/jqzoom/jquery.jqzoom.js @@ -1,83 +1,734 @@ -//************************************************************** -// jQZoom allows you to realize a small magnifier window,close -// to the image or images on your web page easily. -// -// jqZoom version 1.2 -// Author Doc. Ing. Renzi Marco(www.mind-projects.it) -// Released on Dec 05 2007 -// i'm searching for a job,pick me up!!! -// mail: renzi.mrc@gmail.com -//************************************************************** +/*! + * jQzoom Evolution Library v2.3 - Javascript Image magnifier + * http://www.mind-projects.it + * + * Copyright 2011, Engineer Marco Renzi + * Licensed under the BSD license. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions are met: + * * Redistributions of source code must retain the above copyright + * notice, this list of conditions and the following disclaimer. + * * Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in the + * documentation and/or other materials provided with the distribution. + * * Neither the name of the organization nor the + * names of its contributors may be used to endorse or promote products + * derived from this software without specific prior written permission. + * + * Date: 03 May 2011 22:16:00 + */ +(function ($) { + //GLOBAL VARIABLES + var isIE6 = ($.browser.msie && $.browser.version < 7); + var body = $(document.body); + var window = $(window); + var jqzoompluging_disabled = false; //disabilita globalmente il plugin + $.fn.jqzoom = function (options) { + return this.each(function () { + var node = this.nodeName.toLowerCase(); + if (node == 'a') { + new jqzoom(this, options); + } + }); + }; + jqzoom = function (el, options) { + var api = null; + api = $(el).data("jqzoom"); + if (api) return api; + var obj = this; + var settings = $.extend({}, $.jqzoom.defaults, options || {}); + obj.el = el; + el.rel = $(el).attr('rel'); + //ANCHOR ELEMENT + el.zoom_active = false; + el.zoom_disabled = false; //to disable single zoom instance + el.largeimageloading = false; //tell us if large image is loading + el.largeimageloaded = false; //tell us if large image is loaded + el.scale = {}; + el.timer = null; + el.mousepos = {}; + el.mouseDown = false; + $(el).css({ + 'outline-style': 'none', + 'text-decoration': 'none' + }); + //BASE IMAGE + var img = $("img:eq(0)", el); + el.title = $(el).attr('title'); + el.imagetitle = img.attr('title'); + var zoomtitle = ($.trim(el.title).length > 0) ? el.title : el.imagetitle; + var smallimage = new Smallimage(img); + var lens = new Lens(); + var stage = new Stage(); + var largeimage = new Largeimage(); + var loader = new Loader(); + //preventing default click,allowing the onclick event [exmple: lightbox] + $(el).bind('click', function (e) { + e.preventDefault(); + return false; + }); + //setting the default zoomType if not in settings + var zoomtypes = ['standard', 'drag', 'innerzoom', 'reverse']; + if ($.inArray($.trim(settings.zoomType), zoomtypes) < 0) { + settings.zoomType = 'standard'; + } + $.extend(obj, { + create: function () { //create the main objects + //create ZoomPad + if ($(".zoomPad", el).length == 0) { + el.zoomPad = $('
').addClass('zoomPad'); + img.wrap(el.zoomPad); + } + if(settings.zoomType == 'innerzoom'){ + settings.zoomWidth = smallimage.w; + settings.zoomHeight = smallimage.h; + } + //creating ZoomPup + if ($(".zoomPup", el).length == 0) { + lens.append(); + } + //creating zoomWindow + if ($(".zoomWindow", el).length == 0) { + stage.append(); + } + //creating Preload + if ($(".zoomPreload", el).length == 0) { + loader.append(); + } + //preloading images + if (settings.preloadImages || settings.zoomType == 'drag' || settings.alwaysOn) { + obj.load(); + } + obj.init(); + }, + init: function () { + //drag option + if (settings.zoomType == 'drag') { + $(".zoomPad", el).mousedown(function () { + el.mouseDown = true; + }); + $(".zoomPad", el).mouseup(function () { + el.mouseDown = false; + }); + document.body.ondragstart = function () { + return false; + }; + $(".zoomPad", el).css({ + cursor: 'default' + }); + $(".zoomPup", el).css({ + cursor: 'move' + }); + } + if (settings.zoomType == 'innerzoom') { + $(".zoomWrapper", el).css({ + cursor: 'crosshair' + }); + } + $(".zoomPad", el).bind('mouseenter mouseover', function (event) { + img.attr('title', ''); + $(el).attr('title', ''); + el.zoom_active = true; + //if loaded then activate else load large image + smallimage.fetchdata(); + if (el.largeimageloaded) { + obj.activate(event); + } else { + obj.load(); + } + }); + $(".zoomPad", el).bind('mouseleave', function (event) { + obj.deactivate(); + }); + $(".zoomPad", el).bind('mousemove', function (e) { -(function($) { - $.fn.jqueryzoom = function(options) { - var settings = { - xzoom: 200, //zoomed width default width - yzoom: 200, //zoomed div default width - offset: 10, //zoomed div default offset - position: "right" //zoomed div default position,offset position is to the right of the image - }; + //prevent fast mouse mevements not to fire the mouseout event + if (e.pageX > smallimage.pos.r || e.pageX < smallimage.pos.l || e.pageY < smallimage.pos.t || e.pageY > smallimage.pos.b) { + lens.setcenter(); + return false; + } + el.zoom_active = true; + if (el.largeimageloaded && !$('.zoomWindow', el).is(':visible')) { + obj.activate(e); + } + if (el.largeimageloaded && (settings.zoomType != 'drag' || (settings.zoomType == 'drag' && el.mouseDown))) { + lens.setposition(e); + } + }); + var thumb_preload = new Array(); + var i = 0; + //binding click event on thumbnails + var thumblist = new Array(); + thumblist = $('a').filter(function () { + var regex = new RegExp("gallery[\\s]*:[\\s]*'" + $.trim(el.rel) + "'", "i"); + var rel = $(this).attr('rel'); + if (regex.test(rel)) { + return this; + } + }); + if (thumblist.length > 0) { + //getting the first to the last + var first = thumblist.splice(0, 1); + thumblist.push(first); + } + thumblist.each(function () { + //preloading thumbs + if (settings.preloadImages) { + var thumb_options = $.extend({}, eval("(" + $.trim($(this).attr('rel')) + ")")); + thumb_preload[i] = new Image(); + thumb_preload[i].src = thumb_options.largeimage; + i++; + } + $(this).click(function (e) { + if($(this).hasClass('zoomThumbActive')){ + return false; + } + thumblist.each(function () { + $(this).removeClass('zoomThumbActive'); + }); + e.preventDefault(); + obj.swapimage(this); + return false; + }); + }); + }, + load: function () { + if (el.largeimageloaded == false && el.largeimageloading == false) { + var url = $(el).attr('href'); + el.largeimageloading = true; + largeimage.loadimage(url); + } + }, + activate: function (e) { + clearTimeout(el.timer); + //show lens and zoomWindow + lens.show(); + stage.show(); + }, + deactivate: function (e) { + switch (settings.zoomType) { + case 'drag': + //nothing or lens.setcenter(); + break; + default: + img.attr('title', el.imagetitle); + $(el).attr('title', el.title); + if (settings.alwaysOn) { + lens.setcenter(); + } else { + stage.hide(); + lens.hide(); + } + break; + } + el.zoom_active = false; + }, + swapimage: function (link) { + el.largeimageloading = false; + el.largeimageloaded = false; + var options = new Object(); + options = $.extend({}, eval("(" + $.trim($(link).attr('rel')) + ")")); + if (options.smallimage && options.largeimage) { + var smallimage = options.smallimage; + var largeimage = options.largeimage; + $(link).addClass('zoomThumbActive'); + $(el).attr('href', largeimage); + img.attr('src', smallimage); + lens.hide(); + stage.hide(); + obj.load(); + } else { + alert('ERROR :: Missing parameter for largeimage or smallimage.'); + throw 'ERROR :: Missing parameter for largeimage or smallimage.'; + } + return false; + } + }); + //sometimes image is already loaded and onload will not fire + if (img[0].complete) { + //fetching data from sallimage if was previously loaded + smallimage.fetchdata(); + if ($(".zoomPad", el).length == 0) obj.create(); + } +/*========================================================, +| Smallimage +|---------------------------------------------------------: +| Base image into the anchor element +`========================================================*/ - if(options) - $.extend(settings, options); + function Smallimage(image) { + var $obj = this; + this.node = image[0]; + this.findborder = function () { + var bordertop = 0; + bordertop = image.css('border-top-width'); + btop = ''; + var borderleft = 0; + borderleft = image.css('border-left-width'); + bleft = ''; + if (bordertop) { + for (i = 0; i < 3; i++) { + var x = []; + x = bordertop.substr(i, 1); + if (isNaN(x) == false) { + btop = btop + '' + bordertop.substr(i, 1); + } else { + break; + } + } + } + if (borderleft) { + for (i = 0; i < 3; i++) { + if (!isNaN(borderleft.substr(i, 1))) { + bleft = bleft + borderleft.substr(i, 1) + } else { + break; + } + } + } + $obj.btop = (btop.length > 0) ? eval(btop) : 0; + $obj.bleft = (bleft.length > 0) ? eval(bleft) : 0; + }; + this.fetchdata = function () { + $obj.findborder(); + $obj.w = image.width(); + $obj.h = image.height(); + $obj.ow = image.outerWidth(); + $obj.oh = image.outerHeight(); + $obj.pos = image.offset(); + $obj.pos.l = image.offset().left + $obj.bleft; + $obj.pos.t = image.offset().top + $obj.btop; + $obj.pos.r = $obj.w + $obj.pos.l; + $obj.pos.b = $obj.h + $obj.pos.t; + $obj.rightlimit = image.offset().left + $obj.ow; + $obj.bottomlimit = image.offset().top + $obj.oh; + + }; + this.node.onerror = function () { + alert('Problems while loading image.'); + throw 'Problems while loading image.'; + }; + this.node.onload = function () { + $obj.fetchdata(); + if ($(".zoomPad", el).length == 0) obj.create(); + }; + return $obj; + }; +/*========================================================, +| Loader +|---------------------------------------------------------: +| Show that the large image is loading +`========================================================*/ - var noalt =''; + function Loader() { + var $obj = this; + this.append = function () { + this.node = $('
').addClass('zoomPreload').css('visibility', 'hidden').html(settings.preloadText); + $('.zoomPad', el).append(this.node); + }; + this.show = function () { + this.node.top = (smallimage.oh - this.node.height()) / 2; + this.node.left = (smallimage.ow - this.node.width()) / 2; + //setting position + this.node.css({ + top: this.node.top, + left: this.node.left, + position: 'absolute', + visibility: 'visible' + }); + }; + this.hide = function () { + this.node.css('visibility', 'hidden'); + }; + return this; + } +/*========================================================, +| Lens +|---------------------------------------------------------: +| Lens over the image +`========================================================*/ - $(this).hover(function() { - var imageRelativeLeft = $(this).get(0).offsetLeft; - var imageLeft = $($(this).get(0)).offset().left; - var imageRelativeTop = $(this).get(0).offsetTop; - var imageTop = $($(this).get(0)).offset().top; - var imageWidth = $(this).get(0).offsetWidth; - var imageHeight = $(this).get(0).offsetHeight; + function Lens() { + var $obj = this; + this.node = $('
').addClass('zoomPup'); + //this.nodeimgwrapper = $("
").addClass('zoomPupImgWrapper'); + this.append = function () { + $('.zoomPad', el).append($(this.node).hide()); + if (settings.zoomType == 'reverse') { + this.image = new Image(); + this.image.src = smallimage.node.src; // fires off async + $(this.node).empty().append(this.image); + } + }; + this.setdimensions = function () { + this.node.w = (parseInt((settings.zoomWidth) / el.scale.x) > smallimage.w ) ? smallimage.w : (parseInt(settings.zoomWidth / el.scale.x)); + this.node.h = (parseInt((settings.zoomHeight) / el.scale.y) > smallimage.h ) ? smallimage.h : (parseInt(settings.zoomHeight / el.scale.y)); + this.node.top = (smallimage.oh - this.node.h - 2) / 2; + this.node.left = (smallimage.ow - this.node.w - 2) / 2; + //centering lens + this.node.css({ + top: 0, + left: 0, + width: this.node.w + 'px', + height: this.node.h + 'px', + position: 'absolute', + display: 'none', + borderWidth: 1 + 'px' + }); - attr = (typeof($(this).attr("rel")) != 'undefined' && $(this).attr("rel") != '') ? "rel" : "alt"; - noalt = $(this).attr(attr); - var bigimage = noalt; - $(this).attr(attr, ''); - if($("div.zoomdiv").get().length == 0) - $(this).after("
"); - if(settings.position == "right") - leftpos = imageRelativeLeft + imageWidth + settings.offset; - else - leftpos = imageRelativeLeft - settings.xzoom - settings.offset; + if (settings.zoomType == 'reverse') { + this.image.src = smallimage.node.src; + $(this.node).css({ + 'opacity': 1 + }); - $("div.zoomdiv").css({top: imageRelativeTop,left: leftpos}); - $("div.zoomdiv").width(settings.xzoom); - $("div.zoomdiv").height(settings.yzoom); - $("div.zoomdiv").show(); + $(this.image).css({ + position: 'absolute', + display: 'block', + left: -(this.node.left + 1 - smallimage.bleft) + 'px', + top: -(this.node.top + 1 - smallimage.btop) + 'px' + }); - $(document.body).mousemove(function(e) { - var bigwidth = $(".bigimg").get(0).offsetWidth; - var bigheight = $(".bigimg").get(0).offsetHeight; - var scaley ='x'; - var scalex= 'y'; + } + }; + this.setcenter = function () { + //calculating center position + this.node.top = (smallimage.oh - this.node.h - 2) / 2; + this.node.left = (smallimage.ow - this.node.w - 2) / 2; + //centering lens + this.node.css({ + top: this.node.top, + left: this.node.left + }); + if (settings.zoomType == 'reverse') { + $(this.image).css({ + position: 'absolute', + display: 'block', + left: -(this.node.left + 1 - smallimage.bleft) + 'px', + top: -(this.node.top + 1 - smallimage.btop) + 'px' + }); - if(isNaN(scalex)|isNaN(scaley)) { - var scalex = Math.round(bigwidth/imageWidth) ; - var scaley = Math.round(bigheight/imageHeight); - } + } + //centering large image + largeimage.setposition(); + }; + this.setposition = function (e) { + el.mousepos.x = e.pageX; + el.mousepos.y = e.pageY; + var lensleft = 0; + var lenstop = 0; - mouse = new MouseEvent(e); + function overleft(lens) { + return el.mousepos.x - (lens.w) / 2 < smallimage.pos.l; + } - scrolly = mouse.y - imageTop - ($("div.zoomdiv").height()*1/scaley)/2 ; - $("div.zoomdiv").get(0).scrollTop = scrolly * scaley ; - scrollx = mouse.x - imageLeft - ($("div.zoomdiv").width()*1/scalex)/2 ; - $("div.zoomdiv").get(0).scrollLeft = (scrollx) * scalex ; - }); - }, function() { - $(this).attr(attr, noalt); - $("div.zoomdiv").hide(); - $(document.body).unbind("mousemove"); - $(".lenszoom").remove(); - $("div.zoomdiv").remove(); - }); - } -})(jQuery); + function overright(lens) { + return el.mousepos.x + (lens.w) / 2 > smallimage.pos.r; + + } -function MouseEvent(e) { - this.x = e.pageX - this.y = e.pageY -} \ No newline at end of file + function overtop(lens) { + return el.mousepos.y - (lens.h) / 2 < smallimage.pos.t; + } + + function overbottom(lens) { + return el.mousepos.y + (lens.h) / 2 > smallimage.pos.b; + } + + lensleft = el.mousepos.x + smallimage.bleft - smallimage.pos.l - (this.node.w + 2) / 2; + lenstop = el.mousepos.y + smallimage.btop - smallimage.pos.t - (this.node.h + 2) / 2; + if (overleft(this.node)) { + lensleft = smallimage.bleft - 1; + } else if (overright(this.node)) { + lensleft = smallimage.w + smallimage.bleft - this.node.w - 1; + } + if (overtop(this.node)) { + lenstop = smallimage.btop - 1; + } else if (overbottom(this.node)) { + lenstop = smallimage.h + smallimage.btop - this.node.h - 1; + } + + this.node.left = lensleft; + this.node.top = lenstop; + this.node.css({ + 'left': lensleft + 'px', + 'top': lenstop + 'px' + }); + if (settings.zoomType == 'reverse') { + if ($.browser.msie && $.browser.version > 7) { + $(this.node).empty().append(this.image); + } + + $(this.image).css({ + position: 'absolute', + display: 'block', + left: -(this.node.left + 1 - smallimage.bleft) + 'px', + top: -(this.node.top + 1 - smallimage.btop) + 'px' + }); + } + + largeimage.setposition(); + }; + this.hide = function () { + img.css({ + 'opacity': 1 + }); + this.node.hide(); + }; + this.show = function () { + + if (settings.zoomType != 'innerzoom' && (settings.lens || settings.zoomType == 'drag')) { + this.node.show(); + } + + if (settings.zoomType == 'reverse') { + img.css({ + 'opacity': settings.imageOpacity + }); + } + }; + this.getoffset = function () { + var o = {}; + o.left = $obj.node.left; + o.top = $obj.node.top; + return o; + }; + return this; + }; +/*========================================================, +| Stage +|---------------------------------------------------------: +| Window area that contains the large image +`========================================================*/ + + function Stage() { + var $obj = this; + this.node = $("
"); + this.ieframe = $(''); + this.setposition = function () { + this.node.leftpos = 0; + this.node.toppos = 0; + if (settings.zoomType != 'innerzoom') { + //positioning + switch (settings.position) { + case "left": + this.node.leftpos = (smallimage.pos.l - smallimage.bleft - Math.abs(settings.xOffset) - settings.zoomWidth > 0) ? (0 - settings.zoomWidth - Math.abs(settings.xOffset)) : (smallimage.ow + Math.abs(settings.xOffset)); + this.node.toppos = Math.abs(settings.yOffset); + break; + case "top": + this.node.leftpos = Math.abs(settings.xOffset); + this.node.toppos = (smallimage.pos.t - smallimage.btop - Math.abs(settings.yOffset) - settings.zoomHeight > 0) ? (0 - settings.zoomHeight - Math.abs(settings.yOffset)) : (smallimage.oh + Math.abs(settings.yOffset)); + break; + case "bottom": + this.node.leftpos = Math.abs(settings.xOffset); + this.node.toppos = (smallimage.pos.t - smallimage.btop + smallimage.oh + Math.abs(settings.yOffset) + settings.zoomHeight < screen.height) ? (smallimage.oh + Math.abs(settings.yOffset)) : (0 - settings.zoomHeight - Math.abs(settings.yOffset)); + break; + default: + this.node.leftpos = (smallimage.rightlimit + Math.abs(settings.xOffset) + settings.zoomWidth < screen.width) ? (smallimage.ow + Math.abs(settings.xOffset)) : (0 - settings.zoomWidth - Math.abs(settings.xOffset)); + this.node.toppos = Math.abs(settings.yOffset); + break; + } + } + this.node.css({ + 'left': this.node.leftpos + 'px', + 'top': this.node.toppos + 'px' + }); + return this; + }; + this.append = function () { + $('.zoomPad', el).append(this.node); + this.node.css({ + position: 'absolute', + display: 'none', + zIndex: 5001 + }); + if (settings.zoomType == 'innerzoom') { + this.node.css({ + cursor: 'default' + }); + var thickness = (smallimage.bleft == 0) ? 1 : smallimage.bleft; + $('.zoomWrapper', this.node).css({ + borderWidth: thickness + 'px' + }); + } + + $('.zoomWrapper', this.node).css({ + width: Math.round(settings.zoomWidth) + 'px' , + borderWidth: thickness + 'px' + }); + + $('.zoomWrapperImage', this.node).css({ + width: '100%', + height: Math.round(settings.zoomHeight) + 'px' + }); + //zoom title + $('.zoomWrapperTitle', this.node).css({ + width: '100%', + position: 'absolute' + }); + + $('.zoomWrapperTitle', this.node).hide(); + if (settings.title && zoomtitle.length > 0) { + $('.zoomWrapperTitle', this.node).html(zoomtitle).show(); + } + $obj.setposition(); + }; + this.hide = function () { + switch (settings.hideEffect) { + case 'fadeout': + this.node.fadeOut(settings.fadeoutSpeed, function () {}); + break; + default: + this.node.hide(); + break; + } + this.ieframe.hide(); + }; + this.show = function () { + switch (settings.showEffect) { + case 'fadein': + this.node.fadeIn(); + this.node.fadeIn(settings.fadeinSpeed, function () {}); + break; + default: + this.node.show(); + break; + } + if (isIE6 && settings.zoomType != 'innerzoom') { + this.ieframe.width = this.node.width(); + this.ieframe.height = this.node.height(); + this.ieframe.left = this.node.leftpos; + this.ieframe.top = this.node.toppos; + this.ieframe.css({ + display: 'block', + position: "absolute", + left: this.ieframe.left, + top: this.ieframe.top, + zIndex: 99, + width: this.ieframe.width + 'px', + height: this.ieframe.height + 'px' + }); + $('.zoomPad', el).append(this.ieframe); + this.ieframe.show(); + }; + }; + }; +/*========================================================, +| LargeImage +|---------------------------------------------------------: +| The large detailed image +`========================================================*/ + + function Largeimage() { + var $obj = this; + this.node = new Image(); + this.loadimage = function (url) { + //showing preload + loader.show(); + this.url = url; + this.node.style.position = 'absolute'; + this.node.style.border = '0px'; + this.node.style.display = 'none'; + this.node.style.left = '-5000px'; + this.node.style.top = '0px'; + document.body.appendChild(this.node); + this.node.src = url; // fires off async + }; + this.fetchdata = function () { + var image = $(this.node); + var scale = {}; + this.node.style.display = 'block'; + $obj.w = image.width(); + $obj.h = image.height(); + $obj.pos = image.offset(); + $obj.pos.l = image.offset().left; + $obj.pos.t = image.offset().top; + $obj.pos.r = $obj.w + $obj.pos.l; + $obj.pos.b = $obj.h + $obj.pos.t; + scale.x = ($obj.w / smallimage.w); + scale.y = ($obj.h / smallimage.h); + el.scale = scale; + document.body.removeChild(this.node); + $('.zoomWrapperImage', el).empty().append(this.node); + //setting lens dimensions; + lens.setdimensions(); + }; + this.node.onerror = function () { + alert('Problems while loading the big image.'); + throw 'Problems while loading the big image.'; + }; + this.node.onload = function () { + //fetching data + $obj.fetchdata(); + loader.hide(); + el.largeimageloading = false; + el.largeimageloaded = true; + if (settings.zoomType == 'drag' || settings.alwaysOn) { + lens.show(); + stage.show(); + lens.setcenter(); + } + }; + this.setposition = function () { + var left = -el.scale.x * (lens.getoffset().left - smallimage.bleft + 1); + var top = -el.scale.y * (lens.getoffset().top - smallimage.btop + 1); + $(this.node).css({ + 'left': left + 'px', + 'top': top + 'px' + }); + }; + return this; + }; + $(el).data("jqzoom", obj); + }; + //es. $.jqzoom.disable('#jqzoom1'); + $.jqzoom = { + defaults: { + zoomType: 'standard', + //innerzoom/standard/reverse/drag + zoomWidth: 300, + //zoomWindow default width + zoomHeight: 300, + //zoomWindow default height + xOffset: 10, + //zoomWindow x offset, can be negative(more on the left) or positive(more on the right) + yOffset: 0, + //zoomWindow y offset, can be negative(more on the left) or positive(more on the right) + position: "right", + //zoomWindow default position + preloadImages: true, + //image preload + preloadText: 'Loading zoom', + title: true, + lens: true, + imageOpacity: 0.4, + alwaysOn: false, + showEffect: 'show', + //show/fadein + hideEffect: 'hide', + //hide/fadeout + fadeinSpeed: 'slow', + //fast/slow/number + fadeoutSpeed: '2000' //fast/slow/number + }, + disable: function (el) { + var api = $(el).data('jqzoom'); + api.disable(); + return false; + }, + enable: function (el) { + var api = $(el).data('jqzoom'); + api.enable(); + return false; + }, + disableAll: function (el) { + jqzoompluging_disabled = true; + }, + enableAll: function (el) { + jqzoompluging_disabled = false; + } + }; +})(jQuery); \ No newline at end of file diff --git a/js/jquery/plugins/jqzoom/zoomloader.gif b/js/jquery/plugins/jqzoom/zoomloader.gif new file mode 100644 index 0000000000000000000000000000000000000000..5b33f7e54f4e55b6b8774d86d96895db9af044b4 GIT binary patch literal 1849 zcma*odr(tX9tZI2z31lM+(&YVk%mZ}5P~KlG2s=WSbGzm0!x7^P##Mnh7t-jP!X0Q zk_SQ}Po-L1tlDK;6l?(>v)e5ZBQx4|Y-Q?nr@Px3?9h(3ZWr3^tj=`TP57gKr87N$ zp2wWee1GRRCwo_xahnw)5cxNPJbCg2L6DV|6`#+yw6v6!mDS$f9-JvFD^n;GQ&UrZ zzh5jCkByB101O60U0q#p_1BM>Cv-vP?&s4@g_((4_1L=L$(a91)0=J91Gas#R{McE znYG^9*0A5YZ>#;~+Wkn(W5B0^yELIYLP!K}mB~<)AM@1&nqekynuaEGqPrzoH|KodRXJy)%+w_fu3nE5>@Bd_b zqC$EQ;{c`T&?EsNO|igL9gC7Ygxv?aQUEXMq?~>wg{EyW;VcJ37CUF#HjrT=KQO_* zS>M9yydXk18D(+QDJ1>r);Lav_uYKp$T?4vr{Q$lTo&pKv^?(>L-)G2*lwH!Ah7k? z7oH<8h-(KTKt5V6$8gF)C7Io&P5=SjTh)=zV=E2EUhQZP##L8S{d%UK>>+y82>+FV+#^BzW7u3F)Bb>=lYQ%%j`F>ASe zo*cw@V#u6T`A2He;70mR(V&iV&-7{qP~=SRf&jm9-T{*ZeZ}$rd0#6c&fLG^xJcf5 z+p<`wJYgW+_s*V{uI$nMB;%8`S_3>PfGOj3Rq}@Cx^+j?rk92fANSFDBYnOqQ>Vdj z)(|$AhP4t&Lb=Gvo2#3Gl%9<=Gv`Mz?Po@P4iLF!x}GUWJICDlFk-hS^Whyh7x~VH z@0vD1>HYD4&e+~yzS*-sFR{9`{QEEZO1zg7>R&7cHts-6j!xHVdA8eI+ZlVzd%`es zJT@$#GX(gvCJ1oJN%yLBK}{V=V;seo;!w|Yte!W1%5qLNFWqvZW>h&IiH+oPT=b@E zPhGzv5=(Un*X>v`>%8h_nj^NdYcE6NHS_ifkCV$*D)Tqrbu`s;<=t<4 zAHNqNV?6(g<1PY-w@#I-WYFViz?9TrkMr)u0g`O`u|>T;k|2sV*YF^punvT;$SuTy{j3Gv)yqD!R_CF>yR)MzmmYS5v+~R zXAdD%ng9?df;wd8GxR#%3O+gz};Vo;)sK%Bj-q>Oq%R7JU-KD?vYu>#2UjaDo z&8$>5xW~?KPD_#XFToU1hIb*VOMidUr6iYiO0N|i-7s`T8!cFT`rN!^1Pt78J93i6 z5HI1wIM$94m{3SLDvISDe6$ZG1;eq_D9RTaaC>=cO{@Bs>$IlPCPJJ$h$)-3vzNUQ6OsN#_zWxey!_9%hxwH2_dEJi=yY|1c7nDm2_Lm!Cof8-R_+9UkS zcBE(o47yE)oMR(Q=dp1a2wTX5KvvGyLqlWTa7V&!A*|w|)ax~1_~aJ0=_Lilg*0iQk7#ZD EAHN$8j{pDw literal 0 HcmV?d00001 diff --git a/themes/default-bootstrap/css/comparator.css b/themes/default-bootstrap/css/comparator.css index 955159f16..3715b7e0c 100644 --- a/themes/default-bootstrap/css/comparator.css +++ b/themes/default-bootstrap/css/comparator.css @@ -94,3 +94,86 @@ table#product_comparison .product-rating { .footer_link { margin-bottom: 20px; } + +#product_comparison .comparison_feature .product_name { + display: none; +} + +@media (max-width: 992px) { + #columns table#product_comparison tbody tr td.td_empty span { + font-size: 14px; + } + #columns table#product_comparison tbody tr td.product-block { + padding: 14px; + } + #columns table#product_comparison .button.ajax_add_to_cart_button, #columns table#product_comparison .button.lnk_view { + font-size: 14px; + } +} +@media (max-width: 767px) { + #product_comparison table, + #product_comparison thead, + #product_comparison tbody, + #product_comparison th, + #product_comparison td, + #product_comparison tr { + display: block; + } + + #product_comparison thead tr { + position: absolute; + top: -9999px; + left: -9999px; + } + + #product_comparison tr { + overflow: hidden; + } + #product_comparison tr:last-child { + border-bottom: none; + } + #product_comparison tr:last-child td { + border-bottom: none; + } + + #product_comparison td { + border: none; + position: relative; + white-space: normal; + float: left; + width: 33.33%; + } + #product_comparison td.td_empty { + width: 100% !important; + clear: both; + } + #product_comparison td:last-child { + border-bottom: none; + } + + #product_comparison .comparison_feature .feature-name { + width: 100%; + float: none; + clear: both; + } +} +@media (max-width: 480px) { + #product_comparison td { + float: none; + width: 100%; + } + + #product_comparison .comparison_feature td { + float: left; + width: 50%; + } + #product_comparison .comparison_feature .feature-name { + width: 100%; + clear: both; + } + #product_comparison .comparison_feature .product-name { + width: 50%; + float: left; + display: block; + } +} diff --git a/themes/default-bootstrap/css/product.css b/themes/default-bootstrap/css/product.css index dc496628b..7f4662ce8 100644 --- a/themes/default-bootstrap/css/product.css +++ b/themes/default-bootstrap/css/product.css @@ -96,6 +96,13 @@ img { #pb-right-column #image-block #view_full_size .span_link:hover:after { color: #333333; } +#pb-right-column #image-block a.jqzoom div div img { + width: auto; + max-width: 10000px; +} +#pb-right-column #image-block a.jqzoom div div .zoomWrapper { + border: none; +} .ie8 #pb-right-column #image-block #view_full_size .span_link { background: #fff; @@ -145,7 +152,7 @@ img { width: 90px; cursor: pointer; border: 1px solid #dbdbdb; - margin-right: 9px; + margin-right: 8px; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; diff --git a/themes/default-bootstrap/js/product.js b/themes/default-bootstrap/js/product.js index 8f17aa111..25019f03d 100644 --- a/themes/default-bootstrap/js/product.js +++ b/themes/default-bootstrap/js/product.js @@ -491,7 +491,10 @@ function refreshProductImages(id_product_attribute) $('#thumbs_list li').hide(); $('#thumbs_list').trigger('goto', 0); for (var i = 0; i < combinationImages[id_product_attribute].length; i++) - $('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).show(); + if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled) + $('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).show().children('a.shown').trigger('click'); + else + $('#thumbnail_' + parseInt(combinationImages[id_product_attribute][i])).show(); if (parseInt($('#thumbs_list_frame >li:visible').length) < parseInt($('#thumbs_list_frame >li').length)) $('#wrapResetImages').show('slow'); else @@ -543,12 +546,13 @@ $(document).ready(function() //set jqZoom parameters if needed if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled) { - $('#bigpic').attr('rel', $('#bigpic').attr('src').replace('large', 'thickbox')); - $('img.jqzoom').jqueryzoom({ - xzoom: 600, //zooming div default width(default width value is 200) - yzoom: 600, //zooming div default width(default height value is 200) - offset: 21 //zooming div default offset(default offset value is 10) - //position: "right" //zooming div position(default position value is "right") + $('.jqzoom').jqzoom({ + zoomType: 'innerzoom', //innerzoom/standard/reverse/drag + zoomWidth: 458, //zooming div default width(default width value is 200) + zoomHeight: 458, //zooming div default width(default height value is 200) + xOffset: 21, //zooming div default offset(default offset value is 10) + yOffset: 0, + title: false }); } //add a link on the span 'view full size' and on the big image diff --git a/themes/default-bootstrap/product.tpl b/themes/default-bootstrap/product.tpl index 766fdcb0c..9899fbdac 100644 --- a/themes/default-bootstrap/product.tpl +++ b/themes/default-bootstrap/product.tpl @@ -186,7 +186,7 @@ var contentOnly = {if $content_only}true{else}false{/if}
-
+
{if $product->on_sale} @@ -197,9 +197,14 @@ var contentOnly = {if $content_only}true{else}false{/if} {if $have_image} - {if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if} - {if !$content_only}{l s='View larger'}{/if} - + {if $jqZoomEnabled && $have_image && !$content_only} + + {if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if} + + {else} + {if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if} + {if !$content_only}{l s='View larger'}{/if} + {/if} {else} @@ -223,7 +228,7 @@ var contentOnly = {if $content_only}true{else}false{/if} {assign var=imageTitlte value=$product->name|escape:'html'} {/if}
  • - + {$imageTitlte}
    • diff --git a/themes/default-bootstrap/sass/comparator.scss b/themes/default-bootstrap/sass/comparator.scss index b64e4301e..811593a8a 100644 --- a/themes/default-bootstrap/sass/comparator.scss +++ b/themes/default-bootstrap/sass/comparator.scss @@ -109,4 +109,99 @@ table#product_comparison { .ie8 table#product_comparison .product-image-block .product_image img { width:auto; } -.footer_link { margin-bottom:20px;} \ No newline at end of file +.footer_link { margin-bottom:20px;} + + +#product_comparison{ + .comparison_feature{ + .product_name{display: none;} + } + } + +@media (max-width: 992px) { + #columns table#product_comparison{ + tbody tr td.td_empty span { + font-size: 14px; + } + tbody tr td.product-block { + padding: 14px; + } + .button.ajax_add_to_cart_button, .button.lnk_view{ + font-size: 14px; + } + } +} + +@media (max-width: 767px) { + #product_comparison table, + #product_comparison thead, + #product_comparison tbody, + #product_comparison th, + #product_comparison td, + #product_comparison tr {display: block;} + + #product_comparison thead tr { + position: absolute; + top: -9999px; + left: -9999px; + } + #product_comparison tr { + overflow: hidden; + &:last-child{ + border-bottom: none; + td{ + border-bottom: none; + } + } + } + + #product_comparison td { + border: none; + position: relative; + white-space: normal; + float: left; + width: 33.33%; + &.td_empty{ + width: 100% !important; + clear: both; + } + &:last-child{ + border-bottom: none; + } + } + + #product_comparison{ + .comparison_feature{ + .feature-name{ + width: 100%; + float: none; + clear: both; + } + } + } +} + +@media (max-width: 480px) { + #product_comparison td { + float: none; + width: 100%; + } + + #product_comparison{ + .comparison_feature{ + td{ + float: left; + width: 50%; + } + .feature-name{ + width: 100%; + clear: both; + } + .product-name{ + width: 50%; + float: left; + display: block; + } + } + } +} diff --git a/themes/default-bootstrap/sass/product.scss b/themes/default-bootstrap/sass/product.scss index 6f1638592..66f21efd5 100644 --- a/themes/default-bootstrap/sass/product.scss +++ b/themes/default-bootstrap/sass/product.scss @@ -94,6 +94,17 @@ img{ &:hover:after{color:$base-text-color} } } + a.jqzoom { + div div { + img { + width:auto; + max-width:10000px; + } + .zoomWrapper { + border:none; + } + } + } } } .ie8 #pb-right-column { @@ -151,7 +162,7 @@ img{ width:90px; cursor:pointer; border:1px solid $product-image-border; - margin-right:9px; + margin-right:8px; line-height:0; @include box-sizing(border-box); @media (min-width: $screen-sm) and (max-width: $screen-sm-max) { //min 768px max 991px