Skip to content
This repository has been archived by the owner on Nov 28, 2023. It is now read-only.

Lightbox fails to attach event handler to elements and also fails to work at all #9

Open
JakeTheSnake3p0 opened this issue Apr 4, 2016 · 10 comments
Open

Lightbox fails to attach event handler to elements and also fails to work at all #9

JakeTheSnake3p0 opened this issue Apr 4, 2016 · 10 comments

Comments

@JakeTheSnake3p0
Copy link
Contributor

The JS file is included in the head and apparently that results in the event 'click' handler not being applied to the element. When I put //= require lightbox in its own JS file and included it near the bottom of the <body> tag the event handler was successfully attached.

However it still didn't help anything as the link still navigates directly to the image and doesn't stay on the page and load the lightbox.

My link has data-lightbox="weddings" attribute. Also for what its worth, the JS console reads (in Google Chrome): Resource interpreted as Document but transferred with MIME type image/jpeg: "[image URL]".

I'm using jQuery v2.2.1 (using jquery-rails and //= require jquery2 inside of application.js)
@enstain
Copy link

enstain commented May 10, 2016 •
edited
Loading

I have no idea why it doesn't work in some cases, because I have a rails project with lightbox2-rails already and it works just out of the box, but anyway there is one point about lightbox – it's required to be load after page is loaded. I found some ugly way (but it works, so anyway) to put lightbox script in <body> instead of <head>

Usually we put //= require lightbox in the application.js manifest file. So, we need to get rid of this line in application.js, also add new line after //= require_tree .:

application.js:
...
//= require lightbox - remove this line
//= require_tree .
//= stub footer - add this line

Next, we create another manifest file footer.js for scripts which we want to load in <body>. We've stubbed this file already in application.js, so follow next steps. Content of footer.js:

footer.js:
//= require lightbox - you can add another scripts, which need to be load same way

Next step, edit layout file (views/layouts/application.html.erb) and add <%= javascript_include_tag "footer" %> just before </body> as usual.

And after all, we need to precompile new manifest file:

config/initializers/assets.rb:
...
Rails.application.config.assets.precompile += %w( footer.js )

@JakeTheSnake3p0
Copy link
Contributor Author

This may be in reference to a prior issue. I forked another repo that had the fix and it's been working for me.

master...JakeTheSnake3p0:master

@bartimaeus
Copy link

@JakeTheSnake3p0 thanks! Your fix worked for me too

@mvz
Copy link

mvz commented Jul 13, 2016

How about a pull request?

@gavinkflam
Copy link
Owner

@mvz Merged, Thanks Mat
Will test it out and release an update

@johansmitsnl
Copy link
Contributor

Just tested the patch and I can confirm that it works.
Without the change it does not work.
+1 for a release.

@stex
Copy link

stex commented Aug 29, 2016

@gavinkflam As the fix is already merged, could you release a new gem version?

@johansmitsnl
Copy link
Contributor

Any eta for a new release?

@1v
Copy link

1v commented Feb 3, 2017

Obvious.

$(document).on('turbolinks:load', function(event) {
  lightbox.init();
});

Should be in README.

@ums-uk
Copy link

ums-uk commented Mar 14, 2017

Could not get working - switched to updated gem here: https://github.com/johansmitsnl/lightbox2-rails (Thanks to johansmitsni for updating & saving to having to debug issue)

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@mvz @stex @ums-uk @bartimaeus @enstain @JakeTheSnake3p0 @1v @gavinkflam @johansmitsnl