+ +

diff -r d7aecea73e6d -r 9caa840b2d92 integration/v2/css/slideshow.css --- a/integration/v2/css/slideshow.css Fri Jun 21 15:06:51 2013 +0200 +++ b/integration/v2/css/slideshow.css Tue Jun 18 18:22:28 2013 +0200 @@ -1,7 +1,19 @@ -.slideshow-wrap, .imagezone { +body { + overflow: hidden; +} + +.slideshow-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } +.backdrop { + position: absolute; opacity: .3; -webkit-filter: blur(5px); filter: blur(5px); +} + +.main-image { + position: absolute; top: 50px; right: 50px; +} + .caption-wrap { position: absolute; left: 50px; right: 50px; bottom: 50px; } @@ -12,6 +24,10 @@ padding: 16px 0; margin: 0; } +.main-image, .caption { + box-shadow: 4px 4px 2px rgba(0,0,0,.5); +} + .caption h2 { font-size: 18px; font-weight: bold; margin: 0; padding: 0 20px 5px; } diff -r d7aecea73e6d -r 9caa840b2d92 integration/v2/js/slideshow.js --- a/integration/v2/js/slideshow.js Fri Jun 21 15:06:51 2013 +0200 +++ b/integration/v2/js/slideshow.js Tue Jun 18 18:22:28 2013 +0200 @@ -1,13 +1,21 @@ $(function() { - var currentSlide = 0, jqwin = $(window), jqcanvas = $(".imagezone"), jqcaption = $(".caption"), margin = 50; + var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"), + margin = 50, jqmainimg = $(".main-image"), jqbackdrop = $(".backdrop"), + lastSlide = null; function showSlide() { var slide = slides[currentSlide]; - jqcaption.find("h2").text(slide.title); - jqcaption.find("h3").text(slide.author); - jqcaption.find("p").text(slide.description); + if (slide !== lastSlide) { + jqcaption.find("h2").text(slide.title); + jqcaption.find("h3").text(slide.author); + jqcaption.find("p").text(slide.description); + jqmainimg.attr("src", slide.image.src); + jqbackdrop.attr("src", slide.image.src); + } + + lastSlide = slide; if (slide.image && slide.image.width) { var ww = jqwin.width(), @@ -23,27 +31,19 @@ Math.min((h2 / hi), (w1 / wi)) ), wa = wi * ra, ha = hi * ra, - xa = ww - margin - wa, rb = Math.max(ww / wi, wh / hi), wb = wi * rb, hb = hi * rb, xb = (ww - wb) / 2, yb = (wh - hb) / 2; - jqcanvas.attr({ - width: ww, - height: wh + jqmainimg.css({ + width: wa, + height: ha }); - - var ctx = jqcanvas[0].getContext('2d'); - - ctx.drawImage(slide.image, xb, yb, wb, hb); - - ctx.fillStyle = 'rgba(255,255,255,.65)'; - ctx.fillRect(0,0,ww,wh); - - ctx.fillStyle = 'rgba(0,0,0,.3)'; - ctx.fillRect(margin + 4, wh - margin - ch + 4, cw, ch); - ctx.fillRect(xa + 4, margin + 4, wa, ha); - - ctx.drawImage(slide.image, xa, margin, wa, ha); + jqbackdrop.css({ + width: wb, + height: hb, + left: xb, + top: yb + }); } }