cardify
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
Last updated 2 years ago by pazautumn .
ISC · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install cardify 
SYNC missed versions from official npm registry.

GitHub issue age

Cardify Build Status

cardify version autores

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');
  1. Para que el plugin funcione primero debes inicializar tu proyecto en la terminal con el comando

    npm init

  2. Descargar cardify desde tu terminal con el comando

    npm install cardify

  3. 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 y dist con el archivo app.js dentro de cada una, luego ejecuta browserify de la siguiente manera para que tu js original que se encuentra en la carpeta src se guarde modificado en la carpeta dist

    browserify src/app.js -o dist/app.js

  4. Enlaza el archivo 'Browserificado' en tu .html

    <script src="dist/app.js"></script>

  5. En tu archivo .js principal pega el siguiente código

    var cardify = require('cardify');

  6. Finalmente, recuerda poner tus imagenes dentro de una etiqueta contenedora con clase cardify y asignarle el atributo alt 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

Ejemplo Cardify

Demo

alt text

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

Current Tags

  • 1.5.5                                ...           latest (2 years ago)

11 Versions

  • 1.5.5                                ...           2 years ago
  • 1.4.5                                ...           2 years ago
  • 1.3.5                                ...           2 years ago
  • 1.2.5                                ...           2 years ago
  • 1.2.4                                ...           2 years ago
  • 1.2.3                                ...           2 years ago
  • 1.2.2                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
  • 1.1.1                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 1
Last Day 0
Last Week 0
Last Month 1
Dependencies (5)
Dev Dependencies (4)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |