Olof Törnqvist

Teknik

Teknik

Introducing jQuery Image Preview

I was looking for a jQuery plugin that could display a small preview of all links to images on a page. But I didn’t find any that did exactly what I wanted so I decided to write one myself. The goal was to apply the plugin to all links (to an image) on a page or all links inside one or more elements using jQuery selectors.

I wanted the image preview to look something like this when a user hovers over a link to an image:


And the syntax to achieve this would be like this:

$(“#images”).ImagePreview({
       // Options
   });

Some of the options I wanted to have was duration (to control fade-in and fade-out), offset (distance from the mouse pointer), size of the image, opacity, control the border size and looks and the option to add a drop shadow.

So today I'm happy to introduce the "jQuery Image Preview plugin" (yeah I know, I had absolutely no fantasy what so ever when I named my plugin).

Options / settings

Name

Default value

Description

duration 400 Control the duration of the fade-in and fade-out in ms
offset 15 The distance in pixels from the mouse pointer
imageWidth 80 The width of the preview image
opacity 0.8 Opacity of the predview, 0.8 = 80%
borderWidth 5 The inner border of the preview in pixels
borderColor '#dedede' Color of the inner border
outerBorder '1px solid #ccc' CSS for outer border
shadow '3px 3px 3px #444' CSS for drop shadow (the plugin adds CSS for moz-, webkit-browsers and also standard CSS3)
hideShadow false Hides the drop shadow

To add the above example to your website simply add this javascript (don’t forget to add a reference to the latest jQuery script).

$(document).ready(function () {
   $(document).ImagePreview({
       duration: 250,
       offset: 20,
       imageWidth: 150,
       opacity: 0.9,
       borderWidth: 2,
       borderColor: '#9999a9',
       outerBorder: '2px solid #575758',
       shadow: '4px 4px 5px #555'
   });
});


Download

jQuery.ImagePreview.js (3,74kb) - full source code

jQuery.ImagePreview.min.js (1,37kb) - minified

 

http://camelonta.se//media/1151/goal.jpg