--- a/integration/v2/04-slideshow.html Fri Jun 21 17:29:12 2013 +0200
+++ b/integration/v2/04-slideshow.html Fri Jun 21 17:31:18 2013 +0200
@@ -17,7 +17,8 @@
<body>
<div class="slideshow-wrap">
- <canvas class="imagezone"></canvas>
+ <img class="backdrop" />
+ <img class="main-image" />
<div class="caption-wrap">
<div class="caption">
<h2></h2>
--- a/integration/v2/09-10-11-12-resultat_recherche.html Fri Jun 21 17:29:12 2013 +0200
+++ b/integration/v2/09-10-11-12-resultat_recherche.html Fri Jun 21 17:31:18 2013 +0200
@@ -96,8 +96,9 @@
<li>
<label class="styled-select">
<select>
- <option selected value="">Afficher tous les résultats</option>
- <option value="">Classer par pertinence</option>
+ <option selected value="">Classer par pertinence</option>
+ <option value="">Classer par ordre alphabétique</option>
+ <option value="">Classer par popularité</option>
</select>
</label>
</li>
@@ -105,7 +106,8 @@
<label class="styled-select">
<select>
<option selected value="">Afficher tous les résultats</option>
- <option value="">Classer par pertinence</option>
+ <option value="">Afficher les images uniquement</option>
+ <option value="">Afficher les fragments uniquement</option>
</select>
</label>
</li>
@@ -117,23 +119,6 @@
</div>
<ul class="list-projets-4 clearfix masonry-225">
<li class="item-masonry">
- <ul class="filters">
- <li class="box-shadow-2"><a href="#">
- Paris, musée Victor Hugo <a title="close" class="icon-action cross" href="#"></a>
- </a></li>
- <li class="box-shadow-2"><a href="#">
- Bonjour hello world lorem ipsum dolor <a title="circle" class="icon-action circle" href="#"></a>
- </a></li>
- <li class="box-shadow-2 disabled"><a href="#">
- Paris, musée Victor Hugo <a title="close" class="icon-action cross" href="#"></a>
- </a></li>
- <li class="box-shadow-2 disabled"><a href="#">
- Paris, musée Victor Hugo <a title="circle" class="icon-action circle" href="#"></a>
- </a></li>
-
- </ul>
- </li>
- <li class="item-masonry">
<div class="fragment">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0.3548 0.232193846154 0.357 0.276812307692" height="100%" width="100%" preserveAspectRatio="none">
<defs>
--- a/integration/v2/css/slideshow.css Fri Jun 21 17:29:12 2013 +0200
+++ b/integration/v2/css/slideshow.css Fri Jun 21 17:31:18 2013 +0200
@@ -1,7 +1,19 @@
-.slideshow-wrap, .imagezone {
+body {
+ overflow: hidden;
+}
+
+.slideshow-wrap {
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
}
+.backdrop {
+ position: absolute; opacity: .3; -webkit-filter: blur(5px); filter: blur(5px);
+}
+
+.main-image {
+ position: absolute; top: 50px; right: 50px;
+}
+
.caption-wrap {
position: absolute; left: 50px; right: 50px; bottom: 50px;
}
@@ -12,6 +24,10 @@
padding: 16px 0; margin: 0;
}
+.main-image, .caption {
+ box-shadow: 4px 4px 2px rgba(0,0,0,.5);
+}
+
.caption h2 {
font-size: 18px; font-weight: bold; margin: 0; padding: 0 20px 5px;
}
--- a/integration/v2/js/slideshow.js Fri Jun 21 17:29:12 2013 +0200
+++ b/integration/v2/js/slideshow.js Fri Jun 21 17:31:18 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
+ });
}
}