imgPreview demos

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.

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;
}