Skip to main content

Colorbox & Turbolinks load

Javascript • Asked by Thomas M

Hello,

Rails 5.1.0 & Turbolinks5 & Jquery3.1.2 here

I'm trying to make jQuery Colorbox works with dynamicly loaded elements (using ActionCable) with no luck.

With the implementation below, Colorbox is tied to a 'on click' event on the parent element, wich allows the newly loaded elements to be recognized automatically. However, this might not be the best option since colorbox seems to be ignored on all element when the user comes form another page (turbolinks:load), and is not available in console. Everything works fine on page reload.

What do I miss? Thank you in advance for your help

Here is my implementation:

class @GalleryLoader
  constructor: (@container,@elem) ->
    @setEvents()

  setEvents: ->
    $(@container).on 'click', @elem, @handleClick

  handleClick: (e) ->
    e.preventDefault()
    $(this).colorbox
      transition: 'fade'

$(document).on 'turbolinks:load', ->
  if (($ "[data-behavior='project-media-parent']").length)
    new GalleryLoader "[data-behavior='project-media-parent']", "[data-behavior='medium-link']"
    ```

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 24,647+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.