search

gavinkflam / lightbox2-rails

Lightbox2 for Rails asset pipeline
MIT License
22 stars 22 forks source link

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

Open JakeTheSnake3p0 opened 8 years ago

JakeTheSnake3p0 commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

https://github.com/gavinkflam/lightbox2-rails/compare/master...JakeTheSnake3p0:master

bartimaeus commented 8 years ago

@JakeTheSnake3p0 thanks! Your fix worked for me too

mvz commented 8 years ago

How about a pull request?

gavinkflam commented 8 years ago

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

johansmitsnl commented 8 years ago

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

stex commented 8 years ago

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

johansmitsnl commented 8 years ago

Any eta for a new release?

1v commented 7 years ago

Obvious.

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

Should be in README.

ums-uk commented 7 years ago

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)