--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/04-slideshow.html Tue Jun 18 17:38:17 2013 +0200
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="description" content="eGonomy">
+ <title>eGonomy : Diaporama</title>
+
+ <link rel="stylesheet" href="css/reset.css">
+ <link rel="stylesheet" href="css/fonts.css">
+ <link rel="stylesheet" href="css/slideshow.css">
+ <script src="js/vendor/modernizr-2.6.2.min.js"></script>
+</head>
+<body>
+
+ <div class="slideshow-wrap">
+ <canvas class="imagezone"></canvas>
+ <div class="caption-wrap">
+ <div class="caption">
+ <h2></h2>
+ <h3></h3>
+ <p></p>
+ </div>
+ </div>
+ <div class="arrow-wrap left-arrow">
+ <a class="arrow" href="#"></a>
+ </div>
+ <div class="arrow-wrap right-arrow">
+ <a class="arrow" href="#"></a>
+ </div>
+ </div><!-- /.wrap -->
+
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
+ <script src="js/slideshow.js"></script>
+ <script>
+ var imgurlbase = "http://egonomy.iri-research.org/static/media/";
+ var slides = [
+ {
+ "title": "Chicago, Art Institute de la série : Vitraux",
+ "author": "Chagall Marc (1887-1985)",
+ "url": "images/36/00-015454.jpg",
+ "description": "En 1930, le marchand d'art et ami de Chagall, Ambroise Vollard, lui commande une série d'illustrations sur la Bible. Celui qui décrit le texte sacré comme « la plus grande source de poésie de tous les temps », exécute alors une quarantaine de gouaches, avant d'entamer une série d'eaux-fortes qui sont insérées au sein de la Bible de Genève : 105 gravures figurent diverses scènes-clés de l'Ancien Testament. À la main, Chagall les rehausse toutes d'un peu de gouache. Ses sujets de prédilection sont les prophètes, les patriarches, les guerriers et les rois. Surtout, il fait des liens entre le passé et le présent, entre la persécution de Jésus et celle que les Juifs subissent en Europe dans les années 1940."
+ }, {
+ "title": "La Création du monde, le septième jour",
+ "author": "Chagall Marc (1887-1985)",
+ "url": "images/3/08-523123.jpg",
+ "description": "En 1930, le marchand d'art et ami de Chagall, Ambroise Vollard, lui commande une série d'illustrations sur la Bible. Celui qui décrit le texte sacré comme « la plus grande source de poésie de tous les temps », exécute alors une quarantaine de gouaches, avant d'entamer une série d'eaux-fortes qui sont insérées au sein de la Bible de Genève : 105 gravures figurent diverses scènes-clés de l'Ancien Testament. À la main, Chagall les rehausse toutes d'un peu de gouache. Ses sujets de prédilection sont les prophètes, les patriarches, les guerriers et les rois. Surtout, il fait des liens entre le passé et le présent, entre la persécution de Jésus et celle que les Juifs subissent en Europe dans les années 1940."
+ }, {
+ "title": "La création de l'homme",
+ "author": "Chagall Marc (1887-1985)",
+ "url": "images/3/09-584017.jpg",
+ "description": "En 1930, le marchand d'art et ami de Chagall, Ambroise Vollard, lui commande une série d'illustrations sur la Bible. Celui qui décrit le texte sacré comme « la plus grande source de poésie de tous les temps », exécute alors une quarantaine de gouaches, avant d'entamer une série d'eaux-fortes qui sont insérées au sein de la Bible de Genève : 105 gravures figurent diverses scènes-clés de l'Ancien Testament. À la main, Chagall les rehausse toutes d'un peu de gouache. Ses sujets de prédilection sont les prophètes, les patriarches, les guerriers et les rois. Surtout, il fait des liens entre le passé et le présent, entre la persécution de Jésus et celle que les Juifs subissent en Europe dans les années 1940."
+ }, {
+ "title": "Le Cantique des Cantiques II",
+ "author": "Chagall Marc (1887-1985)",
+ "url": "images/57/10-500374.jpg",
+ "description": "En 1930, le marchand d'art et ami de Chagall, Ambroise Vollard, lui commande une série d'illustrations sur la Bible. Celui qui décrit le texte sacré comme « la plus grande source de poésie de tous les temps », exécute alors une quarantaine de gouaches, avant d'entamer une série d'eaux-fortes qui sont insérées au sein de la Bible de Genève : 105 gravures figurent diverses scènes-clés de l'Ancien Testament. À la main, Chagall les rehausse toutes d'un peu de gouache. Ses sujets de prédilection sont les prophètes, les patriarches, les guerriers et les rois. Surtout, il fait des liens entre le passé et le présent, entre la persécution de Jésus et celle que les Juifs subissent en Europe dans les années 1940."
+ }
+ ];
+
+ </script>
+</body>
+</html>
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/css/slideshow.css Tue Jun 18 17:38:17 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
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/js/slideshow.js Tue Jun 18 17:38:17 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