Инструкция по установке
Исходник скрипта, который сейчас работает у нас, лежит тут:
http://static.eldorado.ru/bitrix/components/eldorado/3d.review/templates/.default/js3d.js
$(document).ready(function() {
(function(e) {
function l(a, d, k) {
for (a = String(a); a.length < d;) a = String(k) + a;
return a
}
function f(a, d, k, b) {
for (; a > k;) a -= b;
for (; a < d;) a += b;
return a
}
function m(a) {
a.preventDefault();
return !1
}
function b() {
window.console && window.console.log && window.console.log.apply(window.console, arguments)
}
function c(a, d, k) {
k && a.bind(d + "." + n, k)
}
function g(a) {
var d = "string" === typeof a.source ? [a.source] : a.source,
k, b = 0,
c, e = [],
h = function() {
b += 1;
"function" === typeof a.progress && a.progress({
loaded: b,
total: d.length,
percent: Math.round(b /
d.length * 100)
});
b === e.length && "function" === typeof a.complete && a.complete(e)
};
for (k = 0; k < d.length; k += 1) c = new Image, e.push(c), c.onload = c.onabort = c.onerror = h, c.src = d[k]
}
function p(a, d) {
var k = (d || a).width,
c;
if (1048576 < k * (d || a).height) {
c = document.createElement("canvas");
if (!c || !c.getContext || !c.getContext("2d")) return !1;
c.width = c.height = 1;
c = c.getContext("2d");
c.fillStyle = "FF00FF";
c.fillRect(0, 0, 1, 1);
c.drawImage(a, -k + 1, 0);
try {
var e = c.getImageData(0, 0, 1, 1).data;
return 255 === e[0] && 0 === e[1] && 255 === e[2]
} catch (h) {
b(h.message,
h.stack)
}
}
return !1
}
var h = window.SpriteSpin = {},
n = h.namespace = "spritespin",
q = "mousedown mousemove mouseup mouseenter mouseover mouseleave dblclick touchstart touchmove touchend touchcancel selectstart gesturestart gesturechange gestureend".split(" ");
h.mods = {};
h.defaults = {
source: void 0,
width: void 0,
height: void 0,
frames: void 0,
framesX: void 0,
lanes: 1,
module: "360",
behavior: "drag",
renderer: "canvas",
lane: 0,
frame: 0,
frameTime: 100,
animate: !0,
reverse: !1,
loop: !0,
stopFrame: 0,
wrap: !0,
wrapLane: !1,
sense: 1,
senseLane: void 0,
orientation: "horizontal",
onInit: void 0,
onProgress: void 0,
onLoad: void 0,
onFrame: void 0,
onDraw: void 0
};
h.sourceArray = function(a, d) {
var k = 0,
b = 0,
c = 0,
e = 0,
h = d.digits || 2;
d.frame && (k = d.frame[0], b = d.frame[1]);
d.lane && (c = d.lane[0], e = d.lane[1]);
for (var g, f, p = []; c <= e; c += 1)
for (g = k; g <= b; g += 1) f = a.replace("{lane}", l(c, h, 0)), f = f.replace("{frame}", l(g, h, 0)), p.push(f);
return p
};
h.measureSource = function(a) {
var d = a.images[0],
b;
b = new Image;
b.src = d.src;
b = {
width: b.width,
height: b.height
};
1 === a.images.length ? (a.sourceWidth =
b.width, a.sourceHeight = b.height, p(d, b) && (a.sourceWidth /= 2, a.sourceHeight /= 2), a.framesX = a.framesX || a.frames, a.frameWidth && a.frameHeight || (a.framesX ? (a.frameWidth = Math.floor(a.sourceWidth / a.framesX), d = Math.ceil(a.frames * a.lanes / a.framesX), a.frameHeight = Math.floor(a.sourceHeight / d)) : (a.frameWidth = b.width, a.frameHeight = b.height))) : (a.sourceWidth = a.frameWidth = b.width, a.sourceHeight = a.frameHeight = b.height, p(d, b) && (a.sourceWidth = a.frameWidth = b.width / 2, a.sourceHeight = a.frameHeight = b.height / 2), a.frames = a.frames ||
a.images.length)
};
h.resetInput = function(a) {
a.startX = a.startY = void 0;
a.currentX = a.currentY = void 0;
a.oldX = a.oldY = void 0;
a.dX = a.dY = a.dW = 0;
a.ddX = a.ddY = a.ddW = 0
};
h.updateInput = function(a, d) {
void 0 === a.touches && void 0 !== a.originalEvent && (a.touches = a.originalEvent.touches);
d.oldX = d.currentX;
d.oldY = d.currentY;
void 0 !== a.touches && 0 < a.touches.length ? (d.currentX = a.touches[0].clientX, d.currentY = a.touches[0].clientY) : (d.currentX = a.clientX, d.currentY = a.clientY);
if (void 0 === d.startX || void 0 === d.startY) d.startX = d.currentX,
d.startY = d.currentY, d.clickframe = d.frame, d.clicklane = d.lane;
d.dX = d.currentX - d.startX;
d.dY = d.currentY - d.startY;
d.ddX = d.currentX - d.oldX;
d.ddY = d.currentY - d.oldY;
d.ndX = d.dX / d.width;
d.ndY = d.dY / d.height;
d.nddX = d.ddX / d.width;
d.nddY = d.ddY / d.height
};
h.updateFrame = function(a, d, b) {
void 0 !== d ? a.frame = Number(d) : a.animation && (a.frame += a.reverse ? -1 : 1);
if (a.animation) a.frame = f(a.frame, 0, a.frames - 1, a.frames), a.loop || a.frame !== a.stopFrame || (a.animate = !1, h.stopAnimation(a));
else if (a.wrap) a.frame = f(a.frame, 0, a.frames -
1, a.frames);
else {
d = a.frame;
var c = a.frames - 1;
a.frame = d > c ? c : 0 > d ? 0 : d
}
void 0 !== b && (a.lane = b, b = a.lane, d = a.lanes - 1, a.lane = b > d ? d : 0 > b ? 0 : b);
a.target.trigger("onFrame", a);
a.target.trigger("onDraw", a)
};
h.stopAnimation = function(a) {
a.animation && (window.clearInterval(a.animation), a.animation = null)
};
h.setAnimation = function(a) {
h.stopAnimation(a);
a.animate && (a.animation = window.setInterval(function() {
try {
h.updateFrame(a)
} catch (d) {}
}, a.frameTime))
};
h.setModules = function(a) {
var d, b, c;
for (d = 0; d < a.mods.length; d += 1) b = a.mods[d],
"string" === typeof b && ((c = h.mods[b]) ? a.mods[d] = c : e.error("No module found with name " + b))
};
h.setLayout = function(a) {
a.target.attr("unselectable", "on").css({
"-ms-user-select": "none",
"-moz-user-select": "none",
"-khtml-user-select": "none",
"-webkit-user-select": "none",
"user-select": "none"
});
var b = Math.floor(a.width || a.frameWidth || a.target.innerWidth()),
c = Math.floor(a.height || a.frameHeight || a.target.innerHeight());
a.target.css({
width: b,
height: c,
position: "relative",
overflow: "hidden"
});
var e = {
width: "100%",
height: "100%",
top: 0,
left: 0,
bottom: 0,
right: 0,
position: "absolute"
};
a.stage.css(e).hide();
a.canvas && (a.canvas[0].width = b, a.canvas[0].height = c, a.canvas.css(e).hide())
};
h.setEvents = function(a) {
var b, k, e, g = a.target;
g.unbind("." + n);
for (k = 0; k < q.length; k += 1) c(g, q[k], m);
for (b = 0; b < a.mods.length; b += 1) {
e = a.mods[b];
for (k = 0; k < q.length; k += 1) c(g, q[k], e[q[k]]);
c(g, "onInit", e.onInit);
c(g, "onLoad", e.onLoad);
c(g, "onFrame", e.onFrame);
c(g, "onDraw", e.onDraw)
}
c(g, "onLoad", function(a, b) {
h.setAnimation(b)
});
c(g, "onInit", a.onInit);
c(g, "onProgress", a.onProgress);
c(g, "onLoad", a.onLoad);
c(g, "onFrame", a.onFrame);
c(g, "onDraw", a.onDraw)
};
h.boot = function(a) {
h.setModules(a);
h.setLayout(a);
h.setEvents(a);
a.target.addClass("loading").trigger("onInit", a);
g({
source: a.source,
progress: function(b) {
a.target.trigger("onProgress", b)
},
complete: function(b) {
a.images = b;
h.measureSource(a);
a.stage.show();
a.target.removeClass("loading").trigger("onLoad", a).trigger("onFrame", a).trigger("onDraw", a)
}
})
};
h.create = function(a) {
var b = a.target,
c = b.data(n);
c ? e.extend(c, a) : (c = e.extend({}, h.defaults, a), c.source = c.source || [], b.find("img").each(function() {
c.source.push(e(this).attr("src"))
}), b.empty().addClass("spritespin-instance").append("
"), "canvas" === c.renderer && (a = e("")[0], a.getContext && a.getContext("2d") ? (c.canvas = e(a), c.context = a.getContext("2d"), b.append(c.canvas), b.addClass("with-canvas")) : c.renderer = "image"), c.target = b, c.stage = b.find(".spritespin-stage"), b.data(n, c));
"string" === typeof c.source && (c.source = [c.source]);
if (c.behavior || c.module) c.mods = [], c.behavior && c.mods.push(c.behavior), c.module && c.mods.push(c.module), delete c.behavior, delete c.module;
h.boot(c)
};
h.destroy = function(a) {
a && (h.stopAnimation(a), a.target.unbind("." + n), a.target.removeData(n))
};
h.registerModule = function(a, b) {
h.mods[a] && e.error("Module name is already taken: " + a);
b = b || {};
return h.mods[a] = b
};
h.Api = function(a) {
this.data = a
};
h.extendApi = function(a) {
var b, c = h.Api.prototype;
for (b in a) a.hasOwnProperty(b) &&
(c[b] ? e.error("API method is already defined: " + b) : c[b] = a[b]);
return c
};
e.fn.spritespin = function(a) {
return "data" === a ? this.data(n) : "api" === a ? new h.Api(this.data(n)) : "destroy" === a ? e(this).each(function() {
h.destroy(e(this).data(n))
}) : "object" === typeof a ? (a.target = a.target || e(this), h.create(a), a.target) : e.error("Invalid call to spritespin")
}
})(window.jQuery || window.Zepto || window.$);
(function(e, l) {
function f(b) {
var g = e(this).spritespin("data");
l.updateInput(b, g);
g.dragging = !0
}
function m() {
var b = e(this).spritespin("data");
l.resetInput(b);
b.dragging = !1
}
function b(b) {
var g, f = e(this).spritespin("data");
if (f.dragging) {
l.updateInput(b, f);
g = 0;
g = "number" === typeof f.orientation ? (Number(f.orientation) || 0) * Math.PI / 180 : "horizontal" === f.orientation ? 0 : Math.PI / 2;
b = Math.sin(g);
var h = Math.cos(g);
g = f.ndX * b + f.ndY * h;
b = (f.ndX * h - f.ndY * b) * f.frames * f.sense;
g = g * f.lanes * (f.senseLane || f.sense);
b = Math.floor(f.clickframe +
b);
g = Math.floor(f.clicklane + g);
l.updateFrame(f, b, g);
f.animate = !1;
l.stopAnimation(f)
}
}
l.registerModule("drag", {
mousedown: f,
mousemove: b,
mouseup: m,
mouseleave: m,
touchstart: f,
touchmove: b,
touchend: m,
touchcancel: m
});
l.registerModule("move", {
mousemove: function(c) {
f.call(this, c);
b.call(this, c)
},
mouseleave: m,
touchstart: f,
touchmove: b,
touchend: m,
touchcancel: m
})
})(window.jQuery || window.Zepto || window.$, window.SpriteSpin);
(function(e, l) {
var f = Math.floor;
l.registerModule("360", {
onLoad: function(l, b) {
var c, g;
b.scaleWidth = b.width / b.frameWidth;
b.scaleHeight = b.height / b.frameHeight;
b.sourceIsSprite = 1 === b.images.length;
b.stage.empty().css({
"background-image": "none"
}).show();
"canvas" === b.renderer ? (b.context.clearRect(0, 0, b.width, b.height), b.canvas.show()) : "background" === b.renderer ? (b.sourceIsSprite ? (c = f(b.sourceWidth * b.scaleWidth), g = f(b.sourceHeight * b.scaleHeight)) : (c = f(b.frameWidth * b.scaleWidth), g = f(b.frameHeight * b.scaleHeight)),
c = [c, "px ", g, "px"].join(""), b.stage.css({
"background-repeat": "no-repeat",
"-webkit-background-size": c,
"-moz-background-size": c,
"-o-background-size": c,
"background-size": c
})) : "image" === b.renderer && (b.sourceIsSprite ? (c = f(b.sourceWidth * b.scaleWidth), g = f(b.sourceHeight * b.scaleHeight)) : c = g = "100%", e(b.images).appendTo(b.stage).css({
width: c,
height: g,
position: "absolute"
}))
},
onDraw: function(l, b) {
if (b.sourceIsSprite) {
var c = b.lane * b.frames + b.frame,
g = c % b.framesX * b.frameWidth,
c = b.frameHeight * f(c / b.framesX);
"canvas" ===
b.renderer ? (b.context.clearRect(0, 0, b.width, b.height), b.context.drawImage(b.images[0], g, c, b.frameWidth, b.frameHeight, 0, 0, b.width, b.height)) : (g = -f(g * b.scaleWidth), c = -f(c * b.scaleHeight), "background" === b.renderer ? b.stage.css({
"background-image": ["url('", b.source[0], "')"].join(""),
"background-position": [g, "px ", c, "px"].join("")
}) : e(b.images).css({
top: c,
left: g
}))
} else g = b.lane * b.frames + b.frame, "canvas" === b.renderer ? (b.context.clearRect(0, 0, b.width, b.height), b.context.drawImage(b.images[g], 0, 0, b.width,
b.height)) : "background" === b.renderer ? b.stage.css({
"background-image": ["url('", b.source[g], "')"].join(""),
"background-position": "0px 0px"
}) : (e(b.images).hide(), e(b.images[g]).show())
}
})
})(window.jQuery || window.Zepto || window.$, window.SpriteSpin);
var player360 = {
init: function() {
$(".photo360").each(function() {
player360.play($(this))
});
var isMouseDown = false;
function isLeftButton(event){
var button = event.which ? event.which : event.button;
return button < 2;
}
$('#spinTv_360canvas').mousedown(function(event){
if (isLeftButton(event))
isMouseDown = true;
});
$('#spinTv_360canvas').mouseup(function(){
if (isLeftButton(event))
isMouseDown = false;
});
$('#spinTv_360canvas').mousemove(function(){
if (isMouseDown){
$(".play-again_js").addClass('show')
isMouseDown = false
}
});
},
play: function(e) {
var l = e.attr("id");
if (!(0 < $("#" + l + "_360canvas ").length)) {
var f = e.data(),
m = l + "_360player";
e.wrap('
');
var m = $("#" + m),
b = f.width,
c = f.height;
m.css({
position: "relative",
display: "inline-block",
width: b,
height: c
});
e.css({
position: "absolute",
left: 0,
top: 0,
"z-index": 1
});
m.append('
');
$("#" + l + "_360canvas").css({
position: "absolute",
left: 0,
top: 0,
"z-index": 2,
width: b,
height: c
});
m.append('
');
$("#" + l + "_360play").css({
position: "absolute",
width: 60,
height: 60,
"background-color": "#444444",
color: "#ffffff",
"font-size": 50,
"border-radius": 30,
left: "50%",
top: "50%",
"margin-left": -25,
"margin-top": -25,
opacity: .6,
"text-align": "center",
cursor: "pointer",
"line-height": 1,
"z-index": 3
});
var g = {
objId: l,
width: b,
height: c,
source: f.source,
digits: f.digits,
frames: f.frames,
firstFrame: f.firstFrame - 1,
animate: f.animate,
reverse: f.reverse,
sense: f.sense,
frameTime: f.frameTime
};
e.data("auto") ? this.runPlayer(g) : $("#" + l + "_360play").click(function() {
player360.runPlayer(g)
})
$(".play-again_js").click(function() {
$(".play-again_js").removeClass('show');
player360.runPlayer(g);
})
}
},
runPlayer: function(e) {
$("#" + e.objId + "_360canvas").spritespin({
source: SpriteSpin.sourceArray(e.source, {
frame: [1, e.frames],
digits: e.digits
}),
width: e.width,
height: e.height,
animate: e.animate,
reverse: !1,
frame: e.firstFrame,
sense: e.sense,
orientation: e.reverse ? 0 : 180,
frameTime: e.frameTime,
onInit: function() {
$("#" + e.objId + "_360play").css({
"font-size": "18px",
"line-height": "60px"
}).html("0%")
},
onProgress: function(l, f) {
$("#" + e.objId + "_360play").html(f.percent + "%")
},
onLoad: function() {
$("#" + e.objId + "_360play").remove()
}
})
},
destroy: function(e) {
$("#" + e + "_360canvas").remove()
}
};
initLoadPlay3dView = player360;
});
var initLoadPlay3dView;
var nnItem = $('#productTopPanel').attr('data-tid');
$('#spinTv').attr('data-source', "//static.eldorado.ru/upload/3d/" + nnItem + "/{frame}.jpg");
$(document).ready(function() {
$(".open_3d-js").click(function(event) {
$('.pupUp_3d-js, .shadeDark').show();
initLoadPlay3dView.init();
$('.shadeDark').css({
'height': '3169px',
'opacity' : '0.5'}
);
event.stopPropagation();
});
$(".shadeDark, a.close_3d").click(function(event) {
$('.pupUp_3d-js, .shadeDark').hide();
event.stopPropagation();
})
});
// #28789 auto 3d
var dataItem = $('#3d_comp_params').text().split('&');
$('#spinTv').attr('data-source', "//static.eldorado.ru/" + dataItem[0] + "/" + dataItem[1] + "/{frame}.jpg");
$(document).ready(function() {
var _ff = $j('#firstFotoForma').fotorama();
var ff = _ff.data('fotorama');
//console.log(ff.data.length);
ff.unshift({img: '/bitrix/components/eldorado/3d.review/templates/.default/images/img_for_3d.JPG', thumb: '/upload/3d/110x40.png'});
ff.show({
index: 1,
time: 0
});
_ff.on('fotorama:show', function(){
if(ff.activeIndex === 0){
ff.show({
index: 1,
time: 500
});
}
});
$(".fotorama__nav__frame").click(function(event) {
var str = $(this).find('img').attr('src');
if(str.indexOf('/upload/3d')!=-1) {
$('.pupUp_3d-js, .shadeDark').show();
initLoadPlay3dView.init();
$('.shadeDark').css({
'height': '3169px',
'opacity' : '0.5'}
);
event.stopPropagation();
}
});
$(".shadeDark, a.close_3d").click(function(event) {
$('.pupUp_3d-js, .shadeDark').hide();
event.stopPropagation();
});
});
Структуру можно достать из любого товара, где есть 3d, к примеру:
http://www.eldorado.ru/cat/detail/71173033/
Там же вытянуть CSS ( их смешали с общими, отдельного файла теперь нет ).