1 $(function() { |
1 $(function() { |
2 |
2 |
3 var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"), |
3 var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"), |
4 margin = 50, jqmainimg = $(".main-image"), jqbackdrop = $(".backdrop"), |
4 margin = 50, |
|
5 jqimgcontainer = $(".image-container"), |
|
6 jqmainimg = $(".main-image"), |
|
7 jqbackdrop = $(".backdrop"), |
|
8 jqpath = $(".clip-path"), |
5 lastSlide = null; |
9 lastSlide = null; |
6 |
10 |
7 function showSlide() { |
11 function showSlide() { |
8 var slide = slides[currentSlide]; |
12 var slide = slides[currentSlide]; |
9 |
13 |
10 if (slide !== lastSlide) { |
14 if (slide !== lastSlide) { |
11 jqcaption.find("h2").text(slide.title); |
15 jqcaption.find("h2").text(slide.title); |
12 jqcaption.find("h3").text(slide.author); |
16 jqcaption.find("h3").text(slide.author); |
13 jqcaption.find("p").text(slide.description); |
17 var captiondiv = jqcaption.find(".caption-description"); |
14 jqmainimg.attr("src", slide.image.src); |
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); |
15 jqbackdrop.attr("src", slide.image.src); |
23 jqbackdrop.attr("src", slide.image.src); |
|
24 jqpath.attr("d", slide.path); |
16 } |
25 } |
17 |
26 |
18 lastSlide = slide; |
27 lastSlide = slide; |
19 |
28 |
20 if (slide.image && slide.image.width) { |
29 if (slide.image && slide.image.width) { |
21 var ww = jqwin.width(), |
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(), |
22 wh = jqwin.height(), |
42 wh = jqwin.height(), |
23 cw = jqcaption.outerWidth(), |
43 cw = jqcaption.outerWidth(), |
24 ch = jqcaption.outerHeight(), |
44 ch = jqcaption.outerHeight(), |
25 wi = slide.image.width, |
45 wi = slide.image.width, |
26 hi = slide.image.height, |
46 hi = slide.image.height, |
|
47 wp = wi * (maxpx - minpx), |
|
48 hp = hi * (maxpy - minpy), |
27 w1 = ww - 2 * margin, w2 = w1 - cw |
49 w1 = ww - 2 * margin, w2 = w1 - cw |
28 h1 = wh - 2 * margin, h2 = h1 - ch, |
50 h1 = wh - 2 * margin, h2 = h1 - ch, |
29 ra = Math.max( |
51 ra = Math.max( |
30 Math.min((h1 / hi), (w2 / wi)), |
52 Math.min((h1 / hp), (w2 / wp)), |
31 Math.min((h2 / hi), (w1 / wi)) |
53 Math.min((h2 / hp), (w1 / wp)) |
32 ), |
54 ), |
33 wa = wi * ra, ha = hi * ra, |
55 wa = wp * ra, ha = hp * ra, |
34 rb = Math.max(ww / wi, wh / hi), |
56 rb = Math.max(ww / wi, wh / hi), |
35 wb = wi * rb, hb = hi * rb, |
57 wb = wi * rb, hb = hi * rb, |
36 xb = (ww - wb) / 2, yb = (wh - hb) / 2; |
58 xb = (ww - wb) / 2, yb = (wh - hb) / 2; |
37 jqmainimg.css({ |
59 jqimgcontainer.css({ |
38 width: wa, |
60 width: wa, |
39 height: ha |
61 height: ha |
40 }); |
62 }); |
|
63 jqimgcontainer[0].setAttribute("viewBox", [minpx,minpy,(maxpx-minpx),(maxpy-minpy)].join(" ")); |
41 jqbackdrop.css({ |
64 jqbackdrop.css({ |
42 width: wb, |
65 width: wb, |
43 height: hb, |
66 height: hb, |
44 left: xb, |
67 left: xb, |
45 top: yb |
68 top: yb |