|
120
|
1 |
$(function() { |
|
|
2 |
|
|
134
|
3 |
var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"), |
|
190
|
4 |
margin = 50, |
|
|
5 |
jqimgcontainer = $(".image-container"), |
|
|
6 |
jqmainimg = $(".main-image"), |
|
|
7 |
jqbackdrop = $(".backdrop"), |
|
|
8 |
jqpath = $(".clip-path"), |
|
134
|
9 |
lastSlide = null; |
|
120
|
10 |
|
|
|
11 |
function showSlide() { |
|
|
12 |
var slide = slides[currentSlide]; |
|
|
13 |
|
|
134
|
14 |
if (slide !== lastSlide) { |
|
|
15 |
jqcaption.find("h2").text(slide.title); |
|
|
16 |
jqcaption.find("h3").text(slide.author); |
|
190
|
17 |
var captiondiv = jqcaption.find(".caption-description"); |
|
|
18 |
captiondiv.empty(); |
|
|
19 |
slide.description.split(/\s*[\r\n]\s*/gm).forEach(function(p) { |
|
|
20 |
captiondiv.append($("<p>").text(p)); |
|
|
21 |
}); |
|
|
22 |
jqmainimg.attr("xlink:href", slide.image.src); |
|
134
|
23 |
jqbackdrop.attr("src", slide.image.src); |
|
190
|
24 |
jqpath.attr("d", slide.path); |
|
134
|
25 |
} |
|
|
26 |
|
|
|
27 |
lastSlide = slide; |
|
120
|
28 |
|
|
|
29 |
if (slide.image && slide.image.width) { |
|
190
|
30 |
var pathcoords = slide.path.match(/[\d\.]+/g), |
|
|
31 |
pathx = pathcoords.filter(function(p,i) { |
|
|
32 |
return !(i%2); |
|
|
33 |
}), |
|
|
34 |
pathy = pathcoords.filter(function(p,i) { |
|
|
35 |
return (i%2); |
|
|
36 |
}), |
|
|
37 |
minpx = Math.min.apply(Math,pathx), |
|
|
38 |
maxpx = Math.max.apply(Math,pathx), |
|
|
39 |
minpy = Math.min.apply(Math,pathy), |
|
|
40 |
maxpy = Math.max.apply(Math,pathy), |
|
|
41 |
ww = jqwin.width(), |
|
120
|
42 |
wh = jqwin.height(), |
|
|
43 |
cw = jqcaption.outerWidth(), |
|
|
44 |
ch = jqcaption.outerHeight(), |
|
|
45 |
wi = slide.image.width, |
|
190
|
46 |
hi = slide.image.height, |
|
|
47 |
wp = wi * (maxpx - minpx), |
|
|
48 |
hp = hi * (maxpy - minpy), |
|
120
|
49 |
w1 = ww - 2 * margin, w2 = w1 - cw |
|
|
50 |
h1 = wh - 2 * margin, h2 = h1 - ch, |
|
|
51 |
ra = Math.max( |
|
190
|
52 |
Math.min((h1 / hp), (w2 / wp)), |
|
|
53 |
Math.min((h2 / hp), (w1 / wp)) |
|
120
|
54 |
), |
|
190
|
55 |
wa = wp * ra, ha = hp * ra, |
|
120
|
56 |
rb = Math.max(ww / wi, wh / hi), |
|
|
57 |
wb = wi * rb, hb = hi * rb, |
|
|
58 |
xb = (ww - wb) / 2, yb = (wh - hb) / 2; |
|
190
|
59 |
jqimgcontainer.css({ |
|
134
|
60 |
width: wa, |
|
|
61 |
height: ha |
|
120
|
62 |
}); |
|
190
|
63 |
jqimgcontainer[0].setAttribute("viewBox", [minpx,minpy,(maxpx-minpx),(maxpy-minpy)].join(" ")); |
|
134
|
64 |
jqbackdrop.css({ |
|
|
65 |
width: wb, |
|
|
66 |
height: hb, |
|
|
67 |
left: xb, |
|
|
68 |
top: yb |
|
|
69 |
}); |
|
120
|
70 |
|
|
|
71 |
} |
|
|
72 |
} |
|
|
73 |
|
|
|
74 |
function nextSlide() { |
|
|
75 |
currentSlide = (currentSlide + 1) % slides.length; |
|
|
76 |
showSlide(); |
|
|
77 |
return false; |
|
|
78 |
} |
|
|
79 |
|
|
|
80 |
function prevSlide() { |
|
|
81 |
currentSlide = (currentSlide > 0 ? currentSlide - 1 : slides.length - 1); |
|
|
82 |
showSlide(); |
|
|
83 |
return false; |
|
|
84 |
} |
|
|
85 |
|
|
|
86 |
var hideTO, isInArrow = false, jqArrows = $(".arrow-wrap"); |
|
|
87 |
function resetTO() { |
|
|
88 |
clearTimeout(hideTO); |
|
|
89 |
if (!isInArrow) { |
|
|
90 |
hideTO = setTimeout(function() { |
|
|
91 |
jqArrows.hide(); |
|
|
92 |
}, 1000); |
|
|
93 |
} |
|
|
94 |
} |
|
|
95 |
$("body").mousemove(function() { |
|
|
96 |
jqArrows.show(); |
|
|
97 |
resetTO(); |
|
|
98 |
return false; |
|
|
99 |
}); |
|
|
100 |
jqArrows.hover(function() { |
|
|
101 |
isInArrow = true; |
|
|
102 |
resetTO(); |
|
|
103 |
}, function() { |
|
|
104 |
isInArrow = false; |
|
|
105 |
resetTO(); |
|
|
106 |
}); |
|
|
107 |
|
|
|
108 |
$(".left-arrow").click(prevSlide); |
|
|
109 |
$(".right-arrow").click(nextSlide); |
|
|
110 |
|
|
|
111 |
slides.forEach(function(slide, k) { |
|
190
|
112 |
if (!slide.path) { |
|
|
113 |
slide.path = "M0 0L1 0L1 1L0 1Z" |
|
|
114 |
} |
|
120
|
115 |
slide.image = new Image(); |
|
|
116 |
slide.image.onload = function() { |
|
|
117 |
if (k === currentSlide) { |
|
|
118 |
showSlide(); |
|
|
119 |
} |
|
|
120 |
}; |
|
190
|
121 |
slide.image.src = imgurlbase + slide.src; |
|
120
|
122 |
}); |
|
|
123 |
|
|
|
124 |
showSlide(); |
|
|
125 |
|
|
|
126 |
jqwin.resize(showSlide); |
|
|
127 |
|
|
|
128 |
}); |