Menu ▾ ▴

Documentations

Syuaa SE

ZoomSE Documentations

About

ZoomSE is an image zoomer plugins for jQuery. It is always simple and easy to use. Customizable and still lightweight.

Usage

Download source.

Add jQuery.js ( tested on jQuery 1.5.1 ), and ZoomSE.js or ZoomSE.min.js to your path and add them in your HTML :

<script type="text/javascript" src="path/to/jQuery.js"></script>
<script type="text/javascript" src="path/to/ZoomSE.js"></script>

Add same image(s) :

<img src="spongebob.jpg" alt="Spongebob" id="spongebob"/>

If you want to use default style zooming by ZoomSE, just call ZoomSE to your image : 

<script type="text/javascript">
    $("#spongebob").ZoomSE();
</script>

Or you can use your own options : 

<script type="text/javascript">
    $("#spongebob").ZoomSE({
        // any options here
    });
</script>

Options

  • width, Integer, Default 20%.
    (int)px to resize image width to (int)px.
    (int)% to increase image width by (int)%.
  • height, Integer, Default 20%.
    (int)px to resize image height to (int)px.
    (int)% to increase image height by (int)%.
  • speed Integer|Const, Default "fast".
    Any integer, String "fast", String "slow".
  • afterZoomIn( jQuery ), Function.
    Function to execute after zoom in.
    Parameter 1 : Object jQuery current image.
  • afterZoomOut( jQuery ), Function ].
    Function to execute after zoom out.
    Parameter 1 : Object jQuery current image.
  • ZoomInStyle, Object.
    Image style after zoom in. This is Array Object. Image will keep this style on zoom out, so you will neet to redeclare style on zoom out.
  • ZoomOutStyle, Object.
    Image style after zoom out. This is Array Object. Image will keep this style on zoom in, so you will neet to redeclare style on zoom in.
  • caption, Boolean. Default false.
    Show image caption. True to show image caption. Caption taken from alt image attribute.
  • captionStyle, Object.
    Custom style for image caption. This is Array Object.
  • captionAnimIn( jQuery ), Function.
    Custom animation to show caption, default is just appear without any animation. Default css image caption is display: none;, your function need to show them up.
    Parameter 1 : Object jQuery current image caption.
  • captionAnimOut( jQuery ), Function.
    Custom animation to hide caption, default is just disappear without any animation. Your function need to hide them by set caption style to display: none;.
    Parameter 1 : Object jQuery current image caption.

License

ZoomSE is released under the MIT license.

Contribute

I've no idea for this. Just tell me if you want to contribute what ever you want.
You may want to fix same bug, or creating logo for this simple ZoomSE or creating demo page, or and more another 'or'.

Demo

http://demo.syuaa.net/ZoomSE/

MongoDB Logo MongoDB