1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
|
var GalleryView = View.extend({
el: "#gallery",
template: $("#gallery .template").html(),
events: {
// "click .left": "prev",
// "click .right": "next",
// "touchstart .gallery": "touchstart",
// "touchmove .gallery": "touchmove",
// "touchend .gallery": "touchend",
},
initialize: function(){
this.$(".template").remove()
},
reset: function(){
this.gallery && this.gallery.destroy()
this.$el.empty()
},
populate: function(code, image_ids){
var valid_styles = {}
var large_styles = {}
image_ids.forEach(function(id){
if (id.indexOf("_") == -1) return
var partz = id.split("_")
var size = parseInt(partz[0]), style = partz[1]
if (! large_styles[style] || large_styles[style] < size) {
large_styles[style] = size
}
if (size > 13) return;
if (! valid_styles[style] || valid_styles[style] < size) {
valid_styles[style] = size
}
})
Object.keys(valid_styles).sort(sort_image_styles).forEach(function(style){
var id = valid_styles[style] + "_" + style
var t = this.template
.replace(/{{image}}/, sdk.image(code, id))
.replace(/{{alt}}/, YOOX_IMAGE_STYLE_LABELS[style] || "Alternate view")
this.$el.append(t)
}.bind(this))
var gallery = this.gallery = new Flickity( "#gallery", {
selector: '.item',
cellAlign: 'center',
autoPlay: false,
freeScroll: false,
wrapAround: true,
imagesLoaded: true,
prevNextButtons: false,
pageDots: false,
contain: true,
draggable: true,
})
this.gallery.on('staticClick', function(e){
var currentImage = gallery.selectedElement.style.backgroundImage.replace(/url\(\"?/,"").replace(/\"?\)/,"")
var partz = currentImage.split("_")
var head = partz[0]
var size = partz[1]
var tail = partz[2]
var end_partz = tail.split(/\./)
var style = end_partz[0]
var largest_size = large_styles[style]
var hiresImage = [head, largest_size, tail].join("_")
app.fullscreenViewer.show(currentImage, hiresImage)
})
},
touchstart: function(e){
},
touchmove: function(e){
},
touchend: function(e){
},
})
var YOOX_IMAGE_STYLE_ORDER = "ZZZ f r d e a b c g l".split(" ")
var YOOX_IMAGE_STYLE_LABELS = {
f: 'Front view',
r: 'Rear view',
}
function sort_image_styles (b,a){ return (YOOX_IMAGE_STYLE_ORDER.indexOf(b)) - (YOOX_IMAGE_STYLE_ORDER.indexOf(a)) }
|
