Comments on: New jQuery plugin: ‘imgPreview’

By: Kjartan

Kjartan — Tue, 01 Dec 2009 12:40:04 +0000

Hi James,

I am Icelandic photographer living now in China. I like your great plugin a lot. I am now working on this heavy idea where I use a big clickable map, which is so far working great:

http://www.photo.is/china/index.html

But I have 2 problems:

1) Is it possible to let the picture run around the cursor, like have the picture on the left side when the cursor is on the right side of the screen …?

2) Is it possible to add different type of icon/logo over the picture by some selection?

By: Daniel Smedegaard Buus

Daniel Smedegaard Buus — Fri, 30 Oct 2009 10:26:48 +0000

Couple of issues with this plugin. The image dissappering issue in IEs when using animations I don’t have a fix for, but with regards to the plugin failing and killing javascript in general when selectors return an empty result set, you just need to add

if (!h.length) return this;

After this bit of code in the original file:

h = this.filter(':linkingToImage(' + b.srcAttr + ')');

so that it’ll look like this:

h = this.filter(':linkingToImage(' + b.srcAttr + ')');if (!h.length) return this;

Now you can do

$(’.some-not-existing-class a’).imgPreview();

and not kill your js chain if the class doesn’t exist or no srcAttr hits are found inside.

By: BandonRandon

BandonRandon — Tue, 20 Oct 2009 00:51:41 +0000

I also have the issue that if an element doesn’t exist it throws an error. I think the plugin should do a search and only initiate if the element is present.

Hopefully this will be fixed in the next version.

By: 77street

77street — Mon, 05 Oct 2009 02:12:56 +0000

it very nice! I’ll use it in my website: http://www.77street.net.
thinks.

By: François

François — Wed, 16 Sep 2009 23:06:12 +0000

I have 2 solutions for the “a is undefined” error. The first one was explained earlier, you must put your $('.pic a').imgPreview() after the image, but a better way is to put it in the $(document).ready() like

$(document).ready(function() {
	$('.pic a').imgPreview({
    containerID: 'imgPreviewWithStyles',
    srcAttr: 'rel',
    imgCSS: {
    }, 
    onHide: function(link){
        $('span', this).remove();
    }
	});
	$('ul#photos').innerfade({
		speed: 2000,
		timeout: 7000,
		type: 'sequence',
		containerheight: '285px'
	});
});

Another possibility is that if there is no images (li) in your ul, there will also be an error. Maybe this should be considered a bug?

By: Dale

Dale — Wed, 09 Sep 2009 14:05:31 +0000

My website is an intranet site…

Most of my web links are to other intranet URL’s.

In my case, preview images for these intranet URL’s do not already exist.

I confirmed that the various free preview image services available on the net can’t create a preview image for an intranet site.

I’d like to know if this plugin can be modified to create it’s own URL preview images “on the fly”?

If not, can anyone recommend a different JQuery plugin that can create intranet URL Preview images?

Thanks!

By: Eddie

Eddie — Tue, 08 Sep 2009 18:55:31 +0000

This is such a great plugin, thanks for creating it.

As others have mentioned, PLEASE implement a fix for when the image previews are close to the bottom or right of the screen.

Thanks again for making such a killer plugin!

By: Dale

Dale — Fri, 04 Sep 2009 16:04:46 +0000

The first 4 examples in the demo works fine for me. I'm having problems only when I attempt to preview a link to a website. When I do this, all I see is a place holder.... i.e. there is no preview, just the animated image loading gif... Website links + previews Google Yahoo Amazon Anyone have any recommendations? Thanks!

By: naco

naco — Wed, 02 Sep 2009 17:23:17 +0000

Chates,

It doesn’t work unless I write Javascript below than the link a tag of the image.

exp.

TEST img Preview

TEST

jQuery plugin – imgPreview -

test

By: Collectonian

Collectonian — Tue, 01 Sep 2009 14:21:07 +0000

Love this plug in! Easy to implement and seems ideal for the project I’m working on. Only question is, is there anyway to make the tool tip trigger when someone mouses over a TD not just the link within the TD? I’m using some other jQuery to make the whole TD a link and would like the preview to show for the whole thing as well. Also, can the preview box be set to be a fixed position instead of relative to the cursor?