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.
- Planeación de trabajo con Trello
- Se descargará un raw con los archivos del plugin.
- Se agregarán los archivos en la carpeta vendors
- Se llamarán a la librería mediante un
<script> - Por último se llamará a la librería mediante la función
$('.container').cardify({});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>// `container` es el selector del contenedor donde se buscarán todas las
// imágenes a ser procesadas.
$('.container').cardify({});
<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({});- 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));