jShutterBox plugin for some cool animation + content display, together


jShutterBox is a jQuery plugin I have developed two or three months ago. But I didnt release it because It was complex and users had to supply content for every animated images. Though it was ok with me that time, but last week I thought that I could make it even simpler to use. For example, just a &ltdiv> containing an image and an anchor can be converted into an animated content box :)

to use jShutterBox is simple. Just download the package from Box.net, include jshutterbox.js in your page, and run the following code :)

<div class="animated">
    <img src="http://scripts.ofhas.in/jshutterbox/images/image2.jpg"/>
    <a href="http://leevio.com" title="Leevio">Welcome to Leevio</a>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        $(".animated").jShutterBox({slide:"random"});
    });
</script>

You can configure other options, like “height”, “width”, “duration”, “borderWidth”, “borderColor”, “slide”. You can pass “random” as a value of “slide” to see the random animation. You can also specify any value of the “up,”down”,”left”,”right”,”up-left”,”up-right”,”down-left”,”down-right”for “slide” to see any specific animation too :)

You can view the demo at http://scripts.ofhas.in/jshutterbox/demo.html

I hope you will like it :) – by the way, this plugin depends on jQuery Easing plugin.

Download jShutterBox from DropBox

Shameless Note :) : By the way, if you are looking for a beautiful Admin Panel Theme for your PHP based projects/web-applications, you may want to check out Chameleon Circuit, which is developed by our Themio Team :)

About these ads

4 thoughts on “jShutterBox plugin for some cool animation + content display, together

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s