jQuery ExpandMe plugin

A jQuery JavaScript plugin for expanding images vertically in articles.

Description

This is a very simple plugin that can be useful when putting large images (i.e. website screenshots) inside articles.

An image can occupy full width of an article while only the top part of it is visible. An expand/collapse bar at the bottom of the image view expands the image container vertically making the image fully visible:

Click me to expand/collapse.

Usage

Assume we have an article with embedded image inside .expandme wrapper and defined stylesheet similar to the one in jquery.expandme\css\expandme.css.

<article>
    <div class="expandme" style="height: 440px;">
        <img src="image.jpg" />
        <a href="#" class="expand-toggle"></a>
    </div>
</erticle>

Then the corresponding JS bit is:

$('.expandme').expandme();

The plugin can also take callbacks so for example you may want to scroll to article top when collapsing an image:

$('.expandme').expandme({
    onBeforeCollapse: function(settings){
        var $elem = $(this); // Expandable
        // requires scrollTo plugin
        $.scrollTo($elem.parents('article'), settings.speed);
    }
});

Options

All available plugin settings:

var settings = $.extend({
    height: null,                    // Initial height of image (usually specified in css)
    speed: 500,                      // Expansion/collapsing speed
    expandEasing: 'swing',           // Expand easing for jQuery animate
    collapseEasing: 'swing',         // Collapsing easing for jQuery animate
    activeClass: 'active',           // Class added to expanded element
    expandToggleClass: 'expand-toggle', // Class for anchor element that triggers expand action
    onBeforeExpand: null,            // Function to call before expanding
    onAfterExpand: null,             // Function to call after expanding
    onBeforeCollapse: null,          // Function to call before collapsing
    onAfterCollapse: null,           // Function to call after collapsing
    contentSelector: 'img',          // jQuery selector string of full-height content element
    namespace: 'expandme'            // Plugin data namespace
}, options);

Resources

See the css and img folders for stylesheet and image resources required by the plugin.

Demo

See index.html file in the source code demo folder or http://en.ig.ma/projects for examples.

Download

The source code is on GitHub and BitBucket. Grab it from there or download latest zipped code.