noelboss / featherlight Goto Github PK

I'm using featherlight to show a sign-in form. However if the user clicks 'Register' I would like the Registration form to load in the same lightbox. Is this possible and how would it be achieved? Answer much appreciated!

There are three places where window.console.info is used for error / debugging messages. Two of them fire when jQuery is not present for some reason. When featherlight is in use on a production site, I'd rather these errors never fire.

if('console' in window){ window.console.info('Clever error message here') }

Does it make sense to remove or disable these messages entirely? This could be potentially be accomplished when using grunt in order to leave them in the non-minimized / non-production code. Or we could at least change them into a console.log to avoid a popup message?

href="//rawgithub.com/noelboss/featherlight/master/src/featherlight.min.css"
and
href="//rawgithub.com/noelboss/featherlight/master/src/featherlight.min.js"
from the INSTALLATION section @ https://github.com/noelboss/featherlight.

just so you know.
.peace.:.jason.

HI again,

I have issue with styles on one page. I have image gallery and regular modals. if I want to apply css on .featherlight .featherlight-content it applies to all (gallery and regular) modals.

Can I wrap them in some div or call them different in order to apply style just to one particular modal?

regards
St

If the image is small, the gallery arrows are too big for the highlight areas.

Easy way to test is change an image url in src/gallery.html for ../test/fixtures/photo.jpeg.

Hi,

Using the latest Firefox on Ubuntu 12.10 LTS on an i386 machine, I see a problem with http://noelboss.github.io/featherlight/gallery.html.

In, say, the first gallery, click on the second photo of the blue feather with water droplets. Then in it click on the left side so as to go to the previous photo, of the birds. Then click outside so as to go back to the thumbnails. Everything was fine.

But now go back and click again on the blue feather with the water droplets. What do you get, right way? I get birds, not the blue feather with the water droplets.

It seems that each photo remembers the clicking history. It stores something of the number and direction of such clicks. Then when you click on it again it redirects that number of clicks over.

But it's also more complicated. It can happen that no matter how many times you click left or right you can only go to two photos. However, even then you can click outside and go back in again and if you click on a thumbnail that you have never clicked on before you get the correct photo. We need to get rid of the storage of previous/next click history.

Best Regards,
-Mike

Is there a way to use jQuery inside of ajax window?

$('selector').featherlight loops on the elements, sets up an object for each and adds an event binding for each with $(this).on.

1. Is there a good reason why we need to create these objects for each element in the set?

I think we could bind the same method & object to the whole set, we just need to be careful about targetting the right element to read the attributes.
This would simplify things and be more efficient (one object & one function per set instead of object). @noelboss can you think of a downside?

2. If items are added later by JS that match selector, they won't be bound.

We should either use $(document).on(..., selector) to have a dynamic binding, or at least give an option to do this, it's not currently possible. @noelboss which feels the best?

Should we consider supporting IE8- only when used with modernizr or similar?

For example, we could use <aside> for featherlights, which would make it better semantically and help alleviate #25

Hi,
Just came across this lightbox and I love it!
But it doesn't seem to have native jQuery support inside the lightbox itself? I read the docs but I couldn't see anything related to this specifically.

I added a simple test to your actual demo page as an example, the click event fails to fire when clicked when inside the lightbox (but works fun outside).

Code exmaple...

    <div class="lightbox" id="fl1">
        <h2>Featherlight Default</h2>
        <p>This is a default featherlight lightbox.</p>
        <!--- This test link doesn't work when inside the lightbox :( --->
        <a href="#" id="testClick">Test Click</a>
    </div>

    <script src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
    <script src="release/featherlight.min.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $(function() 
            {
            $( "#testClick" ).click(function() 
                {
                console.log("Lightbox Click!");
                });
            });
    </script>

The css requests a width of 60%.

Is there a good reason for that?

In my code base, I had to override this with inherit and it just looks much better.

I think 60% can look very wide, and for content that is smaller it can look wierd.

@noelboss I propose to remove that line, what do you think?

I expected featherlight at bower.io, since there are bower files in the repo, but it isn't there?

I would like to suggest the following request to be added.to your framework.

I found this to be the simplest way to get a youtube video to popup - but since It take regular links I want to be able to provide a option from youtube that forces HD video. however - since the hardcoded youtube sizes less than 1280x720 does not allow for HD and goes down to 480P, I would request to add media screen options to allow for different video sizes based on screen size.

the cool thing is - once you start in HD - the fl popup is responsive and scales down - but is still HD.

I used the following in featherlight.css - and added the class "flvids" to the youtube link next to "lightbox"

@media (min-width: 1280px) {
.flvids {
width: 1280px;
height: 720px;
}
}

@media (max-width: 1280px) {
.flvids {
width: 720px;
height: 480px;
}
}

html code...

this allows me to use HD option when the browser is full screen mode - and if not - that's cool too.

I am sure there are better ways to force HD for various screen when using youtube. I searched a bit - and couldn't find one. I am sure you'll improve or point me to something way better.

Does that make sense ?

very cool plugin.

like... data-featherlight-beforecallback="mycallbackfn"

and it will be invoked by define

function mycallbackfn(){
//here my code with using this(current clicked element)
}

Hi,

Another jQuery issue I'm afraid, basically hide/show/toggle doesn't seem to work in featherlight lightbox. If I click a link that hides a div using one of the above functions it isn't hidden, if I close the lgithbox and then open it again it is hidden. It is also the same case in reverse if I try to show a div. I've thrown it into fiddle as I love featherlight but this is another blocker so be great if you could provide a fix, many thanks!

http://jsfiddle.net/craigariley/hx3TZ/4/

This is about the performance and the appearances of the galleries on http://noelboss.github.io/featherlight/gallery.html. I have investigated this on three computers, which were running Firefox (or Iceweasel, the Debian Firefox) or Epiphany (a version that uses an old version of Safari). Two of the computers are old 1GB/single-core 32-bit things. The other is 64-bit and has 2 cores and 4GB.

I mention those details because with the Firefox/Mozilla engine what I'm seeing is qualitatively the same on each of the computers but is less prominent on the newer one. Also, it's qualitatively different on the Epiphany browser (on which the glitches area present at first but disappear, along with fade-ins and fade-outs, after a few clicks). Maybe if you're using a new Safari browser then maybe you won't see anything of what I'm talking about.

My first theory was that the glitches involve caching, but they evidently have nothing to do with Internet bandwidth because I have my own gallery up and running on a Flask development server, with no connection to the Internet (Flask is a Python web-app framework), and the problem is there too.

Anyway, it's this: clicking through either gallery involves glitches showing immediately following the click. The glitches seem involve the fading out and fading in features, happening inappropriately. For example I have seen a fade out followed by a fade in with the entire sequence starting only after the new image had loaded. (I gather that with Example Gallery [gallery] the fades involve whiteouts; with Customized [gallery2], blackouts.)

The effect is not utterly reproducible or predictable. If you keep clicking you may on occasion see an image load promptly with no glitch, only to see the glitch occur the next time that the very same image is loaded.

On a development server I have experimented with fadeIn, fadeOut, openSpeed and closeSpeed and with the relative proportions of the fade and Speed settings (and I have tried commenting all of those settings out). I could not make the problem disappear. Setting fadeIn and fadeOut to be a long time (e.g. 2000) may help you see what I'm talking about.

-Mike

What's a good usecase for resetCss option that can't be solved with the namespace option?

In addition to the unintuitive UI on mobile (see #23), the default next button seems to have a CSS problem on iOS like iPhone.

It looks like this while it looks fine in desktop safari/chrome.

I actually really care, since I'm not showing them and am using swipes instead, just letting you know. Ok, I'm done 🎆

Is there a way to stop large content from becoming scrollable and just display a resized image in the viewport instead?

The doc states that the default open simply calls methods.open. Looking at the code, that's misleading, since it is also responsible for calling beforeOpen and afterOpen.

Two issues with big images (i.e. images that won't fit the current window) in featherlight.

The main issue is that if the image doesn't fit width-wise, it will be resized (great!), but if it doesn't fit height-wise, it gets cut and one needs to scroll.

It makes sense for a general lightbox to allow scrolling but for images it's not really what we want (or at least what I want 😃 ).

My CSS skills aren't good enough to find a solution (either for a wiki entry or modification of the official css). I played around a bit and tried clearing width and setting both max-width and max-height to 100% but it doesn't quite work. Somehow the height is too big.

The second issue is that the behavior for IE (at least for IE 9) is different, and the image gets squished.

@noelboss can you find a solution for these?

Take the demo, click on a button, say 'image' and stay over that button. Dialog appears, but 'image' button is above.

The gallery works fine, however there is no option to display a description in modal.

Can not work properly with Internet Explorer.

Hi there, I have the lightbox working fine, pops up with the image and clicking on close/outside the image closes the lightbox. I cannot seem to get the 'close on esc' working though :(

Code below, am I missing something?

<a data-featherlight-close-on-esc="true" data-featherlight="image" href="#" ><img width="589" height="300" src="#" class="attachment-post-custom-thumbnail wp-post-image" alt="shutterstock_151000535"></a>

Thanks, Stu

Add documentation on how to close with adding a DOM element using namespace-close or by manually clicking the close button.

I was wondering how to add manual close button within featherlight modal window in addition to standard 'x'

<span class="featherlight-close">✕</span>

 <a href="javascript:void(0)" onclick="?????">Close</a>

Much appreciated

when linking to links to one div with the #id only one will show the content in the lightbox. the other one won't load the content.
depending on which one you click first the other wont display the content.
so if i first click on link1 it shows everything fine, even when closing and opening again.
when i click on link2 after closing the content, it should open the same content, but it doesn't.
if i click on link2 before clicking link1 its the same, content is displayed correct, even after closing. but clicking on link1 the content won't be loaded.

Hi,

I am trying to add simple checkbox in modal but with no success. Radio button works on click but checkbox act as a button. Can you please review if the issue is caused by featherlight? (I have tried with bootstrap checkbox, jquery plugin, css, glyphons, and always same result)

Testing page:
http://tezzz.com/web/agenda.html
Modal where I need checkbox is
http://take.ms/N43YQ

thanks in advance
Dragomir

Would it be good to add a global featherlight close function?

Maybe we should implement open and close as special events on the calling element. so you could use: $('element').trigger('featherlight-close'); or something like that...

Hi Marcandre,

I have tried your exp. and it did work but unfortunately it does not work with font awesome when in modal.

I have created shorter version as per your requirements
http://jsfiddle.net/#&togetherjs=nlMNlDdEGi

is it possible to add support for font awesome as well?

regards
Dragomir

how to append the lightbox somewhere else than body. Should we make a new default (selector or jq-object) or split off the append and add a method only handling the append/prepend phase, thus allowing for more flexibility or simply say, override the open method?

Add support for IE:

• Fix close and next / previous icons
• Fix rgba background in gallery

I want to make a small modification to the code so that the object we're building would have a prototype, which would be the current methods.

This would have the advantage that instead of $.featherlight.methods.open.call(this) one could simply do this.open().

It would also make it easier/better for extensions I think

One thing I'm considering is merging the config with the object, i.e. instead of self.config.closeOnClick, why not self.closeOnClick directly?

This would also blur the difference between the callbacks like afterOpen and the method like open. In the doc it would be clear that one is meant to be overridden and not the other, but both could be.

We could set self.config = self for compatibility, so both accesses work?

@noelboss thoughts on this?

I've tried the same structure from the $.featherlight method, $.featherlightGallery($content, configuration);, but it doesn't seem to work.

currently marked as release/featherlight.js, should be release/featherlight.min.js

I tried to add a function call over the data attribute (after open), but it looks like there is a bug.

<a id="editor-search-replace" data-featherlight-after-open="initSearchReplace" data-featherlight="#modal-search-replace">Search and Replace</a>

or

<a id="editor-search-replace" data-featherlight-after-open="initSearchReplace()" data-featherlight="#modal-search-replace">Search and Replace</a>

or

<a id="editor-search-replace" data-featherlight-after-open="Editor.initSearchReplace" data-featherlight="#modal-search-replace">Search and Replace</a>

or

<a id="editor-search-replace" data-featherlight-after-open="Editor.initSearchReplace()" data-featherlight="#modal-search-replace">Search and Replace</a>

or

<a id="editor-search-replace" data-featherlight-after-open="function(event){Editor.initSearchReplace();}" data-featherlight="#modal-search-replace">Search and Replace</a>

etc, etc,

Console log:

Uncaught TypeError: undefined is not a function
    a.extend.defaults.open jquery.featherlight.min.20140504.js:8
    n.isFunction.e jquery-1.11.0.min.20140420.js:2
    n.event.dispatch jquery-1.11.0.min.20140420.js:3
    r.handle

Whats wrong?

Greetings,
Dave

I noticed that in the demo, the box-sizing is bootstrap's box-content, and it seems to affect the look to change that. Shouldn't we specify the box-sizing in our CSS if it's not the default one?

Bug which file in "Opening #ID from two links" has the solution as below
$.featherlight.defaults.autostart = false; // maybe disable autostart
var $target = $('#targetElement'); // cache element
$('.twolinks').click(function(){ // bind function
$.featherlight($target); // open featherlight with cached element.
});

It's right but set autostart = false will create another issue.
After this all other popup will not able to open. As show in image other than 1 and 2 will not open.

HI, and thanks a lot for sharing this library.
I don't succeed in sending data to a rail controller from a form (a login form) contained by featherlight : nothing is send when I click on submit :

Of course, the login form works outside of featherlight.
Am I missing something ? Does it sound to you?
Thanks
Sebastien

Hi,
first of all, thanks for the plugin and its API, many things quite useful.

I don't understand too much how use featherlight with iframes (and I'll basically use only iframes with it), the example on the website is not what I expect. You have an existing iframe on the DOM while I don't, I need to create it , I just have the link.

What I have is this kind of links:

<a href="/activities/new?date=2014-05-12" rel="shadowbox">Create activity</a>

I guess that if I change the selector targetAttr and select something like targetAttr: "[rel='shadowbox']" I'll activate featherlight on all my iframe easily, I also guess I need to use type: 'iframe', but not sure.

Can I use iframe as contentFilter?

Can you guide me a bit here? If I'm successful using your plugin, then I'll add some example in the README. Thanks.

Hi,

First of thank you for this great and easy to use lightbox.
I'm using it on one of my sites and it works but it has a weird unintended effect on my shopping cart div:

the link I'm using to pull in some AJAX content:
a class="btn btn-info btn-lg active" data-featherlight="ajax" href="http://www.url.com/page.php" Click here < /a >

Clicking this link works (it shows the lightbox and content etc)

However the content from that page is suddenly also displayed in this part of the site:

< div id="shoppingcart" >
< div id="jcart" >
< form action="/gateway.php" method="post" >
content
< /form >
< /div >
< /div >

The data inside the jcart div gets replaced with the data from the ajax call.

Could you provide any inside on how to fix this?
(url: http://www.unlocksamsungonline.com/v4/unlocksamsung.php )

Thank you

Any element with a css width (or min-width) that won't fit on the screen will make the whole lightbox disappear.

For example in the demo, adding #fl1 { width: 1200px; } will make the dialog disappear completely if the window isn't wide enough.

Ideally, something half decent would happen probably a scrollbar, or something that doesn't involve the whole lightbox going into neverneverland.

Otherwise, we need to add a serious caution in the readme

Is there a way to change style of scrollbar in modal, and not in body of the page?
color, width etc...

thanks in advance
Dragomir

I have the same issue as your website:
Step 1: goto http://noelboss.github.io/featherlight/
Step 2: Click Ajax Demo -> Lightbox will show
Step 3: Click background to close lightbox
Step 4: Click Ajax Demo again -> Lightbox will show without content (blank)

My browsers:
Chrome Version 35.0.1916.114
Firefox 29.0.1

OS: OSX 10.8.5.

Thanks a lot.

is it just for one image? I read the documentation but I can't seem to find what i'm looking for.
I like to create a fotogallery:

What am I doing wrong?
the first image opens perfectly but I like to make a list without thumps. But it won't open the next image. Usely (BV in fancybox you can do it like this but unfortunetly there were some conflicts with tinynav and responsive slider and featherlight works fine)

Version 0.4.2

Using this in conjunction with angular. Manually calling the plugin via an ng-click attribute.

Throws the following error in ie8. constructor._opened' is null or not an object Looks like it's used on line 181 and 205 of the full version

Markup
<div ng-click="launchLightBox()"></div>

Function
$scope.launchLightBox = function() { $.featherlight($('#video-container')); };

Getting some stack errors when trying the examples on http://noelboss.github.io/featherlight/ in IE8 as well.

The Wiki makes it seem like IE8 is supported, is that the case?

Hi,

I have a problem on multiple pages where links inside the lightbox just don't do anything when you click them. If you right mouse click them and choose open in new tab they do work. I tested in IE, Chrome and FF (all latest versions)

Example:
http://www.unlocksamsungonline.com/test2.php

If you click the link 'Click here for details' on the page above the lightbox will open (top of the page, css of featherlight is not included on that page but that is not the issue - I've tested that). Inside the lightbox there are 2 links both of them don't work.

I've tried removing ALL css and still had this problem.
I tried to downgrade jquery to 1.9.1 and with latest version - no difference.
I tried removing bootstrap js - no difference

It's the latest version of featherlight so I'm at a complete loss here,
Please help, thank you!
Steven

Hi!!

Datepicker ui doesn't work in form inside featherlight, I'm making anything wrong???