blabla

SRC/public/css/image-picker.css

@@ -0,0 +1,29 @@
+ul.thumbnails.image_picker_selector {
+  overflow: auto;
+  list-style-image: none;
+  list-style-position: outside;
+  list-style-type: none;
+  padding: 0px;
+  margin: 0px; }
+  ul.thumbnails.image_picker_selector ul {
+    overflow: auto;
+    list-style-image: none;
+    list-style-position: outside;
+    list-style-type: none;
+    padding: 0px;
+    margin: 0px; }
+  ul.thumbnails.image_picker_selector li.group_title {
+    float: none; }
+  ul.thumbnails.image_picker_selector li {
+    margin: 0px 12px 12px 0px;
+    float: left; }
+    ul.thumbnails.image_picker_selector li .thumbnail {
+      padding: 6px;
+      border: 1px solid #dddddd;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none; }
+      ul.thumbnails.image_picker_selector li .thumbnail img {
+        -webkit-user-drag: none; }
+    ul.thumbnails.image_picker_selector li .thumbnail.selected {
+      background: #0088cc; }

SRC/public/css/referent.css

@@ -250,3 +250,9 @@ background: linear-gradient(to bottom, #a7cfdf 0%,#23538a 100%); /* W3C */
 
 /* Override width of the whole thing */
 .chosen-container { width:220px !important; }
+
+
+/*For image picker rezise*/
+.thumbnails li img{
+    width: 100px;
+}

SRC/public/js/ListeOeuvre.js

@@ -6,7 +6,6 @@ $('.listeoeuvre').click(function(event) {
     $('#oeuvrePic').empty();
     url = "/showListOeuvres/" + $(this).children('.idListeOeuvre').val();
     
-
     var r = new XMLHttpRequest(); 
     r.open("GET", url, true); 
     r.onreadystatechange = function () { 
@@ -15,12 +14,13 @@ $('.listeoeuvre').click(function(event) {
         var data  = JSON.parse(r.response);
         if (data.length == 0 )
             $("#oeuvrePic").append("Aucune Oeuvre");
+        else {
+            $("#oeuvrePic").append('<select multiple="multiple" id="my_selection" class="image-picker show-html">');
             for (el in data)
             {   
-            $("#oeuvrePic").append('<div class="col-xs-4 col-md-3">'
-            +'<a href="#" class="thumbnail">'
-            +'<img src="http://www.augustins.org/documents/10180/156407/' + data[el].urlPhoto + '"/>'
-            +'</a></div>');
+                $('#my_selection').append('<option data-img-src="http://www.augustins.org/documents/10180/156407/' + data[el].urlPhoto + '" value="'+ data[el].id + '"></option>');
+                $("select").imagepicker();
+            }   
         }
     };
     r.send();
@@ -61,21 +61,22 @@ $('#enregistrer').click(function() {
 
 // Afficher résultat de recherche d'oeuvre
 $('#search_button, #previous, #next').click(function(event) {
-event.preventDefault();
-if(this.id == $('#next').attr('id') && $("#next").parent().hasClass('disabled') || this.id == $('#previous').attr('id') && $("#previous").parent().hasClass('disabled'))
+    event.preventDefault();
+    
+    if(this.id == $('#next').attr('id') && $("#next").parent().hasClass('disabled') || this.id == $('#previous').attr('id') && $("#previous").parent().hasClass('disabled'))
         return 0;
-if (this.id == $('#next').attr('id')) {
+    if (this.id == $('#next').attr('id')) {
         str = $("#next").attr('href');
         url = "/search?page="+/([0-9]+)/.exec(/page=([0-9]+)/.exec(str)[0])[0];
-}else 
-    if (this.id == $('#previous').attr('id')) {
+    }else if (this.id == $('#previous').attr('id')) {
         str = $("#previous").attr('href');
         url = "/search?page="+/([0-9]+)/.exec(/page=([0-9]+)/.exec(str)[0])[0];
     }else {
         url = "/search";
     }
-$('#oeuvreRes').empty();
-dataSend = {
+
+    $('#oeuvreRes').empty();
+    dataSend = {
         _token : $('#_tokenRes').val(),
         auteur: $('#auteur').val(),
         designation: $('#designation').val(),
@@ -84,40 +85,42 @@ dataSend = {
         technique: $('#technique').val(),
         debut: $('#debut').val(),
         fin: $('#fin').val()
-};
-$.post(url,
+    };
+
+    $.post(url,
         dataSend,
         function( data ) {
-if (data.length == 0 )
+    if (data.data.length == 0 )
         $("#oeuvreRes").append("Aucune Oeuvre Trouvé..");
-data.data.forEach( function(el) {
-    $("#oeuvreRes").append('<div class="col-xs-4 col-md-3">'
-    +'<a href="#" class="thumbnail">'
-    +'<img src="http://www.augustins.org/documents/10180/156407/' + el.urlPhoto + '"/>'
-    +'</a></div>');
+    else {
+        $("#oeuvreRes").append('<select multiple="multiple" id="my_researches" class="image-picker show-html">');
+        data.data.forEach( function(el) {
+            $('#my_researches').append('<option data-img-src="http://www.augustins.org/documents/10180/156407/' + el.urlPhoto + '" value="'+ el.id + '"></option>');
+            $("select").imagepicker();
         });
-if(data.prev_page_url == null) {
+    } 
+    if(data.prev_page_url == null) {
         $("#previous").parent().addClass('disabled');
-}else {
+    }else {
         $("#previous").attr('href', data.prev_page_url);
         $("#previous").parent().removeClass('disabled');
-}
-if(data.next_page_url == null) {
+    }
+    if(data.next_page_url == null) {
         $("#next").parent().addClass('disabled');
-}else {
+    }else {
         $("#next").attr('href', data.next_page_url);
         $("#next").parent().removeClass('disabled');
-}
-}, "json" )
-.fail(function() {
-$("#oeuvreRes").append('<div class="alert alert-danger">'
-+'<strong>Oouups!</strong> Il y a un problème.<br><br>'
-+'<ul>'
-+'<li>Erreur lors de la récupération</li>'
-+'</ul>'
-+'</div>'
-);
-});
+    }
+    }, "json" )
+    .fail(function() {
+        $("#oeuvreRes").append('<div class="alert alert-danger">'
+        +'<strong>Oouups!</strong> Il y a un problème.<br><br>'
+        +'<ul>'
+        +'<li>Erreur lors de la récupération</li>'
+        +'</ul>'
+        +'</div>'
+        );
+    });
 });
 
 

SRC/resources/views/app.blade.php

@@ -9,6 +9,8 @@
 	<link href="/css/app.css" rel="stylesheet">
 	<link href="/css/chosen.min.css" rel="stylesheet">
 	<link href="/css/game.css" rel="stylesheet" type="text/css"/>
+	<link href="/css/image-picker.css" rel="stylesheet" type="text/css"/>
+
 	<!-- Fonts -->
 	<link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
 
@@ -34,6 +36,10 @@
 
 	<!-- Choosen -->
 	  <script src="/js/chosen.jquery.js" type="text/javascript"></script>
+
+	<!-- Scripts Image Picker -->
+	<script type="text/javascript" src="/js/image-picker.min.js"></script>
+	  
 	  <script type="text/javascript">
 	    var config = {
 	      '.chosen-select'           : {},
@@ -45,6 +51,7 @@
 	    for (var selector in config) {
 	      $(selector).chosen(config[selector]);
 	    }
+	    $("select").imagepicker()
 	  </script>
 
 

SRC/resources/views/referent.blade.php

@@ -65,11 +65,14 @@
     </ul>
     <br>
 
+
 <!-- TAKE ALL THAT'S INSIDE THIS DIV FOR "MY SELECTION" -->
 <div id="selection">
   <span style="float: right"><a href="">Sélectionner tout</a> -- <a href="">Annuler sélection</a></span><br>
     <div class="panel-body" id="oeuvrePic">
-      <!-- // TODO -->
+
+        <!-- TODO -->
+
     </div>
   <button style="float: right" class="btn btn-primary" id="enregistrer">Enregistrer</button>
   <br><br>