About the zoom

QUICKzoom is a jQuery plugin to provide a sleek and customisable way to enlarge image thumbnails.

At the time of writing it is only in it's first release and still needs user and browser testing. If you've found a bug or have a feature request, head over to louis-sawtell.com and leave a comment.

The QUICKzoom plugin has been so far tested on..(in OS X)

Firefox 3.6.4
Chrome 10.0.648.127
Safari 5.0.3
Opera 11.01

Due to z-index issues with IE 6 and 7, gallery use of QUICKzoom may not behave as desired

It's Ease-y

...Sorry, terrible joke, but it is a simple process to change the easing effects with thanks to the easing plugin

Simply add the ease option in the function call, find out more.

Some examples:

<script type="text/javascript">
...
 easeIn: 'easeInOutBack', 
 easeOut: 'easeOutElastic',
 titleInEase: 'easeOutBounce',
 titleOutEase: 'easeInSine'
...
</script>

Troubleshooting

Having some problems getting the plugin to work?

Make sure you have included the latest jQuery library (before any other plugins).
Are you using an ease from the easing plugin? Make sure the plugin is included too.
Double check your spelling and syntax...I can get stuck for aaages because of a misplaced lettre !!
Try removing all custom options from the function call.
Is there a conflict with another js library? Change the first line to:
jQuery(document).ready(function($) {...});
Getting funny dimensions? Make sure they are defined in your CSS
Images are stuck behind others? z-index needs a position to work

The HTML

<ul class="quickZoom">

  <li><img src="images/1.jpg" alt="title" />

    <span>An example title</span></li>

  <li><a href="#"><img src="images/2.jpg" alt="title" /></a>

    <span>An image as a link</span></li>

  <li><img src="images/3.jpg" alt="title" />

    <span><a href="#">A title as a link</span></a></li>

</ul>

Note: The image and wrapper (<li> in this case) must have their dimensions defined as the same values, i.e.

.qZoom li, .qZoom img {width:100px; height:100px;}

The Javascript

<script type="text/javascript">
  $(document).ready(function() {
    // speed up the code by using an ID
    $('#divID .quickZoom li').quickZoom({
      zoom: 2,
      speedIn:500,
      speedOut: 200,
      easeIn:'easeOutBack',
      titleInSpeed: 200,
    });
  });
</script>

Having some trouble?

Plugin Usage

Option

zoom:
speedIn:
speedOut:
easeIn:
easeOut:
titleInEffect:
titleInSpeed:
titleInEase:
titleOutEffect:
titleOutSpeed:
titleOutEase:
sqThumb:
shadow:

Defaults

2
500
400
'swing'
'swing'
'slide'
200
'swing'
'fade'
400
'swing'
false
true

Description

The number of times the thumbnail is magnified (2 = 200%, 1.1 = 110%)
The speed in miliseconds for the zoom in animation, use numbers or 'slow', 'medium', 'fast'
The speed in miliseconds for the zoom out animation, use numbers or 'slow', 'medium', 'fast'
The timing of the animation - without the easing plugin, only 'swing' and 'linear' are valid
The timing of the animation - without the easing plugin, only 'swing' and 'linear' are valid
The effect that the title appears using. Options are 'slide' or 'fade'
The speed in ms for the title animation. 'slow', 'medium' or 'fast' are also valid
The timing of the animation - without the easing plugin, only ‘swing’ and ‘linear are valid
The effect that the title disappears using. Options are ’slide’ or ‘fade’
Speed in miliseconds for the OutEffect to take place.
The timing of the titleOutEffect.
A boolean. Set true if the thumbnail doesn't represent the image aspect ratio
A boolean, set false if you don't want a outer shadow on zoom (CSS 3)

Demo Time!

This is an example title
If you put in a really long caption it will extend within the picture across multiple lines
You can also add a line
break if you want multiple lines
You can put the image into a link
You can also put a link in the caption
What are you waiting for?
Download below!

Thank You!