Develop Reference

Image theft protection, image replacement when download

I saw few sites that use this thing but I didn't know what is it.
I was browsing a site ansehen I tried to download the images in the page no matter what method I used to download different images came out instead of the images I saw.
So I wanted to do that on my WordPress site to protect my images from being stolen.
If anyone have any idea what is that called and how it's done please help me.

It could be a way for you to use the images as an background image and place a transparent image above. So when the user right clicks the image, he will not be able to save the image this way. Of course he can look at the code and find out the url of the background image or just take a screenshot and crop it. But this would be more effort, so your images are much better protected then without this method.
Useful link for your issue: https://www.computerhope.com/issues/ch000977.htm
I adapted a code example from this site using a div container instead of a table:
<div style="background-image:url('pictures/image.jpg'); background-size:cover;">
<img width="350" height="150" src="pictures/transparent.png" alt="copyright">
</div>

Image Thumbnail Load behaviour (Pretty Photo Lightbox functionality preferred)

I'm trying to make a picture portfolio like the first demo example on this page http://www.no-margin-forerrors.com/projects/prettyphoto-jquery-lightbox-clone/#prettyPhoto . However, instead of have it invoke an image when clicked it takes me to another page, I'd like it to have a pop up image instead. I had already checked possibilities in theme settings but none available.
This is the link http://tile.johnzuh.com/unsere-fliesen/ to the Page with this behaviour. You will realise that once u click on the gallery image item it sends you to another page using this
<a itemprop="url" class="eltdf-pli-link" href="http://tile.johnzuh.com/portfolio-item/home-interior-2/" target="_self"></a>
linked element to image. This is an unexpected behaviour
How it should behave
I would appreciate a behaviour similar to that on this page instead http://tile.johnzuh.com/portfolio-item/plava-identity-design-4/
Once you click on an image it should invoke a bigger image from thumbnail.
I see it uses
<a itemprop="image" title="portfolio-single-13" data-rel="prettyPhoto[single_pretty_photo]" href="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg">
<img itemprop="image" src="http://tile.johnzuh.com/wp-content/uploads/2016/09/portfolio-single-13.jpg" alt="s" />
</a>
It uses the prettyPhoto element instead of linking to the href. How do i adopt this ? Some quick workarounds, examples will be appreciated.

Issue was solved by changing some dynamic settings in theme.

Animated GIFs not playing in Firefox when loaded via AngularJS

I'm a beginner with Angular 1. I have a function in my controller that generates URLs to various animated GIF files depending on some parameters in an HTML form. I then have an img tag that is supposed to show that GIF file, like this:
<img alt="preview" src="{{ctrl.previewURL()}}"/>
Basically, it works. When I change the values in my input fields, the image gets updated accordingly. However, after the third image loaded this way, the GIFs stop playing their animations (though the correct files are still being loaded), only showing one frame. This happens no matter what order I try to load them in, so it's not a problem with the files themselves.
Interestingly, this problem only seems to appear in Firefox (I'm using version 48). It all works flawlessly in Microsoft Edge. I didn't have the chance to try other browsers yet.
Is there a way to get this to work in Firefox as well? Or is there a better practice for doing something like this with Angular?

Instead of src use ng-src
The browser see the src as "{{ctrl.previewURL()}}" at first, until angular start work so use ng-src and the image will be loaded with angular only.
your code:
<img alt="preview" ng-src="{{ctrl.previewURL()}}"/>

Changing src attribute doesn't update image

As part of an image gallery I am using the below code to switch out the src attribute on an image element as a user clicks on various thumbnails. Every part of it has been working fine for about 7 months, since I built it, but sometime in the past few weeks this part of the code stopped working:
var nextLgSrc = $('.gallery-image._'+selected).data('lgsrc');
$('.hero-image').attr('src', nextLgSrc);
nextLgSrc is succesfully returning an absolute URL to the image that will be replacing the current one. And the src of the img element is in fact changing when the thumbnails are clicked, but the images no longer change. The first (default) image stay stuck, even though the src attribute is changing underneath it.
Can anyone tell me what might have happened and how to fix it?
Here is a link to the full gallery code to see it in context if that's helpful: http://pastebin.com/mae8YQi2
And actually, here is a link to a page that isn't working: http://penumbralux.com/project/marisol

Becuase when you click on images other than first one,
You are only updating src attribute of img.
When inspecting elements with developer tools on chrome, I noticed that srcset attribute of your main image also needs to be updated. I tried it and its working fine after updating srcset attribute of that image.
<img width="970" height="647" src="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg" class="hero-image wp-post-image" alt="Caption Test" data-smsrc="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-100x100.jpg" data-lgsrc="Array" srcset="http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-300x200.jpg 300w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-1024x683.jpg 1024w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2363-750x500.jpg 750w, http://penumbralux.com/wordpress-2015/wp-content/uploads/2015/07/IMG_2349-970x647.jpg 970w" sizes="(max-width: 970px) 100vw, 970px">
So in a single sentence, update src and srcset both.

you are using srcset which is used for responsive images on different width browsers. you need to update that as well

Remove srcset and everything would work as expected. And IE does not support it as of today if you wish to work across all browsers. See http://caniuse.com/#feat=srcset
Also it would be a good idea to preload images to make your page more responsive.

Fancybox loads, but doesn't contain any images, even though i'm pretty sure the images are in the correct place

I'm having a problem using jQuery Fancybox. it works beautifully locally, but not when it is uploaded to the server. Fancybox itself seems to be working, as when i click an image, it brings up the box, but it does not contain any images. I've checked all of the file locations, and from what i can tell, everything looks to be correct, however i am the furthest thing from a programmer. The page in question is located at:
http://www.houseimprovement.us/project.html
The images used there for the time being are stock photos that I intend to replace once i get everything working.
Thanks for your help!

Your code is:
<img alt="" id="fancy_img" src="../../AGD/scripts/jquery.fancybox/http://www.houseimprovement.us/photos/project1_full.png">

Even so you are "pretty" sure the path isn't right.
Instead of
<img alt="" id="fancy_img" src="../../AGD/scripts/jquery.fancybox/http://www.houseimprovement.us/photos/project1_full.png">
it should be:
<img alt="" id="fancy_img" src="http://www.houseimprovement.us/photos/project1_full.png">