New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

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

Comments

Projects
None yet
@tinogo

tinogo commented Feb 8, 2013

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

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Feb 8, 2013

Member

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

Member

cvrebert commented Feb 8, 2013

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

@wroughtec

This comment has been minimized.

Show comment
Hide comment
@wroughtec

wroughtec Feb 9, 2013

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

wroughtec commented Feb 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@rollbackpt

rollbackpt Feb 9, 2013

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

rollbackpt commented Feb 9, 2013

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

@Yohn

This comment has been minimized.

Show comment
Hide comment
@Yohn

Yohn Feb 9, 2013

Contributor

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() })
Contributor

Yohn commented Feb 9, 2013

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

This comment has been minimized.

Show comment
Hide comment
@mdo

mdo Feb 9, 2013

Member

We don't support third party tools.

Member

mdo commented Feb 9, 2013

We don't support third party tools.

@mdo mdo closed this Feb 9, 2013

@chriscrowe

This comment has been minimized.

Show comment
Hide comment
@chriscrowe

chriscrowe Feb 11, 2013

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...

chriscrowe commented Feb 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Yohn

Yohn Feb 11, 2013

Contributor

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.

Contributor

Yohn commented Feb 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@emq

emq Feb 17, 2013

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.

emq commented Feb 17, 2013

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

This comment has been minimized.

Show comment
Hide comment
@titovanton

titovanton Feb 18, 2013

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...

titovanton commented Feb 18, 2013

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

This comment has been minimized.

Show comment
Hide comment
@kevinelliott

kevinelliott Feb 19, 2013

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.

kevinelliott commented Feb 19, 2013

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

This comment has been minimized.

Show comment
Hide comment
@scharmetant

scharmetant Feb 19, 2013

@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 ?

scharmetant commented Feb 19, 2013

@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

This comment has been minimized.

Show comment
Hide comment
@wroughtec

wroughtec commented Feb 19, 2013

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

:)

@scharmetant

This comment has been minimized.

Show comment
Hide comment
@scharmetant

scharmetant Feb 19, 2013

@wroughtec: fancybox2 does not work with BT 2.3

scharmetant commented Feb 19, 2013

@wroughtec: fancybox2 does not work with BT 2.3

@gtraxx

This comment has been minimized.

Show comment
Hide comment
@gtraxx

gtraxx Feb 20, 2013

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

gtraxx commented Feb 20, 2013

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

This comment has been minimized.

Show comment
Hide comment
@adamdehaven

adamdehaven Mar 14, 2013

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

adamdehaven commented Mar 14, 2013

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

This comment has been minimized.

Show comment
Hide comment
@Yohn

Yohn Mar 14, 2013

Contributor

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

Contributor

Yohn commented Mar 14, 2013

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

@LucTremblay

This comment has been minimized.

Show comment
Hide comment
@LucTremblay

LucTremblay Apr 11, 2013

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

LucTremblay commented Apr 11, 2013

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

This comment has been minimized.

Show comment
Hide comment
@SamSnow

SamSnow Apr 25, 2013

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?

SamSnow commented Apr 25, 2013

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

This comment has been minimized.

Show comment
Hide comment
@anfibolita

anfibolita Jul 9, 2013

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.

anfibolita commented Jul 9, 2013

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.

@twbs twbs 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.