cardify
v1.5.5
Published
Cardify es un plugin de jQuery que aplica un efecto de hover a tus imágenes envolviendolas en una etiqueta `<figure>`, rescatando su descripción del atributo `alt` e insertando el texto en una etiqueta `<figcaption>`. Es fácil de usar y rápido de configur
Downloads
5
Readme
Cardify
Descripción:
¿Cómo funciona?
Cardify es un plugin de jQuery que aplica un efecto de hover a tus imágenes envolviendolas en una etiqueta <figure>
, rescatando su descripción del atributo alt
e insertando el texto en una etiqueta <figcaption>
. Es fácil de usar y rápido de configurar.
Instalación
Global (navegador)
.html
<script src="dist/app.js"></script>
Uso
.js
var cardify = require('cardify');
Para que el plugin funcione primero debes inicializar tu proyecto en la terminal con el comando
npm init
Descargar cardify desde tu terminal con el comando
npm install cardify
Para que tu proyecto se vea en el navegador debes instalar Browserify de manera global en tu computadora con el siguiente comando en tu terminal
npm install -g browserify
Luego crea en la raíz de tu proyecto las carpetas
src
ydist
con el archivoapp.js
dentro de cada una, luego ejecuta browserify de la siguiente manera para que tu js original que se encuentra en la carpetasrc
se guarde modificado en la carpetadist
browserify src/app.js -o dist/app.js
Enlaza el archivo 'Browserificado' en tu .html
<script src="dist/app.js"></script>
En tu archivo .js principal pega el siguiente código
var cardify = require('cardify');
Finalmente, recuerda poner tus imagenes dentro de una etiqueta contenedora con clase
cardify
y asignarle el atributoalt
como en el siguiente ejemplo.<div class='cardify'> <img src='https://pbs.twimg.com/media/ClFixn2UoAA85OZ.jpg' alt='Osito'> </div>
Ten en cuenta que el comando browserify src/app.js -o dist/app.js
del paso número 3 deberás repetirlo cada vez que actualices el plugin desde tu terminal
Y listo! ya estás preparado para usar cardify.
Ejemplo
Demo
Herramientas
Producción:
- jquery: 3.3.1
Desarrollo:
- browserify: 15.2.0
- chai: 4.1.2
- mocha: 5.0.0
- eslint: 4.16.0
- babel-cli: 6.26.0
- babel-preset-env: 1.6.1
- jsdom: 11.6.1