imageReveal Example

by JThomas

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<div class="img-gallery">
    <img id="a" src="http://placekitten.com/g/150/150" alt="" title="Example 1" data-content="Some Text to display on slide up/down" />
    <img id="b" src="http://placekitten.com/g/175/175" alt="" title="Example 2" data-content="<ul><li>Item 1</li><li>Item 2</li></ul>" />
    <img id="c" src="https://placekitten.com/g/150/150" alt="" title="Example 3" data-content="<ul><li>Item 3</li><li>Item 4</li></ul>" />
    <img id="d" src="http://placekitten.com/g/200/300" alt="" title="Example 4" data-content="<ul><li>Item 5</li><li>Item 6</li></ul>" />
    <img id="e" src="http://placekitten.com/g/150/150" alt="" title="Example 5" data-content="<ul><li>Item 7</li><li>Item 8</li></ul>" />
</div>

CSS

.img-gallery .ui-imageReveal-widget {
    float: left;
    margin: 5px;
}

/* imageReveal CSS */
 .ui-imageReveal-widget {
    overflow: hidden;
    position: relative;
    background-color: #000;
}
.ui-imageReveal-widget:before {
    content:'?';
    position: absolute;
    right: 0;
    margin: 5px;
    padding: 5px 10px;
    border-radius: 50%;
    background-color: #ccc;
    opacity: 0.7;
    font-weight: bold;
}
.ui-imageReveal-widget:hover:before {
    display: none;
}
.ui-imageReveal-overlay {
    position: relative;
    margin: 0;
    padding: 0;
    top: 0;
}
.ui-imageReveal-title {
    font-size: inherit;
    padding: 5px 0;
    margin: 5px 0;
    background-color: #fff;
    display: block;
    text-align: center;
    font-size: 1.5em;
}
.ui-imageReveal-content {
    font-size: inherit;
    color: #fff;
    padding-top: 10px;
}

JavaScript

$(function () {
    $("img").imageReveal();
});

(function ($) {
    $.widget("ui.imageReveal", {
        version: "@VERSION",
        options: {
            height: "auto",
            width: "auto",
            opacity: 0.5,
            duration: 400,
            title: "",
            content: ""
        },

        _parent: null,

        _overlay: {
            wrapper: null,
            title: null,
            content: null
        },

        _create: function () {
            this._setOptions();
            this._createElements();
            this._wireHover();
        },

        _destroy: function () {
            this._overlay.wrapper.remove();
            this._overlay = {
                wrapper: null,
                title: null,
                content: null
            }
            this.element.attr("title", this.options.title);
            this.element.unwrap();
            //Remove events from the element 
        },

        destroy: function () {
            this._destroy();
        },

        _setOptions: function () {
            var e = this.element;

            //Check if the title and data-content attributes have value, if they do, use them
            if (e.attr("title")) {
                this.options.title = e.attr("title");
                e.attr("title", "")
            }
            if (e.attr("data-content")) this.options.content = e.attr("data-content");

            //Check if the height and width property is set to auto, if it is read the source element and get values from it
            if (this.options.height == "auto") this.options.height = e.height();
            if (this.options.width == "auto") this.options.width = e.width();
        },

        _createElements: function () {
            this._createParent();
            this._createOverlay();
        },

        _createParent: function () {
            var e = this.element;

            e.wrap("<div></div>");

            this._parent = e.parent();
           ...