dwImageProtector Plugin for jQuery

The jQuery Dimensions plugin is now integrated in the latest version of jQuery, so adding this is no longer necessary. Thanks for this useful plugin!

Thanks!

I dabble in Mootools but JQuery is my library of choice.

ZOMG!!!!

You cant protect images. I just use FireBugz and bam your img’s are belong to me.

(joke :)

thx for the post. :)

Hi,

I’m using Firefox 3 and the image is not protected at all, I can right click on the image abd I haven’t got any messages from jquery???
Just use Web developper toolbar/Images Informations the protection goes away …

Is there anything I missed?

Thx for the post

Hilarious

Hey, great idea but sometimes the body isn’t the only relative container of the image. I won’t post here the code to fix it I made but the point is:
- Instead of appending the new to the body, I cache it into a variable and append it after the protect image.

Hey dude. Thanks for the awrsome plugin. This was exactly what I was looking for!

As of jQuery 1.2.x the position() function is replaced with offset(), so you need to update that in your code.

var position = $(this).offset();

Simple enough.

The issue I have to figure out now is i used onhover events on the images getting replaced and now they don’t work anymore =( I’ll have to tie those events onto the replaced blank.gif onhovers.

I’ll post code when I figure it out.

Cheers,
Jordan of http://CubicleCollective.com

I fixed the issue with onhover and other things.

Problem with this plugin is that if you have an image you want to protect and it’s wrapped around an anchor tag…you essentially lose the anchor tag.

<a href=”/gohere”><img class=”protect” src=”iamprotected.jpg” /></a>

Also you had to rebind certain events which I was using, particularly .hover() which I had to rebind to “mouseenter” and “mouseleave” as .hover() is a convenience function.

Here’s the code snippet. or you can view my working demo at https://civil.workcube.com/content/burning-bridges

return this.each(function() {
var position = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var srcimg = this;

var protect = $(‘<img />’).attr({
width: width,
height: height,
src: settings.image
}).css({
/*border: ’1px solid #f00′,*/
top: position.top,
left: position.left,
position: ‘absolute’,
zIndex: settings.zIndex
}).bind(
‘mouseenter’, function() {
if($(srcimg).hasClass(‘imagecache-product_list’)) {
$(srcimg).toggleClass(‘hovering’);
}
$(srcimg).trigger(“mouseenter”);
}).bind(
‘mouseleave’, function() {
if($(srcimg).hasClass(‘imagecache-product_list’)) {
$(srcimg).toggleClass(‘hovering’);
}
$(srcimg).trigger(“mouseleave”);
});

if($(srcimg).parent().get(0).tagName == “A”) {
link = $(srcimg).parent().clone();
link.html(protect);
link.appendTo(‘body’);
}
else {
$(protect).appendTo(‘body’);
}

});

Thanks again for the code,
Jordan

Its very nice plugin and working fine for me in firefox. My only problem is in IE 7 it creates two images, one in proper place and one may be displaced left or right. Its whired that i can’t fix this problem.

has anyone got similar problem and has got a fix??

please email me if you want me to show the page and code. cheers.

kuikel

Oops, I guess I should post the proper links to websites instead of posting my internal domains.

The project I used image protector on is live and you can see it here:
http://civilcitizen.com/catalog/2

As for Michael, I do not believe my modified solution fails in IE7 (i think i tested it in that browser at least), so pop over and take a look at the jQuery there.

we can download the image, by just clicking the image before its downloaded completed. means click the image before it is downloaded full.

There is just one way to protect image: don’t publish them ;)

I use the web developper bar for Firefox and with it, I can download the image with no problem. Thanks anyway: I love jQuery

I used J0rd’s example above, and it’s working great. Thanks!

Hi. It’s a very nice plugin you made there.

Only one thing misses for my use, and I don’t manage to set it (noob at javasctipts).
I’d like to copy the title & alt properties of my protected image on the blank image.
Would you (or anyone) explain me how to do it ?

(Thx)

Hi,

I’m a beginner with jQuery. Currently, I’m developping a website with wordpress, and I can’t activate the image protection with your code. Please could you explain me how to do? Think I miss a step.

Here is what I done :
1 – download the js files in a js/jquery directory
2 – check if I allready have jquery. Yes, with Next Gen Gallery Plug In. jQuery Version: 1.2.6.
3 – place this code between tags :

<script type=”text/javascript” src=”<?php bloginfo(‘wpurl’); ?>/wp-includes/js/jquery/jquery.dimensions.js”></script>
<script type=”text/javascript” src=”<?php bloginfo(‘wpurl’); ?>/wp-includes/js/jquery/jquery.dwImageProtector.js”></script>
<script type=”text/javascript”>
$(window).bind(‘load’, function() {
$(‘img.protect’).protectImage();
});
</script>

4 – place the blank GIF in the jquery directory

That’s it! But nothing on my website. I always can download my images. So, if you have a solution for me. It would be great.

I like this a bunch, but was thinking that it would also be a nice touch to have a watermark added to the image if it is downloaded. That is, when you view it on the site, there is no watermark, but if someone decides to right-click and save it, it would then overlay, say a trasnparent gif in the center of the image and merge the two. Is that possible?

Rich

Thanks for the quick reply Dave. Is there any way you could point me in the right direction?..I only have a working knowledge of jQuery, and javascript for that matter. But I can more often than not work through an issue with a little nudge. — thanks.

I’ve just tried this bit of jQuery code, and I love it. It was an almost perfect solution delivered to me in no time. However, I am still trying to overcome an issue with Firefox, when protecting images inside tags, the protected images are no longer clickable. I remove the protection and the ‘image links’ work again. This problem doesn’t arise in IE. I will post again when I have solved this.

i did a little change to code. since i want the protection only on mouseover and remove the protection as mouse leaves.

jQuery.fn.protectImage = function(settings) {
settings = jQuery.extend({
image: ‘blank.gif’,
zIndex: 10
}, settings);
return this.each(function() {
var position = $(this).offset();
var height = $(this).height();
var width = $(this).width();
var protect = $(‘<img />’).attr({
width: width,
height: height,
src: settings.image
}).css({
border: ’1px solid #f00′,
top: position.top,
left: position.left,
position: ‘absolute’,
zIndex: settings.zIndex
}).bind(‘mouseleave’, function() { protect.remove() });

$(protect).appendTo(‘body’);
});

};

And i will append the event using

$(‘img.priceChartImage’).bind(‘mouseenter’,function(){
$(this).protectImage();
})

what do you guys think about this one?

Also thanks for initial code david.
Cheers Team!!!

Even i replaced blank.gif with :) . My usecase was to block images dragged to html editor. if i use blank.gif it was getting dragged to html editor. Though we cannot view blank.gif it was making the html content dirty. So i changed my code to use div. Following is the code i used.

var protect = $(‘<div>’).css({
border: ’1px solid #f00′,
top: position.top,
left: position.left,
position: ‘absolute’,
zIndex: settings.zIndex,
width:$(this).width(),
height:$(this).height()
}).bind(‘mouseleave’, function() { protect.remove() });

Any comments???

Cheers :)

Amazing code..Thanks alot for it :-)

Um, I just tried the demo (in Safari 4) and this method simply doesn’t work. I right-clicked on the image and opened it in a new tab… I also simply dragged it off onto the desktop.

with Google chrome you can simply drag the image from the browser to the desktop, but right clicking and saving the image will save the blank.gif image.

Great idea but with Firefox 3.5.7 if you simply resize the webpage the blank.gif does not keep focused over the real image.

uhh, you know this is a total FAIL right? in chrome i can drag the image to the desktop, and it’s the actual image, i can also right click and save the image, and i’m not downloading a transparent image, it’s the actual image. maybe better luck next time.

@David Walsh:
awww dude i’m a total FAIL.
that’d be neat if it still worked. oh well.

si quiero una imagen simplemente agrando la imagen con CTRL y la tecla +, luego pulso la tecla PRINT SCREEN y paste in photshop se edita y punto! pues no hay imagen q no se pueda bajar!! jajajajaja