integration/v2/js/slideshow.js
changeset 134 9caa840b2d92
parent 120 b1e22c229870
child 190 ebb8b58fc2b8
--- 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
+            });
             
         }
     }