updated jqzoom and products compare page is responsive now
This commit is contained in:
TMMeilleur
@@ -1,21 +1,120 @@
|
|||||||
div.zoomdiv {
|
.zoomPad{
|
||||||
z-index : 100;
|
position:relative;
|
||||||
position : absolute;
|
float:left;
|
||||||
top:0px;
|
z-index:99;
|
||||||
left:0px;
|
cursor:crosshair;
|
||||||
width : 200px;
|
|
||||||
height : 200px;
|
|
||||||
background: #ffffff;
|
|
||||||
border:1px solid #CCCCCC;
|
|
||||||
display:none;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
img.jqzoom{
|
.zoomPreload{
|
||||||
cursor:crosshair;
|
-moz-opacity:0.8;
|
||||||
position:relative;
|
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
|
||||||
|
/*********************************************************/
|
||||||
@@ -1,83 +1,734 @@
|
|||||||
//**************************************************************
|
/*!
|
||||||
// jQZoom allows you to realize a small magnifier window,close
|
* jQzoom Evolution Library v2.3 - Javascript Image magnifier
|
||||||
// to the image or images on your web page easily.
|
* http://www.mind-projects.it
|
||||||
//
|
*
|
||||||
// jqZoom version 1.2
|
* Copyright 2011, Engineer Marco Renzi
|
||||||
// Author Doc. Ing. Renzi Marco(www.mind-projects.it)
|
* Licensed under the BSD license.
|
||||||
// Released on Dec 05 2007
|
*
|
||||||
// i'm searching for a job,pick me up!!!
|
* Redistribution and use in source and binary forms, with or without
|
||||||
// mail: renzi.mrc@gmail.com
|
* 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 = $('<div/>').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($) {
|
//prevent fast mouse mevements not to fire the mouseout event
|
||||||
$.fn.jqueryzoom = function(options) {
|
if (e.pageX > smallimage.pos.r || e.pageX < smallimage.pos.l || e.pageY < smallimage.pos.t || e.pageY > smallimage.pos.b) {
|
||||||
var settings = {
|
lens.setcenter();
|
||||||
xzoom: 200, //zoomed width default width
|
return false;
|
||||||
yzoom: 200, //zoomed div default width
|
}
|
||||||
offset: 10, //zoomed div default offset
|
el.zoom_active = true;
|
||||||
position: "right" //zoomed div default position,offset position is to the right of the image
|
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)
|
function Smallimage(image) {
|
||||||
$.extend(settings, options);
|
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 = $('<div/>').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() {
|
function Lens() {
|
||||||
var imageRelativeLeft = $(this).get(0).offsetLeft;
|
var $obj = this;
|
||||||
var imageLeft = $($(this).get(0)).offset().left;
|
this.node = $('<div/>').addClass('zoomPup');
|
||||||
var imageRelativeTop = $(this).get(0).offsetTop;
|
//this.nodeimgwrapper = $("<div/>").addClass('zoomPupImgWrapper');
|
||||||
var imageTop = $($(this).get(0)).offset().top;
|
this.append = function () {
|
||||||
var imageWidth = $(this).get(0).offsetWidth;
|
$('.zoomPad', el).append($(this.node).hide());
|
||||||
var imageHeight = $(this).get(0).offsetHeight;
|
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("<div class='zoomdiv'><img class='bigimg' src='"+bigimage+"'/></div>");
|
|
||||||
|
|
||||||
if(settings.position == "right")
|
if (settings.zoomType == 'reverse') {
|
||||||
leftpos = imageRelativeLeft + imageWidth + settings.offset;
|
this.image.src = smallimage.node.src;
|
||||||
else
|
$(this.node).css({
|
||||||
leftpos = imageRelativeLeft - settings.xzoom - settings.offset;
|
'opacity': 1
|
||||||
|
});
|
||||||
|
|
||||||
$("div.zoomdiv").css({top: imageRelativeTop,left: leftpos});
|
$(this.image).css({
|
||||||
$("div.zoomdiv").width(settings.xzoom);
|
position: 'absolute',
|
||||||
$("div.zoomdiv").height(settings.yzoom);
|
display: 'block',
|
||||||
$("div.zoomdiv").show();
|
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;
|
this.setcenter = function () {
|
||||||
var scaley ='x';
|
//calculating center position
|
||||||
var scalex= '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: 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) ;
|
//centering large image
|
||||||
var scaley = Math.round(bigheight/imageHeight);
|
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 ;
|
function overright(lens) {
|
||||||
$("div.zoomdiv").get(0).scrollTop = scrolly * scaley ;
|
return el.mousepos.x + (lens.w) / 2 > smallimage.pos.r;
|
||||||
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 MouseEvent(e) {
|
function overtop(lens) {
|
||||||
this.x = e.pageX
|
return el.mousepos.y - (lens.h) / 2 < smallimage.pos.t;
|
||||||
this.y = e.pageY
|
}
|
||||||
}
|
|
||||||
|
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 = $("<div class='zoomWindow'><div class='zoomWrapper'><div class='zoomWrapperTitle'></div><div class='zoomWrapperImage'></div></div></div>");
|
||||||
|
this.ieframe = $('<iframe class="zoomIframe" src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" ></iframe>');
|
||||||
|
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);
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@@ -94,3 +94,86 @@ table#product_comparison .product-rating {
|
|||||||
.footer_link {
|
.footer_link {
|
||||||
margin-bottom: 20px;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -96,6 +96,13 @@ img {
|
|||||||
#pb-right-column #image-block #view_full_size .span_link:hover:after {
|
#pb-right-column #image-block #view_full_size .span_link:hover:after {
|
||||||
color: #333333;
|
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 {
|
.ie8 #pb-right-column #image-block #view_full_size .span_link {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@@ -145,7 +152,7 @@ img {
|
|||||||
width: 90px;
|
width: 90px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
border: 1px solid #dbdbdb;
|
border: 1px solid #dbdbdb;
|
||||||
margin-right: 9px;
|
margin-right: 8px;
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
-webkit-box-sizing: border-box;
|
-webkit-box-sizing: border-box;
|
||||||
-moz-box-sizing: border-box;
|
-moz-box-sizing: border-box;
|
||||||
|
|||||||
@@ -491,7 +491,10 @@ function refreshProductImages(id_product_attribute)
|
|||||||
$('#thumbs_list li').hide();
|
$('#thumbs_list li').hide();
|
||||||
$('#thumbs_list').trigger('goto', 0);
|
$('#thumbs_list').trigger('goto', 0);
|
||||||
for (var i = 0; i < combinationImages[id_product_attribute].length; i++)
|
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))
|
if (parseInt($('#thumbs_list_frame >li:visible').length) < parseInt($('#thumbs_list_frame >li').length))
|
||||||
$('#wrapResetImages').show('slow');
|
$('#wrapResetImages').show('slow');
|
||||||
else
|
else
|
||||||
@@ -543,12 +546,13 @@ $(document).ready(function()
|
|||||||
//set jqZoom parameters if needed
|
//set jqZoom parameters if needed
|
||||||
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
|
if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
|
||||||
{
|
{
|
||||||
$('#bigpic').attr('rel', $('#bigpic').attr('src').replace('large', 'thickbox'));
|
$('.jqzoom').jqzoom({
|
||||||
$('img.jqzoom').jqueryzoom({
|
zoomType: 'innerzoom', //innerzoom/standard/reverse/drag
|
||||||
xzoom: 600, //zooming div default width(default width value is 200)
|
zoomWidth: 458, //zooming div default width(default width value is 200)
|
||||||
yzoom: 600, //zooming div default width(default height value is 200)
|
zoomHeight: 458, //zooming div default width(default height value is 200)
|
||||||
offset: 21 //zooming div default offset(default offset value is 10)
|
xOffset: 21, //zooming div default offset(default offset value is 10)
|
||||||
//position: "right" //zooming div position(default position value is "right")
|
yOffset: 0,
|
||||||
|
title: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//add a link on the span 'view full size' and on the big image
|
//add a link on the span 'view full size' and on the big image
|
||||||
|
|||||||
@@ -186,7 +186,7 @@ var contentOnly = {if $content_only}true{else}false{/if}
|
|||||||
<div id="pb-right-column" class="col-xs-12 col-sm-4 col-md-5">
|
<div id="pb-right-column" class="col-xs-12 col-sm-4 col-md-5">
|
||||||
<!-- product img-->
|
<!-- product img-->
|
||||||
|
|
||||||
<div id="image-block">
|
<div id="image-block" class="clearfix">
|
||||||
|
|
||||||
|
|
||||||
{if $product->on_sale}
|
{if $product->on_sale}
|
||||||
@@ -197,9 +197,14 @@ var contentOnly = {if $content_only}true{else}false{/if}
|
|||||||
|
|
||||||
{if $have_image}
|
{if $have_image}
|
||||||
<span id="view_full_size">
|
<span id="view_full_size">
|
||||||
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}"{if $jqZoomEnabled && $have_image} class="jqzoom"{/if} title="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
|
{if $jqZoomEnabled && $have_image && !$content_only}
|
||||||
{if !$content_only}<span class="span_link">{l s='View larger'}</span>{/if}
|
<a class="jqzoom" title="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" rel="gal1" href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')|escape:'html'}">
|
||||||
|
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}"/>
|
||||||
|
</a>
|
||||||
|
{else}
|
||||||
|
<img itemprop="image" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}" title="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'html'}{else}{$product->name|escape:'html'}{/if}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
|
||||||
|
{if !$content_only}<span class="span_link">{l s='View larger'}</span>{/if}
|
||||||
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
{else}
|
{else}
|
||||||
<span id="view_full_size">
|
<span id="view_full_size">
|
||||||
@@ -223,7 +228,7 @@ var contentOnly = {if $content_only}true{else}false{/if}
|
|||||||
{assign var=imageTitlte value=$product->name|escape:'html'}
|
{assign var=imageTitlte value=$product->name|escape:'html'}
|
||||||
{/if}
|
{/if}
|
||||||
<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
|
<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
|
||||||
<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$imageTitlte}">
|
<a {if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}{{/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}'{literal}}{/literal}" {else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}"{/if} title="{$imageTitlte}">
|
||||||
<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}" height="{$mediumSize.height}" width="{$mediumSize.width}" itemprop="image" />
|
<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}" height="{$mediumSize.height}" width="{$mediumSize.width}" itemprop="image" />
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -109,4 +109,99 @@ table#product_comparison {
|
|||||||
.ie8 table#product_comparison .product-image-block .product_image img {
|
.ie8 table#product_comparison .product-image-block .product_image img {
|
||||||
width:auto;
|
width:auto;
|
||||||
}
|
}
|
||||||
.footer_link { margin-bottom:20px;}
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -94,6 +94,17 @@ img{
|
|||||||
&:hover:after{color:$base-text-color}
|
&:hover:after{color:$base-text-color}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
a.jqzoom {
|
||||||
|
div div {
|
||||||
|
img {
|
||||||
|
width:auto;
|
||||||
|
max-width:10000px;
|
||||||
|
}
|
||||||
|
.zoomWrapper {
|
||||||
|
border:none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ie8 #pb-right-column {
|
.ie8 #pb-right-column {
|
||||||
@@ -151,7 +162,7 @@ img{
|
|||||||
width:90px;
|
width:90px;
|
||||||
cursor:pointer;
|
cursor:pointer;
|
||||||
border:1px solid $product-image-border;
|
border:1px solid $product-image-border;
|
||||||
margin-right:9px;
|
margin-right:8px;
|
||||||
line-height:0;
|
line-height:0;
|
||||||
@include box-sizing(border-box);
|
@include box-sizing(border-box);
|
||||||
@media (min-width: $screen-sm) and (max-width: $screen-sm-max) { //min 768px max 991px
|
@media (min-width: $screen-sm) and (max-width: $screen-sm-max) { //min 768px max 991px
|
||||||
|
|||||||
Reference in New Issue
Block a user