--- a/integration/v2/04-slideshow.html Fri Jun 21 15:06:51 2013 +0200
+++ b/integration/v2/04-slideshow.html Tue Jun 18 18:22:28 2013 +0200
@@ -17,7 +17,8 @@
<body>
<div class="slideshow-wrap">
- <canvas class="imagezone"></canvas>
+ <img class="backdrop" />
+ <img class="main-image" />
<div class="caption-wrap">
<div class="caption">
<h2></h2>
--- 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;
}
--- 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
+ });
}
}