https://github.com/nigma/jquery-expandme

Small jQuery plugin for expanding images and other content in articles.
https://github.com/nigma/jquery-expandme

Last synced: 11 months ago
JSON representation

Small jQuery plugin for expanding images and other content in articles.

• Host: GitHub
• URL: https://github.com/nigma/jquery-expandme
• Owner: nigma
• License: mit
• Created: 2011-12-02T16:22:06.000Z (over 14 years ago)
• Default Branch: master
• Last Pushed: 2011-12-02T20:21:17.000Z (over 14 years ago)
• Last Synced: 2025-04-04T01:23:44.261Z (about 1 year ago)
• Language: JavaScript
• Homepage: http://en.ig.ma/notebook/2011/jquery-expandme-plugin
• Size: 137 KB
• Stars: 5
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 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.

## 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``.

    

        


            

            

        

    


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 demo folder or

[http://en.ig.ma/projects](http://en.ig.ma/projects) for examples.

Read more at [http://en.ig.ma/notebook/2011/jquery-expandme-plugin](http://en.ig.ma/notebook/2011/jquery-expandme-plugin).

## Download

The source code is on [GitHub](https://github.com/nigma/jquery-expandme)

and [BitBucket](https://bitbucket.org/nigma/jquery-expandme). Grab it from there

or download latest

[zipped code](https://github.com/nigma/jquery-expandme/zipball/master).