Demo
How To Use
$("img").thumbPopup({
imgSmallFlag: "_s",
imgLargeFlag: "_l"
});
Options
| Option | Type | Default |
|---|---|---|
| popupId | String | thumbPopup |
| popupCSS | Properties | {‘border’: ’1px solid #000000′, ‘background’: ‘#FFFFFF’} |
| imgSmallFlag | String | _t |
| imgLargeFlag | String | _l |
| cursorTopOffset | Integer | 15 |
| cursorLeftOffset | Integer | 15 |
| loadingHtml | HTML | <span style=”padding:5px;”>Loading</span> |
Description
This plugin will display a thumbnail’s larger image like a tooltip when you hover over the thumbnail. I originally made the plugin for Greasemonkey so I could preview larger images on certain sites without having to click to the next page. It also works great when implemented directly on a site.
This plugin can be used on sites whose thumbnails and larger images have almost the exact same filenames except for one piece that changes between the two. Here are some example sites, the filename conventions they use, and example userscripts for Greasemonkey:
| Size | Flickr | Vi.sualize.us | TinyPic |
|---|---|---|---|
| Small | filename_s.jpg | filename_m.jpg | filename_th.jpg |
| Medium | filename_m.jpg | ||
| Large | filename.jpg | filename_h.jpg | filename.jpg |
| Userscript | Userscript | Userscript |
