KoalaZoom jQuery Plugin v1.0

Posted on 05/15/10 10 Comments

KoalaZoom jQuery Plugin Logo
This plugin makes images in an unordered list to zoom in on mouse hover and displays relative information.

KoalaZoom was created in just a few hours. I’m planning on adding more effects and options in the next version.
KoalaZoom

Demos

Have a look at the demos to get an idea of how the KoalaZoom plugin works and see the different effects and options in action.

Usage

To use KoalaZoom you have to include the jQuery library and the KoalaZoom script your page:

Next you need to create an unordered list with your images and a div containing the info you want to display
 <ul id="koalalist">
    <li>
        <div>Item 01</div>
        <img src="images-01.jpg" alt="Image 01" width="150" height="150" />
    </li>
    <li>
        <div>Item 02</div>
        <img src="images-02.jpg" alt="Image 02" width="150" height="150" />
    </li>
    <li>
        <div>Item 03</div>
        <img src="images-03.jpg" alt="Image 03" width="150" height="150" />
    </li>
 </ul>
Finally you need to hook up your script using the $(document).ready() function:
		
Bellow are all the available options with their default values:
    
The effect parameter can be any of the following:
  • slideup
  • slideright
  • slideleft
  • flydown

CSS

You can style the list as you wish, there is a catch though. You MUST set the height and top of the div.
    #koalalist li div {
        width: 100%;
        top: 130px;
        height: 20px;
    }

Download

The archive contains a packed and an unpacked version of the KoalaZoom plugin: jquery.koalazoom_v1.js.tar.gz

9 Comments

  1. Hernan Silva says:
    Wednesday, May 26, 2010 at 11:52am

    VERY nice. Thanks mate.

  2. sam says:
    Tuesday, August 3, 2010 at 1:10pm

    hey ! it’s nice –
    need to know can we apply panning effect as wel ? with changing zoomy icons?

    thanks

  3. JNik says:
    Tuesday, August 3, 2010 at 6:09pm

    At the moment the only effect available for the images is zoom. Thus the name (Koala Zoom).

    I’m working on two other plugins at the moment, so it gonna be some time before KoalaZoom gets updated with new effects.

  4. Katja says:
    Tuesday, October 12, 2010 at 11:06am

    Hi, this plugin looks really great. How would you achieve an effect similar to http://spdaustin.com where zoomed images expand BEYOND their container? I think it’s quite simple to achieve with your plugin.
    This feature is requested at http://jqueryfordesigners.com (at http://www.google.com/moderator/#15/e=27a0f&t=27a0f.40), so maybe you can share?
    Thanks in advance!

  5. Martin G says:
    Sunday, July 17, 2011 at 2:45am

    Hey great plugin!

    Can you use any size image for this or does it have to be square?

    Thanks

  6. JNik says:
    Sunday, July 17, 2011 at 2:32pm

    Thanks Martin.

    The plugin should work with any size of image.

  7. Diego Keller says:
    Thursday, September 22, 2011 at 8:03pm

    Nice plugin!
    Great job!

  8. dlestarter says:
    Monday, October 22, 2012 at 11:33pm

    awesome!

  9. Bogdan says:
    Thursday, September 26, 2013 at 9:08am

    Very cool

One Trackback

  1. [...] Read more about this plugin at John’s blog. [...]

Post a Comment

Your email is never published or shared. Required fields are marked *