Galeria funcionando

public/assets/scripts/home.js

@@ -1,9 +1,9 @@
-let clientes = {
+const clientes = {
   clientes: [],
   current: 0,
   rows: 2,
   cols: 6,
-  decreaseClientes: () => {
+  decreaseClientes: function() {
     $('#img_clientes').find('.row').find('.column:last-child').remove()
     clientes.current -= clientes.rows
     if (clientes.current < - clientes.cols * clientes.rows) {
@@ -20,7 +20,7 @@ let clientes = {
       $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[n + 1])
     )
   },
-  increaseClientes: () => {
+  increaseClientes: function() {
     $('#img_clientes').find('.row').find('.column:first-child').remove()
     clientes.current += 2
     if (clientes.current > clientes.clientes.length - clientes.cols * clientes.rows) {
@@ -33,7 +33,7 @@ let clientes = {
       $('<div></div>').attr('class', 'five wide tablet two wide computer column').append(clientes.clientes[clientes.current + clientes.cols * clientes.rows - 1])
     )
   },
-  setup: () => {
+  setup: function() {
     $('.ci .icon').css('cursor', 'pointer').click(function() {
       if ($(this).attr('class').indexOf('left') != -1) {
         clientes.decreaseClientes()
@@ -43,7 +43,7 @@ let clientes = {
     })
   }
 }
-let eventos = {
+const eventos = {
   eventos: [],
   current_tab: 'none',
   base_url: '',
@@ -54,7 +54,6 @@ let eventos = {
       if (filter != 'none' && el.servicio != filter) {
         return
       }
-      console.debug(el.image)
       grid.append(
         $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
           $('<div></div>').attr('class', 'ui basic segment').append(
@@ -108,7 +107,7 @@ let eventos = {
     })
   }
 }
-let testimonios = {
+const testimonios = {
   testimonios: [],
   current_testimonio: 0,
   cambiar: (id) => {
@@ -134,3 +133,57 @@ let testimonios = {
     $('#marcador').find('.icon.outline').css('cursor', 'pointer')
   }
 }
+const galeria = {
+  id: '',
+  galeria_id: '',
+  galeria: [],
+  base_url: '',
+  setup: function() {
+    $('.servicio').click((e) => {
+      this.changeTab(e.target)
+    })
+  },
+  changeTab: function(tab) {
+    this.drawTabs(tab)
+    $(this.galeria_id).html('')
+    const servicio = $(tab).attr('data-filter')
+    const grid = $(this.galeria_id)
+    $.each(this.galeria, (i, el) => {
+      if (servicio != 'none' && el.servicio != servicio) {
+        return
+      }
+      grid.append(this.drawCard(i, el))
+    })
+  },
+  drawTabs: function(active) {
+    $(this.id).find('.servicio.active').removeClass('active')
+    $(active).addClass('active')
+  },
+  drawCard: function(key, item) {
+    /*
+    <div class="eight wide tablet four wide computer column">
+      <div class="ui basic segment">
+        <a href="{{$urls->base}}/evento/{{$i}}">
+          <div class="ui image">
+            {!!$evento->imagen!!}
+          </div>
+          <div class="ui center aligned header">
+            {{$evento->titulo}}
+            <br />
+            {{$evento->empresa}}
+          </div>
+        </a>
+      </div>
+    </div>
+    */
+   return $('<div></div>').attr('class', 'eight wide tablet four wide computer column').append(
+     $('<div></div>').attr('class', 'ui basic segment').append(
+       $('<a></a>').attr('href', this.base_url + '/evento/' + key).append(
+         $('<div></div>').attr('class', 'ui image').html(item.image)
+       ).append(
+         $('<div></div>').attr('class', 'ui center aligned header').html(item.titulo + '<br />' + item.empresa)
+       )
+     )
+   )
+  }
+}

public/assets/styles/home.css

@@ -88,6 +88,9 @@
   background-color: white;
   padding: 0;
 }
+#galeria .bottom.attached.segment {
+  padding-top: 1rem !important;
+}
 #galeria .segment .image {
   height: 14rem;
   width: 100%;