Carrousel en Foundation con Orbit

Clase 12 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Agreguemos las imágenes de las bandas a cada tab, para esto vamos a usar Orbit, una librería integrada a Foundation.

Recuerda consultar la documentación oficial en caso de duda.

Gersom Hernandez Ramos

student•

por alguna razon a mi no me salia la imagen lo que tube que hacer fue añadir el siguiente codigo antes del .orbit-container

Espero les sea de ayuda…

😃

Juan David lemus Rubiano

student•

si aparecio, mijo muchas gracias o yo

Leevi Raudel

student•

Muchas gracias!

José María Cuevas Ramírez

student•

¿Qué tal comunidad?
Si alguien esta teniendo problema con el orbit y los tabs que no muestran el contenido aquí les dejo mi solución:

Para el Orbit la documentación cambio con respecto al curso, así fue como lo hice yo:

<div class="row">
	<div class="small-12 medium-6 column">
              <div class="orbit" aria-label="nombreBanda" data-orbit>
                <div class="orbit-wrapper">
                  <div class="orbit-container">
                    <div class="is-active orbit-slide">
                      <figure class="orbit-figure">
                        <img class="orbit-image" src="urlDeLaImagen" alt="nombreBanda">
                        <figcaption class="orbit-caption">Nombre Banda</figcaption>
                      </figure>
                    </div>
                  </div>
                </div>
              </div>
            </div>
</div>

Para el problema con los tabs RyuuNoYume encontró la solución de la siguiente manera; en el archivo app.css se coloca lo siguiente:

.orbit-container {
  height: auto !important;
}

.orbit-slide {
  max-height: none !important;
}

Espero les sea de ayuda 😃

Stefanny Torres

student•

Gracias por tu aporte 😄

jairobonilla77

company_admin•

Excelente !!! ahora si funciona!!!

Itzel

student•

Les comparto, a mi no me salió, porque el código de la pag. es diferente al que él presenta (seguro es por la versión). Usé el que recomiendan en el sitio:

                </div>

              </div>

Adrian Cejudo García

student•

A mí no me salía ni poniendo data-orbit, asíque me fuí al css de foundation-flex, busqué orbit y estaba puesto con un height: 0;

la soolución que le dí:
sustituir en el foundation-flex.css, el height del orbit-container por auto quedando:

.foundation-container{
position: relative;
height: auto;
margin: 0;
list-style: none;
overflow: hidden;
}

Espero que les sea de ayuda.

Adrian Cejudo García

student•

.orbit-container

(Error al escribir rápido)

Luis Felipe Silgado Cortázar

student•

Héroe sin capa tienes mi gratitud, resolviste mis 2 problemas.

Darwel Duran

student•

el orbit dentro de un div c tab-content que a su ves esta en un tab-panel deja de funcionar el orbit ojo esto es para la versión 6.3.1 de foundation

Darwel Duran

student•

hay un bug en el funcionamiento del orbit junto con tabs en la web hay posibles soluciones pero ninguna funciona

Luis Felipe Silgado Cortázar

student•

por alguna razón el tab del viernes si aparece, pero los otros no, cosa curiosa por que le dejé los textos de viernes, sábado y domingo y estos si aparecen correctamente, y cuando le doy is-active a todos los tabs, al inicio aparece un revoltijo (como se esperaba) pero cuando navego por los tabs ya se normaliza todo.

Néstor Fabián Gonzalez

student•

Me sale lo mismo que a ti, pudiste solucionarlo?

Luis Felipe Silgado Cortázar

student•

Nuestro compañero adrian96 dio con la solución, al parecer sustituir en foundation-flex.css el height del orbit-container por auto de esta forma lo soluciona:

.foundation-container{
position: relative;
height: auto;
margin: 0;
list-style: none;
overflow: hidden;
}

Miguel Zamora

student•

buenas, seria interesante quizás alguna clase o herramienta

que pueda regular el tamaño de todas nuestras imágenes, ya que si tienen diferente tamaño o son muy grandes no nos saldrá igual

Mauricio Rengifo Abella

student•

Lo podrías hacer poniendo un png transparente y como propiedad css un background:cover; con la imagen que quieres... creo que se podria hacer lo que quieres con un div, pero no es muy bien como Googlealo

David Camacho

student•

.orbit-container {

  height: 450px;

  margin-bottom: 1em;

  position: relative;

  width: 450px;

.orbit-container .orbit-slide img {

  height: 100%;

  position: absolute;

  width: 100%;

Con este codigo le estas especificando el tamaño al contenedor del orbit y a su vez le estas indicando a la img que esta dentro del slide que ocupe el 100% tanto de ancho como de alto.

Para ello es indispensable colocarle posición relativa al container y posición absoluta a la img. De esta manera la img tomara el 100% del tamaño del container.

Esto es una solución rapida, pero no la recomiendo mucho, ya que si las img tienen distintos tamaños pues se van a mostrar desproporcionadas.

Jonatan Ruben Sosa Caycay

student•

Hay dos formas de solucionar el problema cuando no muestra la imagen, basándonos en el código de la clase.

Primera Solución
Añadir antes del div con la clase orbit-container, el siguiente div:

<div class="orbit" data-orbit>
código de la clase
</div>

Segunda Solución
Añadir en app.css

.orbit-container {
    height: auto !important;
}

Con eso se mostrará la imagen, no hace falta decirlo pero si usas una solución no es necesario usar la otra.

Jonatan Ruben Sosa Caycay

student•

Personalmente use la segunda opción, ya que la clase orbit por alguna razón añade un pequeño margen-buttom a la imagen, lo cual es corregible con css, pero la idea es mantener el menor código posible y que sea re utilizable, saludos.

Carlos Francisco Betancourt Requena

student•

Éste es mi código:

HTML:

<div class="row">
	<div class="column small-12 medium-6 caja-orbit">
		<div class="orbit-container">
			<img src="http://fw.atarde.uol.com.br/2014/12/650x375_thalles-roberto_1479239.jpg" alt="Thalles Roberto" />
			<div class="orbit-caption">Thalles Roberto.</div>
		</div>
	</div>

	<div class="column small-12 medium-6 caja-orbit">
		<div class="orbit-container">
			<img src="http://fw.atarde.uol.com.br/2014/12/650x375_thalles-roberto_1479239.jpg" alt="Thalles Roberto" />
			<div class="orbit-caption">Thalles Roberto.</div>
		</div>
	</div>
</div>

CSS:

.orbit-container {
  height: 100%;
}

#lineup-container .caja-orbit {
  margin-bottom: 2em;
}

#lineup-container .column:nth-child(odd) .orbit-caption {
  text-align: right;
}

Saludos !!!

Teofilo Rosales Gama

student•

mi humilde aporte para que salga la imagen:

<div class="tabs-panel is-active" id="panelViernes">
            <div class="row">
              <div class="small-12 medium-6 column" >
                <div class=“orbit” data-orbit>
                  <div class="orbit-container">
                    <div class="orbit-slide">
                      <img class="orbit-image" src="" 
                      alt="prueba">
                      <figcaption class="orbit-caption">prueba</figcaption>
                      </div>
                    </div>
                  </div>
              </div> 
            </div>
          </div>```
copien y pegen

Ivan Cardozo

student•

Hola ¡ alguno seria tan amable de ayudarme a encontrar el problema con mi pagina? el problema es que todas las imagenes se cargan en el tab viernes , y yo quiero que no se muestren las imagenes sino solo cuando está activa su tab correspondiente , hice un repo con el codigo para mostrarlo .

https://ivancardozo11.github.io/proyecto-fundation/

Diego Forero

Team Platzi•

Yo veo el sitio que dejaste y la hacer click en cada tab se cambian las imágenes que se están mostrando, la tab que viene por defecto es la de viernes.

Ivan Cardozo

student•

Entendí tu comentario , pero lo que estoy intentando es que tab Viernes me muestre solo las imagenes de los guns que le corresponde , y no todas juntas . Como podria hacerlo?

Alexander Valencia

student•

cada vez queda mejor

Edwin Hernandez

student•

buenas noches, estoy usando la versión 6.4.2 de foundation y no puedo lograr que cuando haga click en el tab viernes o sábado aparezcan las imágenes, aparecen las imágenes del viernes pero al momento de cambiar el tamaño de la pagina si salen las fotos de estos dos días y ya probé cambiando el valor de height que estaba en cero a auto pero no me funciona

.orbit-container {
  position: relative;
  height:auto;
  margin: 0;
  list-style: none;
  overflow: hidden; }

.orbit-slide {
  width: 100%;
  max-height: none;}

<code>

<!doctype html>
<html class="no-js" lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation for Sites</title>
    <link rel="stylesheet" href="icons/foundation-icons.css">
    <link rel="stylesheet" href="css/foundation.css">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">
    <link rel="stylesheet" href="css/app.css">
  </head>
  <body>
    <!-- social -->
    <section id="social-container">
      <div class="row align-center text-center">
        <div class="column small-1">
          <a href="#" target="black">
            <i class="fi-social-facebook" target></i>
          </a>
        </div>
        <div class="column small-1">
          <a href="#" target="black">
            <i class="fi-social-twitter" target></i>
          </a>
        </div>
        <div class="column small-1">
          <a href="#" target="black">
            <i class="fi-social-instagram" target></i>
          </a>
        </div>
      </div>
    </section>
    <!-- Logo -->
    <section id="logo-container">
      <div class="callout text-center">
        <h1>PlatziPalooza</h1>
      </div>
    </section>
    <!-- Menú -->
    <section id="menu-container">
      <ul class="menu dropdown align-spaced" data-dropdown-menu>
        <li><a href="#">Tickets</a></li>
        <li>
          <a href="#">Lineup</a>
          <ul id="submenu-container" class="menu">
            <li>
              <a href="#">Viernes</a>
            </li>
            <li>
              <a href="#">Sábado</a>
            </li>
            <li>
              <a href="#">Domingo</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Info</a></li>
        <li><a href="#">Suscríbete</a></li>
      </ul>
    </section>
    <!-- Tickets -->
    <section id="tickets-action">
      <div class="callout large text-center">
        <a href="#">
          <button class=" large hollow button">Comprar boletos</button>
        </a>
      </div>
    </section>
    <!-- Line up -->
    <section id="lineup-container">
      <h3 class="text-center">Lineup</h3>
      <ul class="tabs text-center"  data-tabs id="lineup-tabs">
        <li class="tabs-title is-active">
          <a href="#panelviernes">Viernes</a>
        </li>
        <li class="tabs-title">
          <a href="#panelsabado">Sábado</a>
        </li>
        <li class="tabs-title">
          <a href="#paneldomingo">Domingo</a>
        </li>
      </ul>
        <div class="tabs-content" data-tabs-content="lineup-tabs">
          <div class="tabs-panel is-active" data-active-collapse="true" id="panelviernes">
            <div class="row">
               <div class="column small-12 medium-6">
                   <div class="orbit" data-orbit>
                     <div class="orbit-container">
                       <li class="is-active orbit-slide">
                         <figure class="orbit-figure">
                             <img class="orbit-image" src="http://static1.squarespace.com/static/51cf5371e4b0df98a9bbc6c0/51cf5371e4b0df98a9bbc6c9/5297f15ae4b0d642edd72d63/1450395400578/?format=1000w" alt="Space">
                             <figcaption class="orbit-caption">La mejor voz de este planeta</figcaption>
                         </figure>
                       </li>
                     </div>
                   </div>
                   <div class="orbit" data-orbit>
                     <div class="orbit-container">
                       <li class="orbit-slide ">
                         <figure class="orbit-figure">
                             <img class="orbit-image" src="http://static1.squarespace.com/static/51cf5371e4b0df98a9bbc6c0/51cf5371e4b0df98a9bbc6c9/5297f15ae4b0d642edd72d63/1450395400578/?format=1000w" alt="Space">
                             <figcaption class="orbit-caption">La mejor voz de este planeta</figcaption>
                         </figure>
                       </li>
                     </div>
                   </div>
               </div>
               <div class="column small-12 medium-6">
                   <div class="orbit" data-orbit>
                     <div class="orbit-container">
                       <li class="orbit-slide">
                         <figure class="orbit-figure">
                             <img class="orbit-image" src="http://static1.squarespace.com/static/51cf5371e4b0df98a9bbc6c0/51cf5371e4b0df98a9bbc6c9/5297f15ae4b0d642edd72d63/1450395400578/?format=1000w" alt="Space">
                             <figcaption class="orbit-caption">La mejor voz de este planeta</figcaption>
                         </figure>
                       </li>
                     </div>
                   </div>
                   <div class="orbit" data-orbit>
                     <div class="orbit-container">
                       <li class="orbit-slide">
                         <figure class="orbit-figure">
                             <img class="orbit-image" src="http://static1.squarespace.com/static/51cf5371e4b0df98a9bbc6c0/51cf5371e4b0df98a9bbc6c9/5297f15ae4b0d642edd72d63/1450395400578/?format=1000w" alt="Space">
                             <figcaption class="orbit-caption">La mejor voz de este planeta</figcaption>
                         </figure>
                       </li>
                     </div>
                   </div>
               </div>
             </div>
           </div>
             <div class="tabs-panel" data-active-collapse="true" id="panelsabado">
               <div class="row">
                 <div class="column small-12 medium-6">
                   <div class="orbit" data-orbit>
                     <div class="orbit-container">
                       <li class="is-active orbit-slide ">
                         <figure class="orbit-figure">
                             <img class="orbit-image" src="http://assets1.classicfm.com/2010/49/il-divo--1291828949-editorial-long-form-0.jpg" alt="Space">
                             <figcaption class="orbit-caption">Noche de tenores</figcaption>
                         </figure>
                       </li>
                     </div>
                   </div>
                   <div class="orbit" data-orbit>
                     <div class="orbit-container">
                       <li class="orbit-slide">
                         <figure class="orbit-figure">
                             <img class="orbit-image" src="http://assets1.classicfm.com/2010/49/il-divo--1291828949-editorial-long-form-0.jpg" alt="Space">
                             <figcaption class="orbit-caption">Noche de tenores</figcaption>
                         </figure>
                       </li>
                     </div>
                   </div>
                   <div class="orbit" data-orbit>
                     <div class="orbit-container">
                       <li class="orbit-slide ">
                         <figure class="orbit-figure">
                             <img class="orbit-image" src="http://assets1.classicfm.com/2010/49/il-divo--1291828949-editorial-long-form-0.jpg" alt="Space">
                             <figcaption class="orbit-caption">Noche de tenores</figcaption>
                         </figure>
                       </li>
                     </div>
                   </div>
                 </div>

Diego Forero

Team Platzi•

La librería de Foundation ha cambiado desde el curso ya que se hizo con la versión beta que estaba en ese momento, te sugiero revises la documentación oficial, para la versión 6 es necesario que tengas una librería adicional llamada MotionUI.

Documentación oficial: https://foundation.zurb.com/sites/docs/orbit.html

Sebastian Beltran

student•

alguien me puede decir porque mi index sale de un tamaño mas pequeño que los demas archivos .html si tiene las mismas caracteristicas? Es decir sale como con un zoom, de antemano gracias.

Rafael Francisco Mollá Douglas

student•

Si pongo diferentes imagenes en el mismo panel, generalmente me queda el alto de una imagen mas grande que la otra. ¿Cómo soluciono esto?

Rafael Francisco Mollá Douglas

student•

Supongo que foundation trata de mantener la relación de aspecto de la imagen y por eso no hace que todas sean iguales, pero me gustaría saber como haría para soluicionar esto.

Iridian Iridian

student•

tenia el problema que la imagen no se mostraba hasta que un rato después me di cuenta que estaba mandando a llamar a foundation.css y no a fundation-flex.css entonces lo cambie y ya se muestra, espero también les sea de ayuda.

Darwel Duran

student•

es importante el orden de los atributos data- porque si no los colocan en el orden que dicta la documentación deja de funcionar

Cesar Octavio de Jesus Meza Carrillo

student•

Porque no se ven las imagenes sin poner estilos a los orbit-container?

Diego Forero

Team Platzi•

Si te refieres a colocar el data-orbit es necesario ya que orbit usa JavaScript para que funcione, te recuerdo adicionalmente que orbit lamentablemente fue removido en foundation 6 😦

Wilder Flores del Aguila

student•

no me reconocne la clase class=“small-12 medium-6 column” y tampoco la estructura del codigo lo rebice y todo esta bien enlazado deacuerdo al documento descargado de la pagina de foundation.
¿cual es el error? porfa

<div class=“small-12 medium-6 column”> <div class=“orbit-container”> <div class=“orbit-slide”> <img class=“orbit-image” src=“<http://images.mcn.bauercdn.com/pagefiles/565362/zx-10r_001.jpg>” alt=“curso fount”> <figcaption class=“orbit-caption”>curso fount</figcaption> </div> </div>

Diego Forero

Team Platzi•

Tienes eso dentro de un div con class row si no recuerdo mal es la forma en que función, te recomiendo no solo compartir una porción del código ya que el error puede estar en otra parte.

Usuario anónimo

user•

Buenas alguien seria tan amable de ayudarme, tengo un problema y es que no me aparece la imagen del “src”, mire mi codigo y aparentemente esta bien, mire la documentacion de foundation y lo diferente es que el “img” y el “figcaption” es que estaban dentro de una etiqueta “figure” con un class, lo puese con esa etiqueta y tampoco, le puse div en ves de figure y tampoco. Alguien me podria ayudar, estees mi codigo,

Usuario anónimo

user•

<!--Lineup-->

    <section id="lineup-container">
      <h3 class="text-center">Lineup</h3>
      <ul class="tabs text-center" data-tabs id="lineup-tabs">
        <li class="tabs-title is-active">
          <a href="#panelviernes">Viernes</a>
        </li>
        <li class="tabs-title">
          <a href="#panelsabado">Sabado</a>
        </li>
        <li class="tabs-title">
          <a href="#paneldomingo">Domingo</a>
        </li>
      </ul>

Usuario anónimo

user•

<div class="tabs-content" data-tabs-content="lineup-tabs">
        <div class="tabs-panel is-active" id="panelviernes">
          <div class="row">

            <div class="small-12 medium-6 column">

              <div class="orbit-container">
                <div class="orbit-slide">
                  <img class="orbit-image" src="http://mp3teca.com/-/images/Ozuna-Caliente-mrfa8wiqgtmfqeghlgd8hg0kk8zxjgcxw2y2cfp9ok.jpg" alt="ozuna">
                  <figcaption class="orbit-caption">ozuna</figcaption>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tabs-panel" id="panelsabado">
          contenido sabado
        </div>
        <div class="tabs-panel" id="paneldomingo">
          contenido domingo
        </div>
      </div>
    </section>

    <!--/Lineup-->

Carrousel en Foundation con Orbit

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman