Zoommy, A Stylish Image Zooming JavaScript

Posted by Yoshimasa Niwa on 02/05, 2009

Today, I release a new image zooming javascript “Zoommy” which already I use on this webpage. Zoommy automatically makes a normal anchor tag into a stylish, delicious and fashionable zoom interface which you can see somewhere on the web!

Zoommy is tested and works on Safari, Firefox, IE7 and IE6 on both MacOS X and Windows. Zoommy was strongy inspired from Apple webpage and FancyZoom. You can use this as an alternative of Lightbox.js!

Demo

Zoommy automatically change the next code into a delicious image link! (zoomminizing!)

<a href="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a.jpg">
  <img src="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a_s.jpg" />
</a>

In addition, Zoommy also automically change the images chain into a slideshow gallery!

<a href="http://farm3.static.flickr.com/2337/2457818492_fd9f9b7f0f.jpg" rel="zoommy['mySlideShow']" title="Montmartre, Paris, France">
  <img src="http://farm3.static.flickr.com/2337/2457818492_fd9f9b7f0f_s.jpg" />
</a>
<a href="http://farm3.static.flickr.com/2411/2458159794_84884f683b.jpg" rel="zoommy['mySlideShow']" title="Raffles Hotel, Singapore">
  <img src="http://farm3.static.flickr.com/2411/2458159794_84884f683b_s.jpg" />
</a>
<a href="http://farm3.static.flickr.com/2106/2483739956_89be523894.jpg" rel="zoommy['mySlideShow']" title="Karuizawa, Nagano, Japan">
  <img src="http://farm3.static.flickr.com/2106/2483739956_89be523894_s.jpg" />
</a>

Download

zoommy-0.1.0.zip (95Kbyte)

Getting Started

Copy dependencies into your web site

Zoommy depends on Prototype.js version 1.6.x and script.aculo.us version 1.8.x. If your website already use these libraries, like a Ruby on Rails project, These files does not need to copy. Sorry that Zoommy is currently incompatible Prototype.js version 1.5.x, please check your version of prototype.js.

javascripts/prototype.js
javascripts/effects.js
Copy next files into your web site
images/zoommy
javascripts/zoommy.js

For your imformation, zoommy.js is compacted script, zoommy_pack.js is more compacted one and zoommy_src.js is original script before compaction.

Adding include tags to your web pages’ header

The tag for prototype.js and effects.js does not need if they are already there.

    <head>
    ....
    <script type="text/javascript" src="javascripts/prototype.js"></script>
    <script type="text/javascript" src="javascripts/effects.js"></script>
    <script type="text/javascript" src="javascripts/zoommy.js"></script>
    ....

Additional configuration if needed

If you want to use the paths for images used in Zoommy(files coped in previous section 2) as your own relative path, You should put the next tag into header of each html page. imagePath option should be relative pafh from the html or site wide absolute path to the images.

    <head>
    ....
    <script type="text/javascript">
    zoommy_config = {imagePath: 'relative/path/to/zoommy/image/from/html'};
    </script>
    ....

All done, then open your web page!

Customize

Adding a title

You can show the title of image when zooming. Just adding the title=”(title of image)” attribute to the anchor tag.

<a href="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a.jpg" title="Blue sky and Sunshine!!">
  <img src="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a_s.jpg" />
</a>

Making slideshow galleries

Adding rel=”zoommy[’(name of slideshow)’]” attirbute to anchor tag, Zoommy groups images with same name and changes them into a slideshow gallery.

<a href="http://farm3.static.flickr.com/2337/2457818492_fd9f9b7f0f.jpg" rel="zoommy['travel around the world']">
  <img src="http://farm3.static.flickr.com/2337/2457818492_fd9f9b7f0f_s.jpg" />
</a>
<a href="http://farm3.static.flickr.com/2411/2458159794_84884f683b.jpg" rel="zoommy['travel around the world']">
  <img src="http://farm3.static.flickr.com/2411/2458159794_84884f683b_s.jpg" />
</a>
<a href="http://farm3.static.flickr.com/2106/2483739956_89be523894.jpg" rel="zoommy['travel around the world']">
  <img src="http://farm3.static.flickr.com/2106/2483739956_89be523894_s.jpg" />
</a>

Excluding from Zoomminize

You can keep the anchors without Zoommy by adding rel=”nozoommy” attribute to the tags.

<a href="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a.jpg" target="_blank" rel="nozoommy">
  <img src="http://farm4.static.flickr.com/3033/2457505175_37b8fffc2a_s.jpg" />
</a>

Disabling Zoommy badges

As default, Zoommy add zoom badges to the thumbnail images inside the anchor tags on the top left corner. You can strip these badges by adding noBadge: true option to the configuration code inside head tag.

<head>
....
<script type="text/javascript">
zoommy_config = {
    noBadge: true
};
</script>
....

Adjusting Z-Index of Zoommy

If you want to use Zoommy with another fancy scripts or libraries, you may adding the baseZIndex option to the configuration code for specification the Z-Index ordering. Default bottom, base Z-Index Zoommy uses are 900.

<head>
....
<script type="text/javascript">
zoommy_config = {baseZIndex: 10000};
</script>
....

FAQ

1. Some anchor tag doesn’t not change into Zoommy? Why?
Zoommy changes the anchor tags which href attribute ends with “.png”, “.gif”, “.jpg” or “.jpeg”, or which rel attribute start with “zoommy”. This means that you may add rel=”zoommy” to anchor tag if its href attribute doesn’t end with these extensions like CGI.
```
<a href="/path/to/image?var=value" rel="zoommy">
  <img src="/path/to/thumbnail" />
</a>
```

Change log

1.0.1
- First release.

Donation

If you would like to help the Zoommy project, please feel free to donate via PayPal using the followin form. Thank you for your donation!

Support the Zoommy

Source Code

Now, I publish this project in open source. You can get the whole source code from my github repository.

License

Zoommy is under MIT License.

yoshimasa niwa