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'
});
});
Live demo
Try hover your mouse pointer over this link
Download
jQuery.ImagePreview.js (3,74kb) - full source code
jQuery.ImagePreview.min.js (1,37kb) - minified
<<- Tillbaka till listan
