# HG changeset patch # User veltr # Date 1372351634 -7200 # Node ID ebb8b58fc2b860dcf0b31a7c44a6a45eeac0cc02 # Parent 037ff36ba217c0c6ccf23deee3e775d4e0bf3b69 Added fragment handling in slideshow diff -r 037ff36ba217 -r ebb8b58fc2b8 integration/v2/04-slideshow.html --- a/integration/v2/04-slideshow.html Thu Jun 27 17:42:07 2013 +0200 +++ b/integration/v2/04-slideshow.html Thu Jun 27 18:47:14 2013 +0200 @@ -18,14 +18,21 @@
-

-

+
+ + + + + + + +
@@ -41,24 +48,35 @@ var imgurlbase = "http://egonomy.iri-research.org/static/media/"; var slides = [ { + "type": "fragment", + "title": "Cavalier", + "author": "Oudry Jean Baptiste (1686-1755)", + "src": "images/6/03-005639.jpg", + "path": "M0.5252 0.4293L0.6764 0.4327L0.6827 0.4137L0.7058 0.4189L0.7058 0.3844L0.7331 0.3724L0.7857 0.3948L0.7773 0.4120L0.7647 0.4327L0.7857 0.45L0.7899 0.4775L0.7983 0.5189L0.7794 0.5431L0.7226 0.6034L0.7037 0.6051L0.6533 0.7137L0.6302 0.6965L0.6470 0.6068L0.6365 0.5431L0.6470 0.5086L0.6680 0.4655L0.6323 0.4741L0.5777 0.4758L0.5357 0.4517L0.5273 0.4413Z", + "description": "Extrait de Cerf aux abois dans les rochers de Franchard, forêt de Fontainebleau.\nLorem ipsum dolor" + }, { + "type": "image", "title": "Chicago, Art Institute de la série : Vitraux", "author": "Chagall Marc (1887-1985)", - "url": "images/36/00-015454.jpg", + "src": "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." }, { + "type": "image", "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." + "src": "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." }, { + "type": "image", "title": "La création de l'homme", "author": "Chagall Marc (1887-1985)", - "url": "images/3/09-584017.jpg", + "src": "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." }, { + "type": "image", "title": "Le Cantique des Cantiques II", "author": "Chagall Marc (1887-1985)", - "url": "images/57/10-500374.jpg", + "src": "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." } ]; diff -r 037ff36ba217 -r ebb8b58fc2b8 integration/v2/css/slideshow.css --- a/integration/v2/css/slideshow.css Thu Jun 27 17:42:07 2013 +0200 +++ b/integration/v2/css/slideshow.css Thu Jun 27 18:47:14 2013 +0200 @@ -10,7 +10,7 @@ position: absolute; opacity: .3; -webkit-filter: blur(5px); filter: blur(5px); } -.main-image { +.image-container { position: absolute; top: 50px; right: 50px; } @@ -24,7 +24,7 @@ padding: 16px 0; margin: 0; } -.main-image, .caption { +.caption { box-shadow: 4px 4px 2px rgba(0,0,0,.5); } diff -r 037ff36ba217 -r ebb8b58fc2b8 integration/v2/js/slideshow.js --- a/integration/v2/js/slideshow.js Thu Jun 27 17:42:07 2013 +0200 +++ b/integration/v2/js/slideshow.js Thu Jun 27 18:47:14 2013 +0200 @@ -1,7 +1,11 @@ $(function() { var currentSlide = 0, jqwin = $(window), jqcaption = $(".caption"), - margin = 50, jqmainimg = $(".main-image"), jqbackdrop = $(".backdrop"), + margin = 50, + jqimgcontainer = $(".image-container"), + jqmainimg = $(".main-image"), + jqbackdrop = $(".backdrop"), + jqpath = $(".clip-path"), lastSlide = null; function showSlide() { @@ -10,34 +14,53 @@ 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); + var captiondiv = jqcaption.find(".caption-description"); + captiondiv.empty(); + slide.description.split(/\s*[\r\n]\s*/gm).forEach(function(p) { + captiondiv.append($("

").text(p)); + }); + jqmainimg.attr("xlink:href", slide.image.src); jqbackdrop.attr("src", slide.image.src); + jqpath.attr("d", slide.path); } lastSlide = slide; if (slide.image && slide.image.width) { - var ww = jqwin.width(), + var pathcoords = slide.path.match(/[\d\.]+/g), + pathx = pathcoords.filter(function(p,i) { + return !(i%2); + }), + pathy = pathcoords.filter(function(p,i) { + return (i%2); + }), + minpx = Math.min.apply(Math,pathx), + maxpx = Math.max.apply(Math,pathx), + minpy = Math.min.apply(Math,pathy), + maxpy = Math.max.apply(Math,pathy), + ww = jqwin.width(), wh = jqwin.height(), cw = jqcaption.outerWidth(), ch = jqcaption.outerHeight(), wi = slide.image.width, - hi = slide.image.height, + hi = slide.image.height, + wp = wi * (maxpx - minpx), + hp = hi * (maxpy - minpy), 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)) + Math.min((h1 / hp), (w2 / wp)), + Math.min((h2 / hp), (w1 / wp)) ), - wa = wi * ra, ha = hi * ra, + wa = wp * ra, ha = hp * ra, rb = Math.max(ww / wi, wh / hi), wb = wi * rb, hb = hi * rb, xb = (ww - wb) / 2, yb = (wh - hb) / 2; - jqmainimg.css({ + jqimgcontainer.css({ width: wa, height: ha }); + jqimgcontainer[0].setAttribute("viewBox", [minpx,minpy,(maxpx-minpx),(maxpy-minpy)].join(" ")); jqbackdrop.css({ width: wb, height: hb, @@ -86,13 +109,16 @@ $(".right-arrow").click(nextSlide); slides.forEach(function(slide, k) { + if (!slide.path) { + slide.path = "M0 0L1 0L1 1L0 1Z" + } slide.image = new Image(); slide.image.onload = function() { if (k === currentSlide) { showSlide(); } }; - slide.image.src = imgurlbase + slide.url; + slide.image.src = imgurlbase + slide.src; }); showSlide();