2

Necesito que al darle clic a una imagen esta se expanda en forma de zoom, y hasta el momento no he logrado encontrar algo parecido con Foundation 6, hasta que encontré una opción en Foundation 5 llamado Clearing Lightbox, y su clase es thumbs-clearing, hay algo parecido en Foundation 6?

2 respuestas 2

2

Lastimosamente y al menos hasta ahora (Foundation 6.2.4) NO existe nada similar a Clearing en Foundation 6.x. Tendrías que instalar un plugin externo, entre tantos que hay disponibles.

Puedes ver aquí el ticket con el roadmap de Foundation 6, Clearing estaba en la lista pero fue eliminado, según sus creadores al menos de forma temporal: https://github.com/zurb/foundation-sites/issues/7759

Alguien plantea una opción usando Reveal y Orbit (ambos son componentes de Foundation) como alternativa a Clearing:

<div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit data-box-of-bullets="boxOfBullets">
  <ul class="orbit-container">
    <button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span>&#9664;</button>
    <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span>&#9654;</button>
    <li class="is-active orbit-slide text-center" onclick="openOrbitReveal(this)">
      <img src="http://placehold.it/1000x430" alt="" data-zoom-image="http://placehold.it/2000x860">
      <figcaption class="orbit-caption">1. Space, the final frontier.</figcaption>
    </li>
    <li class="orbit-slide text-center" onclick="openOrbitReveal(this)">
      <img src="http://placehold.it/1000x430" alt="" data-zoom-image="http://placehold.it/2000x860">
      <figcaption class="orbit-caption">2. Lets Rocket!</figcaption>
    </li>
    <li class="orbit-slide text-center" onclick="openOrbitReveal(this)">
      <img src="http://placehold.it/1000x430" alt="" data-zoom-image="http://placehold.it/2000x860">
      <figcaption class="orbit-caption">3. Encapsulating</figcaption>
    </li>
    <li class="orbit-slide text-center" onclick="openOrbitReveal(this)">
      <img src="http://placehold.it/1000x430" alt="" data-zoom-image="http://placehold.it/2000x860">
      <figcaption class="orbit-caption">4. Outta This World</figcaption>
    </li>
  </ul>
  <nav class="row boxOfBullets small-up-2 medium-up-4">
    <button class="is-active column" data-slide="0"><div class="callout small"><img src="http://placehold.it/200x86" alt=""></div><span class="show-for-sr">First slide details.</span><span class="show-for-sr">Current Slide</span></button>
   <button class="column" data-slide="1"><div class="callout small"><img src="http://placehold.it/200x86" alt=""></div><span class="show-for-sr">Second slide details.</span></button>
   <button class="column" data-slide="2"><div class="callout small"><img src="http://placehold.it/200x86" alt=""></div><span class="show-for-sr">Third slide details.</span></button>
   <button class="column" data-slide="3"><div class="callout small"><img src="http://placehold.it/200x86" alt=""></div><span class="show-for-sr">Fourth slide details.</span></button>
  </nav>
</div>
<div class="full reveal" id="orbitReveal" data-reveal>
  <button class="close-button" data-close aria-label="Close reveal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<script type="text/javascript">
function openOrbitReveal(that){
  var $orbitClicked = $(that).closest('div[data-orbit]'),
  $orbitPlaceholder = $('<div class="orbit-placeholder"></div>').insertAfter($orbitClicked).css({'height':$orbitClicked.height()}),
  $orbitReveal = $('#orbitReveal'),
  $zoomImages = $orbitClicked.data('zfPlugin').$slides.find('img[data-zoom-image]');

  $zoomImages.each(function(){
    $this = $(this);
    $this.attr('data-original-image',$this.attr('src')).attr('src',$this.attr('data-zoom-image'));
  });
  Foundation.onImagesLoaded($zoomImages, function(){
    $orbitClicked.data('zfPlugin').$slides.css({'max-height':'none'});
    $orbitClicked.data('zfPlugin').$wrapper.css({'height':'auto'});
    console.log($orbitClicked.data('zfPlugin'));
    //$orbitClicked.data('zfPlugin')._prepareForOrbit();
  });

  $orbitReveal.prepend($orbitClicked);
  $orbitReveal.foundation('open');
  $orbitReveal.off('closed.zf.reveal').on('closed.zf.reveal',function(){
    $zoomImages.each(function(){
       $this = $(this);
       $this.attr('src',$this.attr('data-original-image'));
    });
    $orbitPlaceholder.replaceWith($orbitClicked);
  });
}
</script>

El código fue tomado de: https://github.com/zurb/foundation-sites/issues/7823#issuecomment-170154950

3
  • Te agradezco muchisimo, por la aclaración Shaz, a tu juicio, ¿es viable volver a Foundation 5? Commented el 1 dic. 2016 a las 3:59
  • Yo no lo haría, en general Foundation 6 fue mejorado en cuanto a rendimiento y reducción de líneas de código, fue casi reescrito totalmente, y solo regresar por un lightbox no me parece un motivo de peso. Hay miles de plugins bastante ligeros que pueden hacer ese trabajo, casi sin afectar el rendimiento de tu aplicación.
    – Shaz
    Commented el 1 dic. 2016 a las 4:06
  • Tienes toda la razon Shaz es mejor esperar a que zurb lo agregue nativamente a Foundation 6, de momento Lightbox acaba de salvarme el dia =D Muy facil de implementar Commented el 1 dic. 2016 a las 4:42
0

Debido a que Zurb no ha agregado de forma nativa clearing-lightbox, dejo una alternativa muy fácil de implementar, explicada paso a paso, saludos!

http://lokeshdhakar.com/projects/lightbox2/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.