README.md

Cardify

El reto consiste en la creación de un plugin de jQuery que dado un conjunto de imágenes con una descripción al pasar se visualizará con el efecto hover.

Desarrollado para

Laboratoria

Flujo de trabajo

• Planeación de trabajo con Trello

Instalación

1. Se descargará un raw con los archivos del plugin.
2. Se agregarán los archivos en la carpeta vendors
3. Se llamarán a la librería mediante un <script>
4. Por último se llamará a la librería mediante la función $('.container').cardify({});

Global (navegador)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>

Uso

// `container` es el selector del contenedor donde se buscarán todas las
// imágenes a ser procesadas.
$('.container').cardify({});

Ejemplos

  <div class="container">
      <img src="assets/images/perro1.jpg" alt="Cachorro1">
      <img src="assets/images/perro2.jpg" alt="Cachorro2">
      <img src="assets/images/perro3.jpg" alt="Cachorro3">
      <img src="assets/images/perro4.jpg" alt="Cachorro4">
      <img src="assets/images/perro5.jpg" alt="Cachorro5">
      <img src="assets/images/perro6.jpg" alt="Cachorro6">
  </div>

$('.container').cardify({});

Snippets

• html

 <div class="container">
    <img src="" alt="">
  </div>

• js

(function($) {
  $.fn.cardify = function() {
    $('img').hover(
       function() {
         var image = $(this)
       $(this).each(function() {
         if ( image.parent().is("figure")) {
           $( "figcaption" ).remove()
           image.unwrap();
           image.removeClass('hover')

         } else {
           image.wrap( "<figure class=inline></figure>" );
           $("figure").append('<figcaption class=letter>' + $(this).attr('alt') + '</figcaption>')
           image.addClass('hover')

         }
       })
     });

  };
}(jQuery));

Bibliografía

• Babel
• Gitignore
• Creación de plugin-1
• Creación de plugin-2
• Creación de Snippets