Installation

Include the both the jQuery and REMARK jQuery plugin. jQuery and remake.min.js using script html element(s), like so:

    <link rel="stylesheet" href="css/remark.css" type="text/css" />

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/remark.min.js"></script>

* Notice the jQuery library I included was google code library, I recommend using latest version.
* remark.css is optional. But u can use it for your custom style. It contains the plugin css structure

Creating Remark

<img src="1.jpg" id="remark-it" alt="Title..." data-description="Desc...">

<script>
$(function(){
    /* Options are optional. */
    $("#remark-it").remark( [ {options} ] );
});
</script>

Configuration

Options Data-* Type Default Description
remark data-remark String headline Only "credit" or "headline" values are available for changing it's mode.
alignment data-alignment String bl The Alignment is determines Caption and Descriptions position. Supported values: 'bl', 'br', 'bc', 'tl', 'tr', 'tc', 'cc'. 'cc' is not supported in "Credit" mode
padding data-padding Number/String 10 It is determines Padding size. You can use the following. "10px 0 5px 2px" etc just like as css coding
color data-color HEX Color code #FFFFFF Base text color. But it will work only in "Headline" mode. "Credit" mode's text color is inherite. It must be Full HEX color code.
caption data-caption String '' It'll get value from title attribute if you didnt set it's value. If title attribute is not available it will get from alt attribute. Anyway you should set it's value.
capColor data-cap-color HEX Color code null Caption's text color
capSize data-cap-size Int/String null Caption's font-size. Number or "1em" and "15px" etc...
capTransform data-cap-transform String null Caption's text-transform. 'uppercase', 'lowercase', 'capitalize', 'normal'
capLineHeight data-cap-line-height Int/String 1em Caption's line-height. Number or "1.4em" and "15px" etc...
capClass data-cap-class String '' Caption element's additional css class name.
description data-description String null Description. It is optional
descColor data-desc-color String null Description's text color
descSize data-desc-size Int/String 0.9em Description's font-size. Number or "1em" and "15px" etc...
descLineHeight data-desc-line-height Int/String null Description's line-height. Number or "1em" and "15px" etc...
descClass data-desc-class String '' Description element's additional css class name.
shade data-shade Bool/String true The Shade. You can set string value or false. false is disable shade. And string value will be shade's custom css class name.
shadeAlpha data-shade-alpha Number/Object [0.7, 0] Shade gradient's background color alpha. You can set many values in that object [0,0,0,0,1] etc...
shadeColor data-shade-color String/Object #000000 The Shade's background color code(s). You can set many values in that object [#ff6600,$ff0000,#000000] etc... But i recommended you to shadeAlpha and shadeColor's length should be match.
whitelist data-whitelist String b,em,small,br Supported tag names for Caption and Description
width data-width Integer 100 Caption and Description area width in percent
zIndex data-z-index Integer 415 z-index.

REMARK Headline mode




Data-* attribute configurations

<img alt="BamDaa" src="1.jpg"
    class="img-responsive red-shade-remark"
    data-alignment="tl" 
    data-caption="I am the Plugin! I'll credit any images." 
    data-shade-color="#e74c3c" 
    data-cap-size="18" 
    data-description="Lorem ipsum dolor sit amet, 
        consectetur adipisicing elit. Eveniet, quod!"
    data-remark >

<script>
$(function(){
    $(".red-shade-remark").remark();
});
</script>

or Javascript configurations

<img alt="BamDaa" src="1.jpg" class="red-shade-remark" >

<script>
$(function(){
    $(".red-shade-remark").remark({
        alignment: 'tl',
        caption: 'I am the Plugin! I'll credit any images.',
        capSize: 18,
        shadeColor: '#e74c3c',
        description: 'Lorem ipsum dolor sit amet, 
            consectetur adipisicing elit. Eveniet, quod!'
    });
});
</script>

BamDaa


Data-* attribute configurations

<img alt="BamDaa" src="4.jpg"
    class="img-responsive blue-shade-remark"
    data-alignment="bl" 
    data-caption="Lorem ipsum dolor sit amet." 
    data-cap-size="24" 
    data-shade-color="#1abc9c" 
    data-cap-transform="uppercase" 
    data-description="Photo from Albumarium.com" 
    data-remark >

<script>
$(function(){
    $(".blue-shade-remark").remark();
});
</script>

or Javascript configurations

<img alt="BamDaa" src="4.jpg" 
    class="img-responsive blue-shade-remark" >

<script>
$(function(){
    $(".blue-shade-remark").remark({
        alignment: 'bl',
        caption: 'Lorem ipsum dolor sit amet.',
        capSize: 24,
        shadeColor: '#1abc9c',
        capTransform: 'uppercase',
        description: 'Photo from Albumarium.com'
    });
});
</script>

REMARK Credit mode

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas inventore enim possimus quam molestias dignissimos officiis reprehenderit autem quod odio aliquid, iusto nesciunt quaerat voluptatibus, quae perferendis, non maxime. BamDaa Veritatis molestiae, corporis sed sequi veniam animi vero eos iure natus, voluptate iste alias sapiente? Aut provident, blanditiis cupiditate molestias. Quam temporibus, et, sapiente, quae molestiae provident delectus praesentium esse distinctio impedit, laudantium veniam? Nemo nisi impedit quaerat, blanditiis omnis necessitatibus aspernatur, cupiditate id eius quidem laboriosam voluptas amet reprehenderit quos deserunt placeat, delectus quo.

BamDaa

Eius, possimus! Nisi modi dolore rerum illo obcaecati voluptatibus assumenda illum ullam, unde, eos nam maiores delectus suscipit harum ad facilis tenetur accusamus placeat repellendus. Sit obcaecati animi laudantium harum, quos? Illum consectetur qui maxime eaque possimus id aut, laborum labore, fugiat odio, nulla nostrum.

Data-* attribute configurations

<img alt="BamDaa" class="img-responsive" src="7.jpg" 
    title="An Aspiring Mountain Range, New Zeland" 
    data-description="Photo by Chris Ford. Flickr.com" 
    data-padding="10px 0"
    data-remark="credit" >

<script>
$(function(){
    $("[data-remark]").remark();
});
</script>

But It will be builded from Editor at this moment

or Javascript configurations

<img alt="BamDaa" class="img-responsive" src="7.jpg" 
    title="An Aspiring Mountain Range, New Zeland" 
    data-remark >

<script>
$(function(){
    $("[data-remark]").remark({
        remark: 'credit',
        padding: '10px 0',
        description: 'Photo by Chris Ford. Flickr.com'
    });

    // If you build Remark using Redactor plugin. So you just do it.
    // No more configuration needed.
    $("[data-remark]").remark();
});
</script>

Custom Shade / The Custom Shades are available in Headline mode.

BamDaa

Customization config

You should set custom shade like as below.

<img  ... data-shade="custom-shade" ... >

--------------------OR-------------------------

$("#selector").remark({ shade: "custom-shade" });

"custom-shade" is css class name in this example.


So you can add your own custom Shade. And just set your class name to shade or data-shade option.

Custom Shade CSS

.remark-shade.custom-shade{
    background-color: rgba(26, 188, 156, 0.3);
    -webkit-transition: background 0.5s;
    transition: background 0.5s;    
}

.remark-shade.custom-shade::before,
.remark-shade.custom-shade::after
{
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity .35s, -webkit-transform .35s;
    transition: opacity .35s, transform .35s;
    pointer-events:none;
}

.remark-shade.custom-shade::before {
    border-top: 1px solid rgba(255,255,255,.7);
    border-bottom: 1px solid rgba(255,255,255,.7);
    -webkit-transform: scale(0, 1);
    transform: scale(0, 1)
}

.remark-shade.custom-shade::after {
    border-right: 1px solid rgba(255,255,255,.7);
    border-left: 1px solid rgba(255,255,255,.7);
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0)
}

.remark-shade.custom-shade:hover
{
    background-color: rgba(0, 0, 0, 0.5);
}

.remark-shade.custom-shade .remark-headline
{    
    -webkit-transition: all 0.5s;
    transition: 0.25s bottom ease-out;
}

.remark-shade.custom-shade:hover .remark-headline
{
    bottom: 5px !important;
}

.remark-shade.custom-shade:hover::after,
.remark-shade.custom-shade:hover::before {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1)
}