0

I got this piece of jquery code. It basically calls the justifiedGallery plugin with some options, and once the images to display are loaded, another plugin (called colorbox) looks for the <a> tag to add a lightbox functionality to every single hyperlink of the image collection.

I need to use turbolinks in Rails 5 and from what I read turbolinks:load is a way to make that work. And it actually does: When I go to that page the justifiedGallery does it's job perfectly but the second part on('jg.complete', ... does not. Meaning that I need to refresh the page exactly once in order to get the lightbox working. 

$(document).on('turbolinks:load', function() {
  $('#justified-collection').justifiedGallery({
    lastRow: 'nojustify',
    rowHeight: 160,
    rel: 'gallery1',
    margins: 2
  }).on('jg.complete', function() {
    $(this).find('a').colorbox({
      maxWidth: '80%',
      maxHeight: '80%',
      opacity: 0.8,
      transition: 'elastic',
      current: ''
    });
  });
});

The second .on part is actually scoped within the turbolinks:load bit, so I would think that it takes that into consideration, but no.

My question is how can I make turbolinks "recognize" this last bit? I'm still a jquery and javascipt beginner, so please be patient :)

loxosceles
  • 347
  • 5
  • 21
  • Try [this](http://stackoverflow.com/questions/18770517/rails-4-how-to-use-document-ready-with-turbo-links). – Omkar Mar 15 '17 at 05:17
  • You think that this problem is connected to turbolinks, but are you sure? Making something being called by refreshing the page in jquery is very common. There could be many reason the function is triggered. So, are you sure that this jquery `.on('jp.complete`, function (){})` function wound work outside the rails environment of turbolinks? Did you think of disabling turbo links and setting this in the normal `$(document).ready()` for testing purposes.. Let us know so that we can address your issue.. If I want to make something work with jquery, I build it outside rails because I am a beginner – Fabrizio Bertoglio Mar 15 '17 at 07:49
  • @Omkar: That is exactly what I tried. For Rails 5 it suggests to use `$(document).on('turbolinks:load', ...' which is what I did. The other solutions are aimed at Rails 4, but Rails 5 and Turbolinks 5 seem to work differently. – loxosceles Mar 15 '17 at 09:36
  • @FabrizioBertoglio: I tried what you suggested, switching to the `$(document).ready()` option. What happens is that the first function (justifiedGallery) also needs a refresh, not only the lightbox. I am pretty sure that the code works fine since it is taken from the justifiedGallery website on how to implement this and also, after refreshing once it works perfectly. I also disabled Turbolinks completely with the same result as mentioned before. – loxosceles Mar 15 '17 at 09:43
  • Add `console.log("Start");` before `$('#justified-collection').justifiedGallery({` and `console.log("End");` at the end of function and check JS console for errors. This will help you to rectify whether Turbolink is giving problem or your gallery plugin. – Omkar Mar 15 '17 at 10:09
  • @Omkar: I followed your advice. No errors show up, though. I added a `console.log("Inside jp.complete")` inside the second and strangely it shows up **before** the refresh. So the function runs in time but the lightbox still only works after the refresh. – loxosceles Mar 15 '17 at 15:37
  • 1
    Hello, what event is jp.complete? What do I need to recreate this issue for testing in a jquery Environment? Could you share your github so that I can try to clone the project and find a solution? Thanks. I want to test this function to see if i can help you – Fabrizio Bertoglio Mar 15 '17 at 19:30
  • Try [JQuery Turbolinks gem](https://github.com/kossnocorp/jquery.turbolinks) – Omkar Mar 16 '17 at 05:04
  • @Omkar: I tried JQuery Turbolinks and it didn't work. I am right it works for Rails 4 but not for Rails 5. – loxosceles Mar 16 '17 at 23:20
  • @FabrizioBertoglio: Unfortunately I can't share the original repo but I isolated the problem into another project in order to solve the problem. Here is the github repo: https://github.com/loxosceles/rails_fileupload_test. Feel free to clone and play around. – loxosceles Mar 16 '17 at 23:22

0 Answers0