imgPreview demos

via Ad Packs

The 'imgPreview' plugin allows your users to preview an image before clicking on it and, out of necessity, will preload the image so when a user does click through to it there is no waiting time!

The image preview shows up in a tooltip-like box appearing alongside the user's cursor when hovering over a link. The plugin is entirely unobtrusive; it does not require any hooks to target specific links (no non-semantic classes); it will automatically detect the anchors that are linking to images and will only apply the preview effect to them.

There is now a screencast covering the creation of this plugin over here - the plugin has changed quite a bit since it's first version but it's still essentially the same.

For a more detailed overview of the plugin and documentation please visit this page: http://james.padolsey.com/javascript/new-jquery-plugin-imgpreview/.
To download the plugin please visit the page @ the jQuery plugin repository: http://plugins.jquery.com/project/imgPreview

JavaScript is required to view these demos.

Regular, no settings, no styles:

Hover over the links: (if the image doesn't show up straight away, don't worry, it's just loading)

Code:

$('ul#first a').imgPreview();

Regular, with limited width:

Code:

$('ul#second a').imgPreview({
    imgCSS: { width: 200 }
});

Fading + CSS Styles

Code:

$('ul#third a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        // Animate link:
        $(link).stop().animate({opacity:0.4});
        // Reset image:
        $('img', this).stop().css({opacity:0});
    },
    // When image has loaded:
    onLoad: function(){
        // Animate image
        $(this).animate({opacity:1}, 300);
    },
    // When container hides: 
    onHide: function(link){
        // Animate link:
        $(link).stop().animate({opacity:1});
    }
});

/* CSS: (StyleSheet) */

#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}

+ Title below image

Code:

$('ul#fourth a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        $('<span>' + $(link).text() + '</span>').appendTo(this);
    },
    // When container hides: 
    onHide: function(link){
        $('span', this).remove();
    }
});

/* CSS: (StyleSheet) */

#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}

/* Text below image */
#imgPreviewWithStyles span {
    color: white;
    text-align: center;
    display: block;
    padding: 10px 0 3px 0;
}

Website links + previews

Code:

Since the anchors are all linking to seperate websites we cannot retrieve the preview image from the 'href' attribute, so we get it from the 'rel' attribute instead:

<a href="http://google.com" rel="img/google.jpg">The Sun</a>

$('ul#fifth a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    /* Change srcAttr to rel: */
    srcAttr: 'rel',
    imgCSS: {
        // Limit preview size:
        height: 200
    },
    // When container is shown:
    onShow: function(link){
        $('<span>' + link.href + '</span>').appendTo(this);
    },
    // When container hides: 
    onHide: function(link){
        $('span', this).remove();
    }
});

/* CSS: (StyleSheet) */

#imgPreviewWithStyles {
    background: #222;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    padding: 15px;
    z-index: 999;
    border: none;
}

/* Text below image */
#imgPreviewWithStyles span {
    color: white;
    text-align: center;
    display: block;
    padding: 10px 0 3px 0;
}