JavaScript Library For Image Caption Generator – Captionify

Category: Image , Javascript | August 13, 2015
Author:bolatovumar
Views Total:554 views
Official Page:Go to website
Last Update:August 13, 2015
License:MIT

Preview:

JavaScript Library For Image Caption Generator – Captionify

Description:

Captionify is a standalone JavaScript library to easily and semantically add captions to images.

Basic usage:

Load the Captionify’s CSS and JavaScript in the html page.

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

By default, the Captionify will generate image captions from img’s src attribute. You can also add custom captions and links to your images using HTML5 data-* attributes.

<img data-caption="Image Caption" 
     data-link="https://cssscript.com" 
     src="demo.jpg" alt="Image Alt"
>

Generate an image caption bar over the image.

captionify({dataCaption: true});

Default options.

// 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

You Might Be Interested In:


Leave a Reply