# HG changeset patch
# User veltr
# Date 1371567866 -7200
# Node ID b1e22c229870aaf08aa30e5ddd4716d586094622
# Parent 9d2a4916ee7aeca86c3f7a876a87598d4783aa04
Added slideshow
diff -r 9d2a4916ee7a -r b1e22c229870 integration/v2/04-slideshow.html
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/04-slideshow.html Tue Jun 18 17:04:26 2013 +0200
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+
+
+
+ eGonomy : Diaporama
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff -r 9d2a4916ee7a -r b1e22c229870 integration/v2/css/slideshow.css
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/css/slideshow.css Tue Jun 18 17:04:26 2013 +0200
@@ -0,0 +1,59 @@
+.slideshow-wrap, .imagezone {
+ position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+}
+
+.caption-wrap {
+ position: absolute; left: 50px; right: 50px; bottom: 50px;
+}
+
+.caption {
+ font-family: "Lato"; width: 480px; max-width: 100%;
+ background: #ffffff;
+ padding: 16px 0; margin: 0;
+}
+
+.caption h2 {
+ font-size: 18px; font-weight: bold; margin: 0; padding: 0 20px 5px;
+}
+
+.caption h3 {
+ font-size: 18px; font-style: italic; margin: 0; border-bottom: 1px solid #cccccc; padding: 0 20px 5px;
+}
+
+.caption p {
+ margin: 10px 20px 0; padding: 0; font-size: 16px; font-style: italic;
+}
+
+.arrow-wrap {
+ box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75); width: 78px; height: 78px;
+ position: absolute; top: 50%; margin-top: -39px;
+ background: #fff; cursor: pointer; border-radius: 39px; display: none;
+}
+
+.left-arrow {
+ left: 20px;
+}
+
+.right-arrow {
+ right: 20px;
+}
+
+.arrow-wrap:hover {
+ background: #e0e0e0;
+}
+
+.arrow-wrap:active {
+ background: #666666;
+}
+
+.arrow {
+ width: 78px; height: 78px; display: block; background: url(../img/home-arrow.png) center 30px no-repeat;
+}
+
+.left-arrow .arrow {
+ transform: rotate(90deg); -webkit-transform: rotate(90deg);
+}
+
+.right-arrow .arrow {
+ transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
+}
\ No newline at end of file
diff -r 9d2a4916ee7a -r b1e22c229870 integration/v2/js/slideshow.js
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/js/slideshow.js Tue Jun 18 17:04:26 2013 +0200
@@ -0,0 +1,102 @@
+$(function() {
+
+ var currentSlide = 0, jqwin = $(window), jqcanvas = $(".imagezone"), jqcaption = $(".caption"), margin = 50;
+
+ 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.image && slide.image.width) {
+ var ww = jqwin.width(),
+ wh = jqwin.height(),
+ cw = jqcaption.outerWidth(),
+ ch = jqcaption.outerHeight(),
+ wi = slide.image.width,
+ hi = slide.image.height,
+ w1 = ww - 2 * margin, w2 = w1 - cw
+ h1 = wh - 2 * margin, h2 = h1 - ch,
+ ra = Math.max(
+ Math.min((h1 / hi), (w2 / wi)),
+ 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
+ });
+
+ 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);
+
+ }
+ }
+
+ function nextSlide() {
+ currentSlide = (currentSlide + 1) % slides.length;
+ showSlide();
+ return false;
+ }
+
+ function prevSlide() {
+ currentSlide = (currentSlide > 0 ? currentSlide - 1 : slides.length - 1);
+ showSlide();
+ return false;
+ }
+
+ var hideTO, isInArrow = false, jqArrows = $(".arrow-wrap");
+ function resetTO() {
+ clearTimeout(hideTO);
+ if (!isInArrow) {
+ hideTO = setTimeout(function() {
+ jqArrows.hide();
+ }, 1000);
+ }
+ }
+ $("body").mousemove(function() {
+ jqArrows.show();
+ resetTO();
+ return false;
+ });
+ jqArrows.hover(function() {
+ isInArrow = true;
+ resetTO();
+ }, function() {
+ isInArrow = false;
+ resetTO();
+ });
+
+ $(".left-arrow").click(prevSlide);
+ $(".right-arrow").click(nextSlide);
+
+ slides.forEach(function(slide, k) {
+ slide.image = new Image();
+ slide.image.onload = function() {
+ if (k === currentSlide) {
+ showSlide();
+ }
+ };
+ slide.image.src = imgurlbase + slide.url;
+ });
+
+ showSlide();
+
+ jqwin.resize(showSlide);
+
+});
\ No newline at end of file