1 $(function() { |
1 $(function() { |
2 |
2 |
3 var currentSlide = 0, jqwin = $(window), jqcanvas = $(".imagezone"), jqcaption = $(".caption"), margin = 50; |
3 var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"), |
|
4 margin = 50, jqmainimg = $(".main-image"), jqbackdrop = $(".backdrop"), |
|
5 lastSlide = null; |
4 |
6 |
5 function showSlide() { |
7 function showSlide() { |
6 var slide = slides[currentSlide]; |
8 var slide = slides[currentSlide]; |
7 |
9 |
8 jqcaption.find("h2").text(slide.title); |
10 if (slide !== lastSlide) { |
9 jqcaption.find("h3").text(slide.author); |
11 jqcaption.find("h2").text(slide.title); |
10 jqcaption.find("p").text(slide.description); |
12 jqcaption.find("h3").text(slide.author); |
|
13 jqcaption.find("p").text(slide.description); |
|
14 jqmainimg.attr("src", slide.image.src); |
|
15 jqbackdrop.attr("src", slide.image.src); |
|
16 } |
|
17 |
|
18 lastSlide = slide; |
11 |
19 |
12 if (slide.image && slide.image.width) { |
20 if (slide.image && slide.image.width) { |
13 var ww = jqwin.width(), |
21 var ww = jqwin.width(), |
14 wh = jqwin.height(), |
22 wh = jqwin.height(), |
15 cw = jqcaption.outerWidth(), |
23 cw = jqcaption.outerWidth(), |
21 ra = Math.max( |
29 ra = Math.max( |
22 Math.min((h1 / hi), (w2 / wi)), |
30 Math.min((h1 / hi), (w2 / wi)), |
23 Math.min((h2 / hi), (w1 / wi)) |
31 Math.min((h2 / hi), (w1 / wi)) |
24 ), |
32 ), |
25 wa = wi * ra, ha = hi * ra, |
33 wa = wi * ra, ha = hi * ra, |
26 xa = ww - margin - wa, |
|
27 rb = Math.max(ww / wi, wh / hi), |
34 rb = Math.max(ww / wi, wh / hi), |
28 wb = wi * rb, hb = hi * rb, |
35 wb = wi * rb, hb = hi * rb, |
29 xb = (ww - wb) / 2, yb = (wh - hb) / 2; |
36 xb = (ww - wb) / 2, yb = (wh - hb) / 2; |
30 jqcanvas.attr({ |
37 jqmainimg.css({ |
31 width: ww, |
38 width: wa, |
32 height: wh |
39 height: ha |
33 }); |
40 }); |
34 |
41 jqbackdrop.css({ |
35 var ctx = jqcanvas[0].getContext('2d'); |
42 width: wb, |
36 |
43 height: hb, |
37 ctx.drawImage(slide.image, xb, yb, wb, hb); |
44 left: xb, |
38 |
45 top: yb |
39 ctx.fillStyle = 'rgba(255,255,255,.65)'; |
46 }); |
40 ctx.fillRect(0,0,ww,wh); |
|
41 |
|
42 ctx.fillStyle = 'rgba(0,0,0,.3)'; |
|
43 ctx.fillRect(margin + 4, wh - margin - ch + 4, cw, ch); |
|
44 ctx.fillRect(xa + 4, margin + 4, wa, ha); |
|
45 |
|
46 ctx.drawImage(slide.image, xa, margin, wa, ha); |
|
47 |
47 |
48 } |
48 } |
49 } |
49 } |
50 |
50 |
51 function nextSlide() { |
51 function nextSlide() { |