Agregando un carrusel de imágenes con Orbit

Clase 13 de 21 • Curso de Foundation 2018

Resumen

Foundation incluye muchos complementos que puedes usar para embellecer tus proyectos.

En esta clase aprende cómo funciona, cómo incorporarla en tu sitio y a personalizar su diseño visual de acuerdo a lo que te propongas.

Rafael Jair Sanchez Alviso

student•

Así lo realice yo

<main id="main">
   <div class="grid-container">
      <div class="grid-y grid-margin-y">
         <div class="cell">
            {{> orbit}}
         </div>
         <div class="cell">
            <div class="grid-x grid-margin-x">
               <div class="cell auto">
                  <img src="assets/img/custom_italy.jpg" alt="">
               </div>
               <div class="cell auto">
                  <img src="assets/img/pride.jpg" alt="">
               </div>
            </div>
         </div>
      </div>
   </div>
</main>

Teofilo Rosales Gama

student•

tome su pulgar arriba buen hombre

Harold David Avila Sabogal

student•

buen aporte

Rafael Jair Sanchez Alviso

student•

Aquí esta el link del repositorio del proyecto

Danelia Sanchez Sanchez

student•

<div class="grid-x grid-margin-x">
  <div class="cell auto">
    <figure class="orbit-figure">
      <img class="orbit-image" src="assets/img/custom_italy.jpg" alt="Custom Italy">
    </figure>
  </div>
  <div class="cell auto">
    <figure class="orbit-figure">
      <img class="orbit-image" src="assets/img/pride.jpg" alt="Pride">
    </figure>
  </div>
</div>

Resultado

Harold David Avila Sabogal

student•

buen aporte

Sabino Fernández

student•

Mi solución fue esta, tardé un poco más del o que me hubiese gustado porque perdí algo de tiempo buscando referencias sobre el margin-top/margin-bottom en la documentación de Foundation (está algo desordenada a mi parecer) y resulta que solo hay 4 niveles de margenes (hasta margin-top-3) y yo poniendo margin-top-6 😭😭😭


    <div class="grid-x grid-margin-x margin-top-2 margin-bottom-2">
      <div class="cell small-12 medium-6 large-6">
        <figure>
          <img src="../assets/img/custom_italy.jpg" alt="">
        </figure>
      </div>
      <div class="cell small-12 medium-6 large-6">
        <figure>
          <img src="../assets/img/pride.jpg" alt="">
        </figure>
      </div>
    </div>

Harold David Avila Sabogal

student•

Dentro de partial main.html

<<main id="main">
  <div class="grid-container">
    <div class="grid-y grid-margin-y">
      <div class="cell">
        {{> orbit}}
      </div>
      <div class="cell">
        {{> images}}
      </div>
    </div>  
  </div>
</main>>

Dentro del partial images.html

<<div class="grid-x grid-margin-x">
  <div class="cell small-12 medium-6 large-3">
    <figure class="figure">
      <img class="image" src="assets/img/Rutas-Dificultad.jpg" alt="Rutas-Dificultad">
    </figure>
  </div>
  <div class="cell small-12 medium-6 large-3">
    <figure class="figure">
      <img class="image" src="assets/img/Rutas-Distancia.jpg" alt="Rutas-Distancia">
    </figure>
  </div>
  <div class="cell small-12 medium-6 large-3">
    <figure class="figure">
      <img class="image" src="assets/img/Rutas-Zonas.jpg" alt="Rutas-Zonas">
    </figure>
  </div>
  <div class="cell small-12 medium-6 large-3">
      <figure class="figure">
        <img class="image" src="assets/img/Rutas-CiudadBici.jpg" alt="Rutas-CiudadBici">
      </figure>
    </div>  
</div>>

Randy Guerra

student•

Un consejo importante es revisar el audio de este curso. Se escucha muy bajo. El curso esta excelente.

Armando Chindoy

student•

Yo lo realicé así

<main id="main">
    <div class="grid-container">
        <div class="grid-y grid-margin-y">
            <div class="cell">
                {{>orbit}}
            </div>
            <div class="cell">
                <div class="grid-x grid-margin-x">
                    <div class="cell auto">
                        <img src="assets/img/custom_italy.jpg" alt="">
                    </div>
                    <div class="cell auto">
                        <img src="assets/img/pride.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

Karina Romero

student•

Aqui la solución que encontré :)

<div class="cell small-6 medium-4 large-3 product">

Harold David Avila Sabogal

student•

buen aporte

Cristhian Daza

student•

Listo!!

https://cristhiandaza.github.io/Platzi-foundation/

Camilo Castillo

student•

Reto…

<div class="cell">
                {{> images}}
            </div>```

<div class=“grid-container”> <div class=“grid-x grid-margin-x”> <div class=“cell auto”><img src=“assets/img/custom\_italy.jpg” alt=""></div> <div class=“cell auto “><img src=“assets/img/pride.jpg” alt=””></div> </div> </div>```

Harold David Avila Sabogal

student•

buen aporte

Daniel Muñoz Martín

student•

Tal y como dice Sacha, cree un nuevo Partial para la parte de las imágenes:

<div class="grid-y grid-margin-y">
      <div class="cell">
        {{> Orbit}}
      </div>
      <div class="cell">
        {{> images}}
      </div>
    </div>

Y aquí el código de las imágenes:

<div class="grid-margin-x grid-x">
    <div class="cell auto">
      <figure>
        <img src="assets/img/custom_italy.jpg" alt="Italy collection">
      </figure>
    </div>
    <div class="cell auto">
      <figure>
        <img src="assets/img/pride.jpg" alt="Pride collection">
      </figure>
    </div>
  </div>

Nota: desde un punto de vista de crecimiento, les recomiendo estructurar muy bien el código en componentes (partials) ya que si el proyecto crece será mucho más fácil de escalar.

Harold David Avila Sabogal

student•

buen aporte

Camilo Alexander Velandia Velandia

student•

reto:

<div class="cell">
       <div class="grid-x grid-margin-x">
         <div class="cell small-6 ">
          <img src="../assets/img/custom_italy.jpg" alt="">
         </div>
         <div class="cell small-6 ">
          <img src="../assets/img/pride.jpg" alt="">
         </div>
       </div>
      </div>```

Cristhian Daza

student•

Ayuda, al momento de crear el proyecto me sale esto:

No me instala la carpeta node_modules, en el proyecto anterior no me salia el error.

Jose Angel Mejia Legorreta

company_admin•

En la carpeta corre el comando npm install y eso lo debe corregir. Saludos

Jose Angel Mejia Legorreta

company_admin•

el partial imagenes.html

<div class="grid-container">
    <div class="grid-x grid-margin-x ">
        <div class="cell auto margin-left-0">
            <img src="assets/img/custom_italy.jpg" alt="Tatuajes personalizados">
        </div>
        <div class="cell auto margin-right-0">
            <img src="assets/img/pride.jpg" alt="De acuerdo a tu estilo">
        </div>

    </div>
</div>```

Manuel Durán

student•

alguien mas a tenido el mismo error que yo que el gulp + browser sync no refresca el archivo que se esta trabajando. como que no lo muestra y sale en blanco pero los demas partials si... solo no muestra el ultimo que se guardo

Manuel Durán

student•

<div class="grid-x grid-margin-x">
    <div class="cell small-6">
        <img src="assets/img/custom_italy.jpg" alt="italy collection">
    </div>
    <div class="cell small-6">
        <img src="assets/img/pride.jpg" alt="gay-pride">
    </div>
</div>```

Andrés Campuzano Garzón

student•

Reto:

<div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell auto small-12 medium-6"> <img src="assets/img/custom_italy.jpg" alt=""></div>
    <div class="cell auto small-12 medium-6"> <img src="assets/img/pride.jpg" alt=""></div>
</div>

David Behar

student•

En un parcial {{> custom-images}} creé el siguiente código

&lt;div class=&quot;grid-x grid-margin-x&quot;&gt;
  &lt;div class=&quot;large-6 cell&quot;&gt;
    &lt;img src=&quot;../assets/img/pride.jpg&quot; alt=&quot;Be pride of you&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;large-6 cell&quot;&gt;
    &lt;img src=&quot;../assets/img/custom_italy.jpg&quot; alt=&quot;Custom Italy&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

Juan Esteban García Giraldo

student•

Juan Ramirez

student•

Muy simple y buena la manera de hacer el carrusel, la verdad ahorra bastante tiempo y codigo.

<main id="main">
   <div class="grid-container">
      <div class="grid-y grid-margin-y">
         <div class="cell">
            {{> orbit}}
         </div>
         <div class="cell">
            <div class="grid-x grid-margin-x">
               <div class="cell auto">
                  <img src="assets/img/custom_italy.jpg" alt="">
               </div>
               <div class="cell auto">
                  <img src="assets/img/pride.jpg" alt="">
               </div>
            </div>
         </div>
      </div>
   </div>
</main>

<div class="grid-x grid-margin-x">
  <div class="cell auto">
    <figure class="orbit-figure">
      <img class="orbit-image" src="assets/img/custom_italy.jpg" alt="Custom Italy">
    </figure>
  </div>
  <div class="cell auto">
    <figure class="orbit-figure">
      <img class="orbit-image" src="assets/img/pride.jpg" alt="Pride">
    </figure>
  </div>
</div>

    <div class="grid-x grid-margin-x margin-top-2 margin-bottom-2">
      <div class="cell small-12 medium-6 large-6">
        <figure>
          <img src="../assets/img/custom_italy.jpg" alt="">
        </figure>
      </div>
      <div class="cell small-12 medium-6 large-6">
        <figure>
          <img src="../assets/img/pride.jpg" alt="">
        </figure>
      </div>
    </div>

<<main id="main">
  <div class="grid-container">
    <div class="grid-y grid-margin-y">
      <div class="cell">
        {{> orbit}}
      </div>
      <div class="cell">
        {{> images}}
      </div>
    </div>  
  </div>
</main>>

<<div class="grid-x grid-margin-x">
  <div class="cell small-12 medium-6 large-3">
    <figure class="figure">
      <img class="image" src="assets/img/Rutas-Dificultad.jpg" alt="Rutas-Dificultad">
    </figure>
  </div>
  <div class="cell small-12 medium-6 large-3">
    <figure class="figure">
      <img class="image" src="assets/img/Rutas-Distancia.jpg" alt="Rutas-Distancia">
    </figure>
  </div>
  <div class="cell small-12 medium-6 large-3">
    <figure class="figure">
      <img class="image" src="assets/img/Rutas-Zonas.jpg" alt="Rutas-Zonas">
    </figure>
  </div>
  <div class="cell small-12 medium-6 large-3">
      <figure class="figure">
        <img class="image" src="assets/img/Rutas-CiudadBici.jpg" alt="Rutas-CiudadBici">
      </figure>
    </div>  
</div>>

<main id="main">
    <div class="grid-container">
        <div class="grid-y grid-margin-y">
            <div class="cell">
                {{>orbit}}
            </div>
            <div class="cell">
                <div class="grid-x grid-margin-x">
                    <div class="cell auto">
                        <img src="assets/img/custom_italy.jpg" alt="">
                    </div>
                    <div class="cell auto">
                        <img src="assets/img/pride.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

<div class="grid-margin-x grid-x">
    <div class="cell auto">
      <figure>
        <img src="assets/img/custom_italy.jpg" alt="Italy collection">
      </figure>
    </div>
    <div class="cell auto">
      <figure>
        <img src="assets/img/pride.jpg" alt="Pride collection">
      </figure>
    </div>
  </div>

<div class="cell">
       <div class="grid-x grid-margin-x">
         <div class="cell small-6 ">
          <img src="../assets/img/custom_italy.jpg" alt="">
         </div>
         <div class="cell small-6 ">
          <img src="../assets/img/pride.jpg" alt="">
         </div>
       </div>
      </div>```

<div class="grid-container">
    <div class="grid-x grid-margin-x ">
        <div class="cell auto margin-left-0">
            <img src="assets/img/custom_italy.jpg" alt="Tatuajes personalizados">
        </div>
        <div class="cell auto margin-right-0">
            <img src="assets/img/pride.jpg" alt="De acuerdo a tu estilo">
        </div>

    </div>
</div>```

<div class="grid-x grid-margin-x">
    <div class="cell small-6">
        <img src="assets/img/custom_italy.jpg" alt="italy collection">
    </div>
    <div class="cell small-6">
        <img src="assets/img/pride.jpg" alt="gay-pride">
    </div>
</div>```

<div class="grid-x grid-margin-x grid-margin-y">
    <div class="cell auto small-12 medium-6"> <img src="assets/img/custom_italy.jpg" alt=""></div>
    <div class="cell auto small-12 medium-6"> <img src="assets/img/pride.jpg" alt=""></div>
</div>

&lt;div class=&quot;grid-x grid-margin-x&quot;&gt;
  &lt;div class=&quot;large-6 cell&quot;&gt;
    &lt;img src=&quot;../assets/img/pride.jpg&quot; alt=&quot;Be pride of you&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;large-6 cell&quot;&gt;
    &lt;img src=&quot;../assets/img/custom_italy.jpg&quot; alt=&quot;Custom Italy&quot;&gt;
  &lt;/div&gt;
&lt;/div&gt;

Agregando un carrusel de imágenes con Orbit

Introducción

¿Dónde aprender frontend actualizado?

Introducción a Foundation y al proyecto del curso

Repositorio del curso

¿Que es un framework frontend?

Creando el sitio web

Instalación de Foundation

Configuración de Foundation

Incorporando los iconos de Foundation

La nueva grilla XY de Foundation

Espaciado dentro de las grillas

Creando nuestro header

Creando el menú de navegación

Adaptando el menú de navegación para dispositivos móviles

Agregando un carrusel de imágenes con Orbit

Agregando una barra lateral de navegación

Agregando el listado de productos

Agregando un menú lateral off-canvas

Agregar Smooth Navigation

Llevando nuestro sitio a producción

Complementos- Creando emails para nuestros usuarios

Introducción a Foundation para Emails

Creando un email de recibo de compra

Conclusiones del curso