Jquery CSS Tutorial on Zooming Image

Jquery CSS Tutorial on Zooming Image

8 115565

Today I will tell you about another one useful tool of JQuery – Zoomimage plugin. It allow to reach different design ideas with images resizing.

Features

  • Preloads images
  • The images can by grouped in galleries
  • Scales the image to fit the viewport
  • Keyboard gallery navigation

As example, we want to animate list of your members or your image gallery.

Live Demo

The HTML

Here are sources of all 5 samples. As you notice – we having simple unordered list, they all quite same, only have different ‘id’ attribute.

<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example1"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example1"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example1"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example1"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example1"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>
<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example2"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example2"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example2"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example2"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example2"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>
<p>
    <a href="images/demo1_1.jpg" title="Seashell" class="example3"><img src="images/th_demo1_1.jpg" alt="Seashell" /></a>
    <a href="images/demo1_2.jpg" title="Chain" class="example3"><img src="images/th_demo1_2.jpg" alt="Chain" /></a>
    <a href="images/demo1_3.jpg" title="Coins" class="example3"><img src="images/th_demo1_3.jpg" alt="Coins" /></a>
    <a href="images/demo1_4.jpg" title="Ice" class="example3"><img src="images/th_demo1_4.jpg" alt="Ice" /></a>
    <a href="images/demo1_5.jpg" title="Grass" class="example3"><img src="images/th_demo1_5.jpg" alt="Grass" /></a>
</p>

Attaching CSS

I attached 2 external CSS files

<link rel="stylesheet" media="screen" type="text/css" href="zoomimage.css" />
<link rel="stylesheet" media="screen" type="text/css" href="custom.css" />

zoomimage.css, custom.css


Adding JQuery

I attached 3 external JS files

<script type="text/javascript" src="eye.js"></script>
<script type="text/javascript" src="utils.js"></script>
<script type="text/javascript" src="zoomimage.js"></script>

And here are additional initialization code

<script type="text/javascript">
(function($){
        var initLayout = function() {
                // example 1
                $('a.example1').zoomimage();
                // example 2
                $('a.example2').zoomimage({
                        border: 20,
                        centered: true,
                        hideSource: true
                });
                // example 3
                $('a.example3').zoomimage({
                        controlsTrigger: 'mouseover',
                        className: 'custom',
                        shadow: 40,
                        controls: false,
                        opacity: 1,
                        beforeZoomIn: function(boxID) {
                                $('#' + boxID)
                                        .find('img')
                                        .css('opacity', 0)
                                        .animate(
                                                {'opacity':1},
                                                { duration: 600, queue: false }
                                        );
                        },
                        beforeZoomOut: function(boxID) {
                                $('#' + boxID)
                                        .find('img')
                                        .css('opacity', 1)
                                        .animate(
                                                {'opacity':0},
                                                { duration: 600, queue: false }
                                        );
                        }
                });
        };
        EYE.register(initLayout, 'init');
})(jQuery)
</script>

Step 4. Images and cursors

Also we need several images and cursors for these demos:

        loading
        custom-lr
        loading
        shadow-c
        shadow-lr
        shadow
        zoomimage_next
        zoomimage_prev
        demo1_1
        demo1_2
        demo1_3
        demo1_4
        th_demo1_1
        th_demo1_2
        th_demo1_3
        th_demo1_4

zoomin.cur, zoomout.cur


For developers. Customization.

Sure that it will useful too

Invocation code

All you have to do is to select the elements in a jQuery way and call the plugin.

 $('a.myLinks').zoomimage(options);

Options

A hash of parameters. All parameters are optional.

Opacity float The opacity for the caption and controls. Default: 0.3
border integer Image’s border. Default: 0
duration integer Animation duration. Default 300
easing string Animation easing. Default: linear
prevent integer Pixes to move the mouse before the images is dragged (prevents accidental dragging). Default: 14
controls boolean Whatever if the controls are displayed (if the image is not part of an library then the controls are not displayed). Default: true
caption boolean Whatever if the caption is displayed (the caption text is the text from ‘title’ atribute. Default: true
centered boolean Whatever if the image should be centered in the viewport or relative to the trigger. Default: false
hideSource boolean Whatever to hide source when the image is opened. Default: false
className string CSS class to apply to the image’s box. Default: false
controlsTrigger string ‘focus’ to show caption and controls when the box is focused or ‘mouseover’ to show controls and caption on mouse over. Default: ‘focus’
preload string ‘click’ to preload the image when the trigger is clicked or ‘load’ to preload the image on document load. Default: ‘click’
onLoad function Callback function triggered when the image was loaded
beforeZoomIn function Callback function triggered before the image is zoomed in
onZoomIn function Callback function triggered when the image is zooms in
beforeZoomOut function Callback function triggered before the image is zoomed out
onZoomOut function Callback function triggered when the image is zooms out
onFocus function Callback function triggered when the image is focused

Close all images and clear orphans

If you want to close all openend images or clear images without triggers (remvoed from DOM) then you can use ‘zoomimageClear’. The selection for this plugin should always be ‘div.zoomimage’.

$('div.zooimage').zoomimageClear();
Live Demo

[sociallocker]

download in package

[/sociallocker]

SIMILAR ARTICLES


8 COMMENTS

  1. …. another cool jQuery tutorial about making a zooming image plug-in !! Thanks Ayaz for the share !!

    • Hi vinod,
      Try to update both: jQuery library and the plugin itself. They might updated it for the latest jquery version.

  2. $(document).ready(function()
    {
    $(‘#image’).click(function()
    {
    $(‘#image’).animate({ width: ‘800px’ , height: ‘700px’ });
    });

Leave a Reply to Hermitbiker Cancel reply