A jQuery JavaScript plugin for expanding images vertically in articles.
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.
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>
</article>
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);
}
});
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);
See the css and img folders for stylesheet and image resources required
by the plugin.
See index.html file in the demo folder or
http://en.ig.ma/projects for examples.
Read more at http://en.ig.ma/notebook/2011/jquery-expandme-plugin.
The source code is on GitHub and BitBucket. Grab it from there or download latest zipped code.