update
authorAnthony Ly <anthonyly.com@gmail.com>
Fri, 21 Jun 2013 14:52:50 +0200
changeset 132 2f15d59e65ef
parent 131 f7f6c6acf9b9
child 133 d7aecea73e6d
update
integration/v2/03-collection_non_connecte.html
integration/v2/08-nouvelle_collection.html
integration/v2/09-10-11-12-resultat_recherche.html
integration/v2/09-10-11-resultat_recherche.html
integration/v2/15-16-detail_fragment.html
integration/v2/15-detail_fragment.html
integration/v2/18-collection_vue_mosaique.html
integration/v2/css/style.css
integration/v2/img/177x224.png
integration/v2/img/icon-cross-10.png
integration/v2/img/icon-search-big.png
integration/v2/js/main.js
--- a/integration/v2/03-collection_non_connecte.html	Thu Jun 20 16:21:35 2013 +0200
+++ b/integration/v2/03-collection_non_connecte.html	Fri Jun 21 14:52:50 2013 +0200
@@ -73,8 +73,8 @@
                 </ul>
             </div>
 
-            <ul class="list-projets-3 clearfix">
-                <li class="clearfix horizontal item">
+            <ul class="list-projets-3 clearfix masonry-465">
+                <li class="clearfix horizontal item-masonry">
                     <div class="col-left">
                         <img src="img/225x297.png" alt="">
                         <div class="tools toggle">
@@ -97,7 +97,7 @@
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident </p>
                     </div>
                 </li>
-                <li class="item">
+                <li class="item-masonry">
                     <div class="col-left">
                         <img src="img/469x295.png" alt="">
                         <div class="tools toggle">
@@ -120,7 +120,7 @@
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident </p>
                     </div>
                 </li>
-                <li class="clearfix horizontal item">
+                <li class="clearfix horizontal item-masonry">
                     <div class="col-left">
                         <img src="img/225x297.png" alt="">
                         <div class="tools toggle">
@@ -147,7 +147,7 @@
                         Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut optio consectetur provident </p>
                     </div>
                 </li>
-                <li class="item">
+                <li class="item-masonry">
                     <div class="col-left">
                         <img src="img/469x295.png" alt="">
                         <div class="tools toggle">
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/08-nouvelle_collection.html	Fri Jun 21 14:52:50 2013 +0200
@@ -0,0 +1,101 @@
+<!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 : Collectionner (non connecté)</title>
+    
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/fonts.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
+</head>
+<body>
+
+    <div class="wrap">
+        <header class="clearfix">
+            <h1><a href="#">egonomy</a></h1>
+            <div class="col-right">
+                <ul class="head-login clearfix">
+                    <li>
+                        <form method="GET" action="/egonomy/allpictures/">
+                            <p>
+                                <input id="id_search" type="text" placeholder="Rechercher dans le site">
+                                <select class="search-type">
+                                    <option selected="" value="/egonomy/allpictures/">Images</option>
+                                    <option value="/egonomy/allfragments/">Fragments</option>
+                                </select>
+                            </p>
+                            <input type="hidden" name="field" value="all">
+                        </form>
+                    </li>
+                    <li class="hello-user">Bonjour Anthony Ly</li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a class="login" href="#">Déconnexion</a></li>
+                </ul>
+                <nav>
+                    <ul class="nav clearfix">
+                        <li><a href="#" title="home"><img src="img/icon-home.png" alt="home"></a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">explorer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">collectionner</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">créer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">mon profil</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <section>
+            <div class="title-page">
+                <h2>ROMANTISME NOIR</span></h2>
+                <ul class="sub-nav title-menu clearfix">
+                    <li><a href="#" class="active">argumentaire</a></li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a href="#">mosaïque</a></li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a href="#">géographique</a></li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a href="#">envoyer vers collage</a></li>
+                </ul>
+            </div>
+            <div class="bar-tools clearfix">
+                <ul class="clearfix">
+                    <li><a href="#">lire le diaporama</a></li>
+                    <li><a class="icon save" href="#">enregistrer sous</a></li>
+                    <li><a href="#">Paramètres de la collection</a></li>
+                </ul>
+            </div>
+            <div class="empty-block">
+                <form class="search-form-big" method="GET" action="/egonomy/allpictures/">
+                    <p>
+                        <input id="id_search" type="text" placeholder="Rechercher dans le site">
+                        <select class="search-type">
+                            <option selected="" value="/egonomy/allpictures/">Images</option>
+                            <option value="/egonomy/allfragments/">Fragments</option>
+                        </select>
+                    </p>
+                    <input type="hidden" name="field" value="all">
+                </form>
+            </div>
+        </section>
+        <footer class="clearfix">
+            <h6>EGONOMY est un projet de l’IRI et de la réunion des Musées Nationaux</h6>
+            <p>Mai 2013</p>
+        </footer>
+    </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="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
+    <script src="js/masonry.min.js"></script>
+    <script src="lib/tag-it/js/tag-it.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/09-10-11-12-resultat_recherche.html	Fri Jun 21 14:52:50 2013 +0200
@@ -0,0 +1,283 @@
+<!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 : Collectionner (non connecté)</title>
+    
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/fonts.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
+</head>
+<body>
+    <div class="popin-wrap">
+        <div id="add-to-collection" class="popin popin-new-collection box-shadow">
+            <header>
+                <h2>Ajouter à la collection</h2>
+                <a href="#" class="close-popin"></a>
+            </header>
+            <section>
+                <form action="#">
+                    <p>
+                        <label for="collection-name">Ajouter à :</label>
+                        <select>
+                            <option selected value="">Ma super collection</option>
+                            <option value="">encore un lorem ipsum</option>
+                        </select>
+                    </p>
+                    <p>
+                        <label class="block" for="image-description">Description de l’image :</label>
+                        <textarea name="" id="image-description"></textarea>
+                    </p>
+                    <div class="buttons">
+                        <a href="#" class="btn close-popin">Annuler</a>
+                        <input class="btn" type="submit" value="Valider">
+                    </div>
+                </form>
+            </section>
+        </div>
+    </div>
+    
+    <div class="wrap">
+        <header class="clearfix">
+            <h1><a href="#">egonomy</a></h1>
+            <div class="col-right">
+                <ul class="head-login clearfix">
+                    <li>
+                        <form method="GET" action="/egonomy/allpictures/">
+                            <p>
+                                <input id="id_search" type="text" placeholder="Rechercher dans le site">
+                                <select class="search-type">
+                                    <option selected="" value="/egonomy/allpictures/">Images</option>
+                                    <option value="/egonomy/allfragments/">Fragments</option>
+                                </select>
+                            </p>
+                            <input type="hidden" name="field" value="all">
+                        </form>
+                    </li>
+                    <li class="hello-user">Bonjour Anthony Ly</li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a class="login" href="#">Déconnexion</a></li>
+                </ul>
+                <nav>
+                    <ul class="nav clearfix">
+                        <li><a href="#" title="home"><img src="img/icon-home.png" alt="home"></a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">explorer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">collectionner</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">créer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">mon profil</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <section>
+            <div class="title-page">
+                <h2>RÉSULTATS DE LA RECHERCHE</span></h2>
+            </div>
+            <div class="bar-tools clearfix">
+                <ul class="clearfix left">
+                    <li><a class="go-to mosaic" href="#"></a></li>
+                </ul>
+                <form action="#">
+                    <ul class="clearfix">
+                        <li>
+                            <select>
+                                <option selected value="">Afficher tous les résultats</option>
+                                <option value="">Classer par pertinence</option>
+                            </select>
+                        </li>
+                        <li>
+                            <select>
+                                <option selected value="">Afficher tous les résultats</option>
+                                <option value="">Classer par pertinence</option>
+                            </select>
+                        </li>
+                        <li>
+                            <input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
+                        </li>
+                    </ul>
+                </form>
+            </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>
+                                <clipPath id="fragment-clip68">
+                                    <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
+                                </clipPath>
+                            </defs>
+                            <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                            <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                        </svg>      
+                    </div><!-- ./fragment -->
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>extrait de Portrait de Christine Boyer, première épouse de Lucien Bonaparte Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum deserunt autem exercitationem eius eum quo veritatis officia tenetur tempora eligendi laborum corporis animi aliquam. Dolore distinctio nostrum nulla perspiciatis sapiente.</p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x297.png" alt="">
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>extrait de Portrait de Christine Boyer, première épouse de Lucien Bonaparte </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x225.png" alt="">
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>... </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x225.png" alt="">
+                    <div class="content">
+                        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eveniet cumque fugit aut animi illo impedit sapiente ratione a perferendis ducimus mollitia deleniti quasi sequi iusto tenetur dignissimos quibusdam numquam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae totam numquam accusamus reprehenderit ipsum at voluptatum minima eveniet incidunt ab. Tempore praesentium eligendi nostrum eveniet saepe quam adipisci aperiam. Ducimus. </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </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>
+                                <clipPath id="fragment-clip68">
+                                    <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
+                                </clipPath>
+                            </defs>
+                            <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                            <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                        </svg>      
+                    </div><!-- ./fragment -->
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>extrait de Portrait de Christine Boyer, première épouse de Lucien Bonaparte Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum deserunt autem exercitationem eius eum quo veritatis officia tenetur tempora eligendi laborum corporis animi aliquam. Dolore distinctio nostrum nulla perspiciatis sapiente.</p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x297.png" alt="">
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>extrait de Portrait de Christine Boyer, première épouse de Lucien Bonaparte </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x225.png" alt="">
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>... </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x225.png" alt="">
+                    <div class="content">
+                        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eveniet cumque fugit aut animi illo impedit sapiente ratione a perferendis ducimus mollitia deleniti quasi sequi iusto tenetur dignissimos quibusdam numquam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae totam numquam accusamus reprehenderit ipsum at voluptatum minima eveniet incidunt ab. Tempore praesentium eligendi nostrum eveniet saepe quam adipisci aperiam. Ducimus. </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </section>
+        <footer class="clearfix">
+            <h6>EGONOMY est un projet de l’IRI et de la réunion des Musées Nationaux</h6>
+            <p>Mai 2013</p>
+        </footer>
+    </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="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
+    <script src="js/masonry.min.js"></script>
+    <script src="lib/tag-it/js/tag-it.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/09-10-11-resultat_recherche.html	Fri Jun 21 14:52:50 2013 +0200
@@ -0,0 +1,283 @@
+<!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 : Collectionner (non connecté)</title>
+    
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/fonts.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
+</head>
+<body>
+    <div class="popin-wrap">
+        <div id="add-to-collection" class="popin popin-new-collection box-shadow">
+            <header>
+                <h2>Ajouter à la collection</h2>
+                <a href="#" class="close-popin"></a>
+            </header>
+            <section>
+                <form action="#">
+                    <p>
+                        <label for="collection-name">Ajouter à :</label>
+                        <select>
+                            <option selected value="">Ma super collection</option>
+                            <option value="">encore un lorem ipsum</option>
+                        </select>
+                    </p>
+                    <p>
+                        <label class="block" for="image-description">Description de l’image :</label>
+                        <textarea name="" id="image-description"></textarea>
+                    </p>
+                    <div class="buttons">
+                        <a href="#" class="btn close-popin">Annuler</a>
+                        <input class="btn" type="submit" value="Valider">
+                    </div>
+                </form>
+            </section>
+        </div>
+    </div>
+    
+    <div class="wrap">
+        <header class="clearfix">
+            <h1><a href="#">egonomy</a></h1>
+            <div class="col-right">
+                <ul class="head-login clearfix">
+                    <li>
+                        <form method="GET" action="/egonomy/allpictures/">
+                            <p>
+                                <input id="id_search" type="text" placeholder="Rechercher dans le site">
+                                <select class="search-type">
+                                    <option selected="" value="/egonomy/allpictures/">Images</option>
+                                    <option value="/egonomy/allfragments/">Fragments</option>
+                                </select>
+                            </p>
+                            <input type="hidden" name="field" value="all">
+                        </form>
+                    </li>
+                    <li class="hello-user">Bonjour Anthony Ly</li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a class="login" href="#">Déconnexion</a></li>
+                </ul>
+                <nav>
+                    <ul class="nav clearfix">
+                        <li><a href="#" title="home"><img src="img/icon-home.png" alt="home"></a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">explorer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">collectionner</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">créer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">mon profil</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <section>
+            <div class="title-page">
+                <h2>RÉSULTATS DE LA RECHERCHE</span></h2>
+            </div>
+            <div class="bar-tools clearfix">
+                <ul class="clearfix left">
+                    <li><a class="go-to mosaic" href="#"></a></li>
+                </ul>
+                <form action="#">
+                    <ul class="clearfix">
+                        <li>
+                            <select>
+                                <option selected value="">Afficher tous les résultats</option>
+                                <option value="">Classer par pertinence</option>
+                            </select>
+                        </li>
+                        <li>
+                            <select>
+                                <option selected value="">Afficher tous les résultats</option>
+                                <option value="">Classer par pertinence</option>
+                            </select>
+                        </li>
+                        <li>
+                            <input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
+                        </li>
+                    </ul>
+                </form>
+            </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>
+                                <clipPath id="fragment-clip68">
+                                    <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
+                                </clipPath>
+                            </defs>
+                            <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                            <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                        </svg>      
+                    </div><!-- ./fragment -->
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>extrait de Portrait de Christine Boyer, première épouse de Lucien Bonaparte Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum deserunt autem exercitationem eius eum quo veritatis officia tenetur tempora eligendi laborum corporis animi aliquam. Dolore distinctio nostrum nulla perspiciatis sapiente.</p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x297.png" alt="">
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>extrait de Portrait de Christine Boyer, première épouse de Lucien Bonaparte </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x225.png" alt="">
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>... </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x225.png" alt="">
+                    <div class="content">
+                        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eveniet cumque fugit aut animi illo impedit sapiente ratione a perferendis ducimus mollitia deleniti quasi sequi iusto tenetur dignissimos quibusdam numquam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae totam numquam accusamus reprehenderit ipsum at voluptatum minima eveniet incidunt ab. Tempore praesentium eligendi nostrum eveniet saepe quam adipisci aperiam. Ducimus. </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </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>
+                                <clipPath id="fragment-clip68">
+                                    <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
+                                </clipPath>
+                            </defs>
+                            <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                            <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                        </svg>      
+                    </div><!-- ./fragment -->
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>extrait de Portrait de Christine Boyer, première épouse de Lucien Bonaparte Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum deserunt autem exercitationem eius eum quo veritatis officia tenetur tempora eligendi laborum corporis animi aliquam. Dolore distinctio nostrum nulla perspiciatis sapiente.</p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x297.png" alt="">
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>extrait de Portrait de Christine Boyer, première épouse de Lucien Bonaparte </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x225.png" alt="">
+                    <div class="content">
+                        <h3>Colonne </h3>
+                        <p>... </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+                <li class="item-masonry">
+                    <img src="img/225x225.png" alt="">
+                    <div class="content">
+                        <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </h3>
+                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci eveniet cumque fugit aut animi illo impedit sapiente ratione a perferendis ducimus mollitia deleniti quasi sequi iusto tenetur dignissimos quibusdam numquam.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae totam numquam accusamus reprehenderit ipsum at voluptatum minima eveniet incidunt ab. Tempore praesentium eligendi nostrum eveniet saepe quam adipisci aperiam. Ducimus. </p>
+                    </div>
+                    <div class="tools-2">
+                        <ul class="clearfix">
+                            <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+                            <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+                            <li><a title="Ajouter à ma collection" class="tool plus open-popin" href="#add-to-collection" href="#"></a></li>
+                            <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+                        </ul>
+                    </div>
+                </li>
+            </ul>
+        </section>
+        <footer class="clearfix">
+            <h6>EGONOMY est un projet de l’IRI et de la réunion des Musées Nationaux</h6>
+            <p>Mai 2013</p>
+        </footer>
+    </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="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
+    <script src="js/masonry.min.js"></script>
+    <script src="lib/tag-it/js/tag-it.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/15-16-detail_fragment.html	Fri Jun 21 14:52:50 2013 +0200
@@ -0,0 +1,233 @@
+<!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 : Détail image</title>
+    
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/fonts.css">
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="css/slideshow.css">
+    <link rel="stylesheet" href="lib/jquery-ui/themes/base/minified/jquery-ui.min.css">
+    <link href="lib/tag-it/css/jquery.tagit.css" rel="stylesheet">
+    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
+</head>
+<body>
+    <div class="popin-wrap">
+        <div id="add-to-collection" class="popin popin-new-collection box-shadow">
+            <header>
+                <h2>Ajouter à la collection</h2>
+                <a href="#" class="close-popin"></a>
+            </header>
+            <section>
+                <form action="#">
+                    <p>
+                        <label for="collection-name">Ajouter à :</label>
+                        <select>
+                            <option selected value="">Ma super collection</option>
+                            <option value="">encore un lorem ipsum</option>
+                        </select>
+                    </p>
+                    <p>
+                        <label class="block" for="image-description">Description de l’image :</label>
+                        <textarea name="" id="image-description"></textarea>
+                    </p>
+                    <div class="buttons">
+                        <a href="#" class="btn close-popin">Annuler</a>
+                        <input class="btn" type="submit" value="Valider">
+                    </div>
+                </form>
+            </section>
+        </div>
+    </div>
+
+    <div class="wrap">
+        <header class="clearfix">
+            <h1><a href="#">egonomy</a></h1>
+            <div class="col-right">
+                <ul class="head-login clearfix">
+                    <li>
+                        <form method="GET" action="/egonomy/allpictures/">
+                            <p>
+                                <input id="id_search" type="text" placeholder="Rechercher dans le site">
+                                <select class="search-type">
+                                    <option selected="" value="/egonomy/allpictures/">Images</option>
+                                    <option value="/egonomy/allfragments/">Fragments</option>
+                                </select>
+                            </p>
+                            <input type="hidden" name="field" value="all">
+                        </form>
+                    </li>
+                    <li class="hello-user">Bonjour Anthony Ly</li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a class="login" href="#">Déconnexion</a></li>
+                </ul>
+                <nav>
+                    <ul class="nav clearfix">
+                        <li><a href="#" title="home"><img src="img/icon-home.png" alt="home"></a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">explorer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">collectionner</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">créer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">mon profil</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <section>
+            <div class="title-page">
+                <h2>VISAGE DE MEDÉE</h2>
+            </div>
+            <div class="bar-tools clearfix">
+                <ul class="clearfix left">
+                    <li><a class="go-to mosaic" href="#"></a></li>
+                    <li><a class="go-to search" href="#"></a></li>
+                </ul>
+                <ul class="clearfix">
+                    <li>
+                        <a class="icon edit" href="#">Modifier ce fragment</a>
+                    </li>
+                    <li>
+                        <a class="icon trash" href="#">Supprimer ce fragment</a>
+                    </li>
+                    <li>
+                        <a class="icon save" href="#">Enregistrer sous</a>
+                    </li>
+                    <li>
+                        <a class="icon plus open-popin" href="#add-to-collection">Ajouter à ma collection</a>
+                    </li>
+                    <li>
+                        <form action="#">
+                            <p>
+                                <input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
+                            </p>
+                        </form>
+                    </li>
+                </ul>
+            </div>
+            <article class="edition">
+                <div class="slideshow box-edition">
+                    <div class="image-wrap">
+                        <img src="img/378x600.png" alt="">
+                    </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>
+                    <ul class="share">
+                        <li><a title="Partager sur Twitter" href="#" class="tool twitter"></a></li>
+                        <li><a title="Partager sur Facebook" href="#" class="tool facebook"></a></li>
+                    </ul>
+                </div>
+                <div class="info box-edition">
+                    <table>
+                        <tbody>
+                            <tr>
+                                <th>Auteur :</th>
+                                <td>Delacroix Eugène (1798-1863)</td>
+                            </tr>
+                            <tr>
+                                <th>Période :</th>
+                                <td>Période contemporaine de 1789 à 1914,19e siècle,</td>
+                            </tr>
+                            <tr>
+                                <th>Description :</th>
+                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sapiente consectetur amet ipsam rem quae culpa voluptatem excepturi aperiam pariatur eaque explicabo. Voluptates natus nulla repellat dolorem animi ut voluptate.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="box-edition">
+                    <table>
+                        <tbody>
+                            <tr>
+                                <th class="va-top">Mots clés :</th>
+                                <td>
+                                    <ul class="list-key-search no-before list-keywords clearfix">
+                                        <li><a class="box-shadow-2" href="#">hello</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello word</a></li>
+                                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
+                                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello word</a></li>
+                                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
+                                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello</a></li>
+                                        <li><a class="box-shadow-2" href="#">hello word</a></li>
+                                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
+                                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
+                                    </ul>
+                                </td>
+                            </tr>
+                            
+                        </tbody>
+                    </table>
+        
+                    
+                </div>
+                <div class="box-edition">
+                    <h3>Fragments de cette image :</h3>
+                    <ul class="list-simple clearfix">
+                        <li>
+                            <a href="#">
+                                <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>
+                                            <clipPath id="fragment-clip68">
+                                                <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
+                                            </clipPath>
+                                        </defs>
+                                        <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                                        <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                                    </svg>      
+                                </div><!-- ./fragment -->
+                            </a>
+                        </li>
+                        <li>
+                            <a href="#">
+                                <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>
+                                            <clipPath id="fragment-clip68">
+                                                <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
+                                            </clipPath>
+                                        </defs>
+                                        <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                                        <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
+                                    </svg>      
+                                </div><!-- ./fragment -->
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <div class="box-edition">
+                    <h3>Collections liées à cette image :</h3>
+                    <p class="null">Pas de collection</p>
+                </div>
+            </article>
+            
+        </section>
+        <footer class="clearfix">
+            <h6>EGONOMY est un projet de l’IRI et de la réunion des Musées Nationaux</h6>
+            <p>Mai 2013</p>
+        </footer>
+    </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="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
+    <script src="js/masonry.min.js"></script>
+    <script src="lib/tag-it/js/tag-it.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
--- a/integration/v2/15-detail_fragment.html	Thu Jun 20 16:21:35 2013 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,233 +0,0 @@
-<!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 : Détail image</title>
-    
-    <link rel="stylesheet" href="css/reset.css">
-    <link rel="stylesheet" href="css/fonts.css">
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="stylesheet" href="css/slideshow.css">
-    <link rel="stylesheet" href="lib/jquery-ui/themes/base/minified/jquery-ui.min.css">
-    <link href="lib/tag-it/css/jquery.tagit.css" rel="stylesheet">
-    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
-</head>
-<body>
-    <div class="popin-wrap">
-        <div id="add-to-collection" class="popin popin-new-collection box-shadow">
-            <header>
-                <h2>Ajouter à la collection</h2>
-                <a href="#" class="close-popin"></a>
-            </header>
-            <section>
-                <form action="#">
-                    <p>
-                        <label for="collection-name">Ajouter à :</label>
-                        <select>
-                            <option selected value="">Ma super collection</option>
-                            <option value="">encore un lorem ipsum</option>
-                        </select>
-                    </p>
-                    <p>
-                        <label class="block" for="image-description">Description de l’image :</label>
-                        <textarea name="" id="image-description"></textarea>
-                    </p>
-                    <div class="buttons">
-                        <a href="#" class="btn close-popin">Annuler</a>
-                        <input class="btn" type="submit" value="Valider">
-                    </div>
-                </form>
-            </section>
-        </div>
-    </div>
-
-    <div class="wrap">
-        <header class="clearfix">
-            <h1><a href="#">egonomy</a></h1>
-            <div class="col-right">
-                <ul class="head-login clearfix">
-                    <li>
-                        <form method="GET" action="/egonomy/allpictures/">
-                            <p>
-                                <input id="id_search" type="text" placeholder="Rechercher dans le site">
-                                <select class="search-type">
-                                    <option selected="" value="/egonomy/allpictures/">Images</option>
-                                    <option value="/egonomy/allfragments/">Fragments</option>
-                                </select>
-                            </p>
-                            <input type="hidden" name="field" value="all">
-                        </form>
-                    </li>
-                    <li class="hello-user">Bonjour Anthony Ly</li>
-                    <li><span class="dot-6"></span></li>
-                    <li><a class="login" href="#">Déconnexion</a></li>
-                </ul>
-                <nav>
-                    <ul class="nav clearfix">
-                        <li><a href="#" title="home"><img src="img/icon-home.png" alt="home"></a></li>
-                        <li><span class="dot-10"></span></li>
-                        <li><a href="#">explorer</a></li>
-                        <li><span class="dot-10"></span></li>
-                        <li><a href="#">collectionner</a></li>
-                        <li><span class="dot-10"></span></li>
-                        <li><a href="#">créer</a></li>
-                        <li><span class="dot-10"></span></li>
-                        <li><a href="#">mon profil</a></li>
-                    </ul>
-                </nav>
-            </div>
-        </header>
-        <section>
-            <div class="title-page">
-                <h2>VISAGE DE MEDÉE</h2>
-            </div>
-            <div class="bar-tools clearfix">
-                <ul class="clearfix left">
-                    <li><a class="go-to mosaic" href="#"></a></li>
-                    <li><a class="go-to search" href="#"></a></li>
-                </ul>
-                <ul class="clearfix">
-                    <li>
-                        <a class="icon edit" href="#">Modifier ce fragment</a>
-                    </li>
-                    <li>
-                        <a class="icon trash" href="#">Supprimer ce fragment</a>
-                    </li>
-                    <li>
-                        <a class="icon save" href="#">Enregistrer sous</a>
-                    </li>
-                    <li>
-                        <a class="icon plus open-popin" href="#add-to-collection">Ajouter à ma collection</a>
-                    </li>
-                    <li>
-                        <form action="#">
-                            <p>
-                                <input class="search-form" id="id_search" type="text" placeholder="Romantisme noir">
-                            </p>
-                        </form>
-                    </li>
-                </ul>
-            </div>
-            <article class="edition">
-                <div class="slideshow box-edition">
-                    <div class="image-wrap">
-                        <img src="img/378x600.png" alt="">
-                    </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>
-                    <ul class="share">
-                        <li><a title="Partager sur Twitter" href="#" class="tool twitter"></a></li>
-                        <li><a title="Partager sur Facebook" href="#" class="tool facebook"></a></li>
-                    </ul>
-                </div>
-                <div class="info box-edition">
-                    <table>
-                        <tbody>
-                            <tr>
-                                <th>Auteur :</th>
-                                <td>Delacroix Eugène (1798-1863)</td>
-                            </tr>
-                            <tr>
-                                <th>Période :</th>
-                                <td>Période contemporaine de 1789 à 1914,19e siècle,</td>
-                            </tr>
-                            <tr>
-                                <th>Description :</th>
-                                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sapiente consectetur amet ipsam rem quae culpa voluptatem excepturi aperiam pariatur eaque explicabo. Voluptates natus nulla repellat dolorem animi ut voluptate.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-                <div class="box-edition">
-                    <table>
-                        <tbody>
-                            <tr>
-                                <th class="va-top">Mots clés :</th>
-                                <td>
-                                    <ul class="list-key-search no-before list-keywords clearfix">
-                                        <li><a class="box-shadow-2" href="#">hello</a></li>
-                                        <li><a class="box-shadow-2" href="#">hello word</a></li>
-                                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
-                                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
-                                        <li><a class="box-shadow-2" href="#">hello</a></li>
-                                        <li><a class="box-shadow-2" href="#">hello word</a></li>
-                                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
-                                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
-                                        <li><a class="box-shadow-2" href="#">hello</a></li>
-                                        <li><a class="box-shadow-2" href="#">hello word</a></li>
-                                        <li><a class="box-shadow-2" href="#">Delacroix</a></li>
-                                        <li><a class="box-shadow-2" href="#">Lorem ipsum dolor sit amet</a></li>
-                                    </ul>
-                                </td>
-                            </tr>
-                            
-                        </tbody>
-                    </table>
-        
-                    
-                </div>
-                <div class="box-edition">
-                    <h3>Fragments de cette image :</h3>
-                    <ul class="list-simple clearfix">
-                        <li>
-                            <a href="#">
-                                <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>
-                                            <clipPath id="fragment-clip68">
-                                                <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
-                                            </clipPath>
-                                        </defs>
-                                        <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
-                                        <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
-                                    </svg>      
-                                </div><!-- ./fragment -->
-                            </a>
-                        </li>
-                        <li>
-                            <a href="#">
-                                <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>
-                                            <clipPath id="fragment-clip68">
-                                                <path d="M0.3548 0.2603L0.4172 0.4461L0.7053 0.4809L0.7118 0.3532Z"/>
-                                            </clipPath>
-                                        </defs>
-                                        <image opacity=".3" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
-                                        <image clip-path="url(#fragment-clip68)" height="1" width="1" preserveAspectRatio="none" y="0" x="0" xlink:href="http://egonomy.iri-research.org/static/media/images/27/99-007715.jpg"/>
-                                    </svg>      
-                                </div><!-- ./fragment -->
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-                <div class="box-edition">
-                    <h3>Collections liées à cette image :</h3>
-                    <p class="null">Pas de collection</p>
-                </div>
-            </article>
-            
-        </section>
-        <footer class="clearfix">
-            <h6>EGONOMY est un projet de l’IRI et de la réunion des Musées Nationaux</h6>
-            <p>Mai 2013</p>
-        </footer>
-    </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="lib/jquery-ui/ui/minified/jquery-ui.min.js"></script>
-    <script src="js/masonry.min.js"></script>
-    <script src="lib/tag-it/js/tag-it.min.js"></script>
-    <script src="js/main.js"></script>
-</body>
-</html>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/18-collection_vue_mosaique.html	Fri Jun 21 14:52:50 2013 +0200
@@ -0,0 +1,94 @@
+<!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 : Collectionner (non connecté)</title>
+    
+    <link rel="stylesheet" href="css/reset.css">
+    <link rel="stylesheet" href="css/fonts.css">
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
+</head>
+<body>
+
+    <div class="wrap">
+        <header class="clearfix">
+            <h1><a href="#">egonomy</a></h1>
+            <div class="col-right">
+                <ul class="head-login clearfix">
+                    <li>
+                        <form method="GET" action="/egonomy/allpictures/">
+                            <p>
+                                <input id="id_search" type="text" placeholder="Rechercher dans le site">
+                                <select class="search-type">
+                                    <option selected="" value="/egonomy/allpictures/">Images</option>
+                                    <option value="/egonomy/allfragments/">Fragments</option>
+                                </select>
+                            </p>
+                            <input type="hidden" name="field" value="all">
+                        </form>
+                    </li>
+                    <li class="hello-user">Bonjour Anthony Ly</li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a class="login" href="#">Déconnexion</a></li>
+                </ul>
+                <nav>
+                    <ul class="nav clearfix">
+                        <li><a href="#" title="home"><img src="img/icon-home.png" alt="home"></a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">explorer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">collectionner</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">créer</a></li>
+                        <li><span class="dot-10"></span></li>
+                        <li><a href="#">mon profil</a></li>
+                    </ul>
+                </nav>
+            </div>
+        </header>
+        <section>
+            <div class="title-page">
+                <h2>Romantisme noir</span></h2>
+                <ul class="sub-nav title-menu clearfix">
+                    <li><a href="#" class="active">argumentaire</a></li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a href="#">mosaïque</a></li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a href="#">géographique</a></li>
+                    <li><span class="dot-6"></span></li>
+                    <li><a href="#">envoyer vers collage</a></li>
+                </ul>
+            </div>
+            <div class="bar-tools clearfix">
+                <ul class="clearfix">
+                    <li><a href="#">Afficher les commentaires</a></li>
+                    <li><a href="#">imprimer la vue en PDF</a></li>
+                    <li><a class="icon save" href="#">enregistrer sous</a></li>
+                    <li><a href="#">paramètres de la collection</a></li>
+                </ul>
+            </div>
+
+            <ul class="list-projets-5 clearfix masonry-465">
+                
+            </ul>
+
+            
+        </section>
+        <footer class="clearfix">
+            <h6>EGONOMY est un projet de l’IRI et de la réunion des Musées Nationaux</h6>
+            <p>Mai 2013</p>
+        </footer>
+    </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/masonry.min.js"></script>
+    <script src="js/main.js"></script>
+</body>
+</html>
--- a/integration/v2/css/style.css	Thu Jun 20 16:21:35 2013 +0200
+++ b/integration/v2/css/style.css	Fri Jun 21 14:52:50 2013 +0200
@@ -198,3 +198,18 @@
 .tagit{font-family: 'Lato' !important;}
 .ui-corner-all{-webkit-border-radius : 0 !important;-moz-border-radius : 0 !important;border-radius : 0 !important;}
 .list-simple li{float: left; margin: 0 10px 10px 0;}
+
+.empty-block{width: 100%; height: 360px; background-color: #eee; margin-bottom: 24px;}
+.search-form-big{ text-align: center; line-height: 360px;}
+.search-form-big input[type=text]{background: url(../img/icon-search-big.png) right 10px center no-repeat #FFF;font-family: 'Lato'; font-weight : bold; font-style : italic; font-size: 24px; border: 1px solid #D0D0D0; height: 52px; line-height: 52px; padding: 0 50px 0 10px;}
+.search-form-big select{height: 24px; vertical-align: middle;}
+
+.item-masonry{margin-bottom: 20px;}
+.filters{padding: 10px 0 20px; text-align: center;}
+.filters li{ margin-bottom: 10px; position: relative; text-align: left; font-size: 12px; font-family: 'Lato'; display:inline-block; width: 200px; height: 28px; line-height: 28px; background-color: #fff;}
+.filters a:first-child{ overflow: hidden; color: #7F7F7F; padding-left: 6px; display: block; }
+.filters li:hover{-webkit-box-shadow : none; -moz-box-shadow : none; box-shadow : none;}
+.filters .icon-action{position: absolute; top: 10px; right: 6px;width: 10px; height: 10px; display: inline-block;}
+.filters .cross{  background: url(../img/icon-cross-10.png) 0 0 no-repeat; }
+.filters .circle{width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; background-color: #7F7F7F;}
+.filters li.disabled a{opacity: 0.5;}
Binary file integration/v2/img/177x224.png has changed
Binary file integration/v2/img/icon-cross-10.png has changed
Binary file integration/v2/img/icon-search-big.png has changed
--- a/integration/v2/js/main.js	Thu Jun 20 16:21:35 2013 +0200
+++ b/integration/v2/js/main.js	Fri Jun 21 14:52:50 2013 +0200
@@ -1,11 +1,18 @@
 $(function(){
 //masonry
-	var container = $('.list-projets-3');
-	container.masonry({
+	var masonry465 = $('.masonry-465');
+	masonry465.masonry({
 	  columnWidth: 465,
-	  itemSelector: '.item',
+	  itemSelector: '.item-masonry',
 	  gutter : 20
 	});
+
+	var masonry225 = $('.masonry-225');
+	masonry225.masonry({
+	  columnWidth: 225,
+	  itemSelector: '.item-masonry',
+	  gutter : 16
+	});
 //popin
 	$('.open-popin').bind('click', function(e){
 		e.preventDefault();
@@ -27,14 +34,22 @@
 		e.stopPropagation();
 	});
 //tag it
-	var keywordsTagIt = $('.tag-it').tagit({
-		allowSpaces : true
-	});
-	$('.list-key-add a').bind('click', function(e){
-		e.preventDefault();
-		var tag = $(this).attr('data-tag');
-		keywordsTagIt.tagit("createTag", tag);
-	});
-	
+	if($('.tag-it').length){
+		var keywordsTagIt = $('.tag-it').tagit({
+			allowSpaces : true
+		});
+		$('.list-key-add a').bind('click', function(e){
+			e.preventDefault();
+			var tag = $(this).attr('data-tag');
+			keywordsTagIt.tagit("createTag", tag);
+		});
+	}
+//filters
+	$('.filters a').each(function(){
+		var text = $.trim($(this).text());
+		if(text.length > 30){
+			$(this).text(text.substr(0, 30) + '...')
+		}
+	})
 	
 });//ready