jQuery FancyBox doesn't work anymore with Bootstrap 2.3 #6862

Closed
tinogo opened this Issue Feb 8, 2013 · 19 comments
@tinogo

Hi,

I've just noticed that jQuery fancyBox isn't working anymore in conjunction with Bootstrap 2.3.
When reverting back to Bootstrap 2.2.2 everything is fine again.
Here are two jsfiddles to demonstrate the issue:
1. with Bootstrap 2.3 .js File: http://jsfiddle.net/XmDXJ/ <-- fancyBox doesn't open
2. without the Bootstrap js file: http://jsfiddle.net/yzJVH/ <-- fancyBox opens as it should

@cvrebert
Bootstrap member

You're pretty much on your own when it comes to conflicts with third-party components.

@wroughtec

I found a lot of scripts broke with jquery 1.9 nvslider, fancybox 2 all received updates to make them compatible so might not be bootstrap causing the issue. as both links failed for me:

http://wordpress.org/support/topic/important-jquery-19-not-compatible-yet-working-on-a-patch

@rollbackpt

The .browser being removed just caused a lot of trouble to jquery plugins.

@Yohn

this is related to #6835 cause you're getting the "too much recursion" javascript error. what I did to fix it is looked in the dropdown.js file and at the bottom you'll see

.on('.dropdown-menu', function (e) { e.stopPropagation() })

I changed it to the following and it seems to fix the problem when I ran into it

.on('click.dropdown-menu', function (e) { e.stopPropagation() })
@mdo
Bootstrap member
mdo commented Feb 9, 2013

We don't support third party tools.

@mdo mdo closed this Feb 9, 2013
@chriscrowe

I ran into this issue as well and Yohn's suggestion fixed it. Does his solution present any problems? If not I feel like it should be pulled into Bootstrap.

This occurs not only on fancyBox but also on LightBox. Seems those are very widely used JS tools...

@Yohn

thats what I'm worried about; it causing other problems. so far I havent found any but it might cause I'm not sure why that line was there or what its purpose was.

@emq

Thx @Yohn for the solution, after upgrading bootstrap I was wondering what was causing this (it basically crashed my firefox every time). I also agree with @skandocious - even if you don't support third party tools you shouldn't break them on the way (well it worked before, right?). Cheers.

@titovanton

I want say thank you, for awesome twitter bootstrap. And I understand what is open source project and you do not have to do anything on demand. But I realy ask you to fix this problem and even more: add to TB some thing like fancybox js plagin (it's different than modal window). Also, in TB no spinner (like jquery ui spinner), so I have wrote the little plagin, that looks nice with .input-prepend .input-append buttons. https://github.com/titovanton-com/flexible-spinner I hope, you'll add spinner to bootstrap too =) PS: English - not my first language, sorry...

@kevinelliott

Just a note that this breaks select2 as well.

If all of the open source projects on the internet said "We don't support third party tools" then nothing would work together at all. Thankfully, most projects don't have this narrow sighted viewpoint.

@scharmetant

@mdo : fancybox is not some random pluggin, its used by every other website out there.
I can totally see your point, and you are doing a great job. May be fancybox will publish a fix, but when such major plugins issues occur, I guess "considering available options" seems the least you could do, dont you agree ?

@wroughtec

The fix is fancybox 2:
http://www.fancyapps.com/fancybox/

:)

@scharmetant

@wroughtec: fancybox2 does not work with BT 2.3

@gtraxx

This problem is it fixed ?
View issues in fancybox 2 : fancyapps/fancyBox#519

Is it possible to fix without modification in bootstrap.js?
I'm using a customized and minified

@adamdehaven

When I looked at my bootstrap.min.js file (customized) to try the solution from Yohn above, the code ALREADY looks as shown here:

.on("click.dropdown-menu",function(a){a.stopPropagation()})

Was the code updated in Bootstrap 2.3.1 without note? Fancybox appears to be working correctly with my Bootstrap 2.3.1 files downloaded from Bootstrap Customizer

@Yohn

yeah, they added the click in that statement for 2.3.1 to fix some of the problems it was causing..

@LucTremblay

it's working good with bootstrap.js but still not working with bootstrap.min.js,
I don't know why, they aren't supposed to have the same code?

i think the current version of bootstrap.min.js is not the same of the bootstrap.js version

@SamSnow

What's happening with Fancybox? I use BT 3.2.1 and I've not been able to install fancybox v2.
I could be satisfied with fancybox v1.3.4 but to make it work I've to include jQuery 1.4 (instead of jQuery 1.9.1).

Can someone shed some light on it?

@anfibolita

I'm using Bootstrap 3.2.1 & jQuery 1.10.2 & Lightbox 2.6.

The problem i've encountered is that the jQuery doesn't correctly get the width of the linked image, so it's draw a thinner modal.

I've commented out 'max-width: 100%' in the img style of the bootstrap (l.104) and is working properly now.

@cvrebert cvrebert locked and limited conversation to collaborators Jul 28, 2014
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.