Featherlight is a very lightweight jQuery lightbox plugin. It's simple yet flexible and easy to use. Featherlight has minimal css and uses no inline styles, everything is name-spaced, it's completely customizable via config object and offers image, ajax and iframe support out of the box. Featherlights small footprint weights about 4kB – in total.
What kind of issue is this? (put 'x' between the square brackets)
[ ] Question. This issue tracker is not the place for questions. If you want to ask how to do
something, or to understand why something isn't working the way you expect it to, use
http://stackoverflow.com/questions/ask .
Provide working code, starting from http://jsfiddle.net/JNsu6/15/.
We monitor the tag featherlight.js.
[x] Bug report. If you’ve found a bug, you must provide a minimal example in a CodePen,
starting from http://jsfiddle.net/JNsu6/15/ .
I have been using Featherlight for a WordPress plugin Photonic that is available to the public for free. So far I haven't had an issue adapting the script to any of my scenarios, but I believe I have come across something that is causing Featherlight to break.
If I have a mixed gallery with images and videos, and I mark every element of the gallery with an explicit data-featherlight-type, when I try to click on an element, it opens up fine. However, if I click on an image and then click left / right to go to a video, I get a JavaScript error saying "Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'." as soon as I encounter the video.
If, however, I drop the definition of data-featherlight-type="image" and just leave alone the ones that have video, this works fine.
I have verified that the behavior documented above is consistent if I switch to a different type instead of video (like wrapping the video in an HTML element and presenting it).
The reason I need to be able to do this is because my plugin is adding support for the new Google Photos API. Google Photos URLs don't have extensions, and if I try to pass a Google Photos URL as is, Featherlight reports "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xyz.org' is therefore not allowed access." If I explicitly define data-featherlight-type="image" or data-featherlight-type="video" then the "No 'Access-Control-Allow-Origin'" error goes away, but I am hit with the error in the JSFiddle when I try to transition to a video.
Hope this makes sense. I will be happy to provide more details if required.
What kind of issue is this? (put 'x' between the square brackets)
[ ] Question. This issue tracker is not the place for questions. If you want to ask how to do something, or to understand why something isn't working the way you expect it to, use http://stackoverflow.com/questions/ask . Provide working code, starting from http://jsfiddle.net/JNsu6/15/. We monitor the tag
featherlight.js.[x] Bug report. If you’ve found a bug, you must provide a minimal example in a CodePen, starting from http://jsfiddle.net/JNsu6/15/ .
[ ] Feature Request. Make sure there's no good way to do what you want first; consider asking on http://stackoverflow.com/questions/ask first.
I have been using Featherlight for a WordPress plugin Photonic that is available to the public for free. So far I haven't had an issue adapting the script to any of my scenarios, but I believe I have come across something that is causing Featherlight to break.
Fiddle: http://jsfiddle.net/JNsu6/722/
Scenario:
data-featherlight-type, when I try to click on an element, it opens up fine. However, if I click on an image and then click left / right to go to a video, I get a JavaScript error saying "Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'." as soon as I encounter the video.data-featherlight-type="image"and just leave alone the ones that havevideo, this works fine.I have verified that the behavior documented above is consistent if I switch to a different type instead of
video(like wrapping the video in an HTML element and presenting it).The reason I need to be able to do this is because my plugin is adding support for the new Google Photos API. Google Photos URLs don't have extensions, and if I try to pass a Google Photos URL as is, Featherlight reports "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://xyz.org' is therefore not allowed access." If I explicitly define
data-featherlight-type="image"ordata-featherlight-type="video"then the "No 'Access-Control-Allow-Origin'" error goes away, but I am hit with the error in the JSFiddle when I try to transition to a video.Hope this makes sense. I will be happy to provide more details if required.