Contacto, FAQ, Nosotros

resources/views/proyectos/proyecto/galeria.blade.php

@@ -2,7 +2,7 @@
   <div class="ui image" data-id="0">
     <img src="{{$urls->images}}/{{mb_strtolower($proyecto->edificio)}}/{{$proyecto->imagen}}" />
   </div>
-  <div class="ui grid">
+  <div class="ui grid" id="thumbnails">
     @foreach ($proyecto->images as $i => $image)
       @if ($i == 0)
         @continue
@@ -23,15 +23,43 @@
         '{{$urls->images}}/{{mb_strtolower($proyecto->edificio)}}/{{$image}}',
       @endforeach
     ]
+    function populateThumbs(current) {
+      var thumbs = $('#thumbnails')
+      thumbs.html('')
+      $.each(images, (i, el) => {
+        if (i == current) {
+          return
+        }
+        thumbs.append(
+          $('<div></div>').attr('class', 'three wide column').append(
+            $('<div></div>').attr('class', 'ui image').attr('data-id', i).append(
+              $('<img />').attr('src', el)
+            )
+          )
+        )
+      })
+      $('#galeria').find('.grid .image').click(function(e) {
+        var id = $(this).attr('data-id')
+        changeImage(id)
+      })
+    }
+    function changeImage(id) {
+      var big = $('#galeria>.image')
+      big.find('img').attr('src', images[id])
+      big.attr('data-id', id)
+      populateThumbs(id)
+    }
     $(document).ready(() => {
       $('#galeria').find('.grid .image').click(function(e) {
         var id = $(this).attr('data-id')
-        var big = $('#galeria>.image')
+        changeImage(id)
+        /*var big = $('#galeria>.image')
         var big_id = big.attr('data-id')
         big.find('img').attr('src', images[id])
         big.attr('data-id', id)
         $(this).find('img').attr('src', images[big_id])
         $(this).attr('data-id', big_id)
+        populateThumbs(id)*/
       })
     })
   </script>

resources/views/proyectos/show.blade.php

@@ -17,12 +17,12 @@
             </div>
           </div>
           @include('proyectos.proyecto.galeria')
+          @include('proyectos.proyecto.datos')
         </div>
         <div class="three wide column">
           @include('proyectos.proyecto.buscar')
         </div>
       </div>
-      @include('proyectos.proyecto.datos')
     </div>
   </div>
 @endsection