--- 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 @@
<div class="slideshow-wrap">
<img class="backdrop" />
- <img class="main-image" />
<div class="caption-wrap">
<div class="caption">
<h2></h2>
<h3></h3>
- <p></p>
+ <div class="caption-description"></div>
</div>
</div>
+ <svg class="image-container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1" preserveAspectRatio="none">
+ <defs>
+ <clipPath id="fragment-clip">
+ <path d="" class="clip-path" />
+ </clipPath>
+ </defs>
+ <image class="main-image" xlink:href="" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip)" />
+ </svg>
<div class="arrow-wrap left-arrow">
<a class="arrow" href="#"></a>
</div>
@@ -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."
}
];
--- 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);
}
--- 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($("<p>").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();