Biblioteca de JavaScript para la imagen del generador de subtítulos-Captionify

Vista prévia

Descripción

Captionify es una biblioteca independiente de JavaScript para agregar subtítulos a las imágenes de forma sencilla y semántica.

¿Cómo funciona?

Cargue el CSS y JavaScript de Captionify en la página HTML.

<script src="captionify.js"></script>
<link rel="stylesheet" href="captionify.css">

De forma predeterminada, Captionify generará leyendas de imagen a partir del atributo src de IMG. También puede agregar subtítulos personalizados y vínculos a las imágenes mediante atributos de datos * de HTML5.

<img data-caption="Image Caption"



data-link="https://wikicss.com"



src="demo.jpg" alt="Image Alt"
>

Genere una barra de título de imagen sobre la imagen.

captionify({dataCaption: true});

Opciones predeterminadas.

// pass in a tag (like article), a class ( like .content) or id (like #images)
containerSelector: "body",

 // set to true if you would like to use a 'data-caption' attribute for captions instead of the default 'alt' attribute
dataCaption: false,

 // default class for the <figure> tag
figureClass: "imgFigure",

 // default class for the <figcaption> tag
figcaptionClass: "imgFigure__caption",

 // pass in a class name of images which you would like to caption
imgClassSelector: "",

 // <figure> tag will inherit any direct styling (i.e., inline CSS) of its contained <img>.
//
Set to false to disable this behaviour
inheritStyles: true,

 // overlay | bottom
mode: "overlay",

 // sets the container width to the image width if it contains an explicit width attribute. Set to false to disable this behaviour
setFigureWidth: true