Cross-Domain Images with Lightbox

The underlying lightbox has a unique feature, in that it creates a matching backlight (glow) effect for each image. The backlight (glow) color is based on the most saturated color in the image (which is not always the most used color). In order to determine that color, the lightbox is using the native Javascript function getImageData(), which will scan the image data for color information. That function has a limitation, in that it does not always work with images that are hosted on a different server than the one, that is showing the image. In that case, the browser might trigger a security warning or error in its browser console, for example this one:

This error is actually not a serious as it sounds; in this case it only indicates that the lightbox was attempting to scan the image for color data but the server hosting the image prevented it from doing so, based on its security settings.

If the server you are using to host your images is set up to support CORS (Cross Origin Ressource Sharing) requests, you can go to the settings page for this plugin, where you will find a tab “Lightbox Settings”. In that tab, you will find a setting switch “Enable CORS Requests”, which will allow the lightbox to use that routine, when using external images. Using CORS requests will (based on server) add some additional time when loading the image, which is why the feature is by default disabled. How you can enable the CORS support on the server that is hosting your images itself, is different for each hosting service (some have it enabled automatically, others don’t), so please contact your service provider for more information regarding CORS.

If the CORS approach does not work, your last resort is to simply and completely deactivating the backlight (glow) effect for the lightbox, so the lightbox does not need to scan the image data anymore. You will find a matching setting option in the plugin’s settings section for the lightbox as well.


Tekanewa has written 35 articles

Hi there, I am the Lead Developer here at Tekanewa Scripts by Kraut Coding; well, to be honest, I'm also the only developer. I love to create something beautiful and useful for Websites and here I write about how to use them. :)