Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

image preview


BlogSlideShow - image viewer with fancy transition effects (+CSS3)

Submitted by sheiko on May 24, 2010 - 3:42pm

BlogSlideShow is a JQuery plugin that enhances your blog pages with fancy image viewer, which provides nice transition effects including CSS3/HTML5-related ones.

All what you need is to provide links on your images, you want to show. Likely you already have images on blog pages linked. Just add rel attribute containing "blogslideshow" to them.

When you click on such a link, you'll get the image viewer on the overlay. When hovering the overlay you get toolbar appeared by which you can navigate images. Besides, you can use keyboard arrows <-, ->, Esc as well.

¡PIMG! - Lightweight Image Preview Plugin

Submitted by david4ie on April 25, 2010 - 1:04pm

jQuery PIMG (It stands for Preview Image).

PIMG is extremely lightweight and very easy to implement image preview plugin.

The plugin allows you to preview full sized images on hover of a thumbnail or you can give an image a custom attribute containing the SRC of the image to display.

If the 'title' attribute is present PIMG will display this title in a nice box below the image.

See demo fore more details.

Picbox

Submitted by BunnyII on November 29, 2009 - 12:24am

Picbox is a lightweight javascript image viewer, which differentiates itself by allowing easy viewing of images larger than the available screen size.

It features automatic resizing and zooming of large images, allowing them to fit in the browser or be viewed at full size.

**** ALWAYS VISIT HERE FOR THE LATEST VERSION ****

jLoupe

Submitted by chrisiufer on September 1, 2009 - 4:05pm

jLoupe adds a "loupe" or "magnifying glass" effect to images. Applying the plugin is as easy as adding the class "jLoupe" to the images you want to enable the effect on. There are several ways to enable the zoom behavior depending on how you are loading the images on your page. The best way is to simply scale a large image using the html attribute "width" or "height". But if you are displaying a gallery of small thumbnails, you can apply jLoupe by adding the URI of the larger image to the "longdesc" attribute to your image tag.

See the example page for more information and code examples.

jQuery BigPicture

Submitted by jorgetite on April 21, 2009 - 8:51am

jQuery BigPicture is an unobtrusive plug-in designed to display images in a modal window along with a full description.

imgPreview

Submitted by JimmyP on February 2, 2009 - 1:48pm

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.

DOWNLOAD -> PLEASE IGNORE THE RELEASE INFORMATION:
THIS IS THE LATEST VERSION (Minified) : http://plugins.jquery.com/files/imgpreview.min.0.22.jquery.js

DEMO: Various demonstrations of the plugin can be found here: http://james.padolsey.com/demos/imgPreview/full/

NOTE
-----

light-tooltip

Submitted by Sina Salek on October 12, 2008 - 2:56pm

Displays simple preview inside page for image thumbnails.
All the credits goes to Alen Grakalic (http://cssglobe.com), i only modified it to add smart positioning.
Tested under Firefox3,Opera9,IE7
Simple usage :

<a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a>