Ask A Question

Notifications

You’re not receiving notifications from this thread.

Colorbox & Turbolinks load

Thomas M asked in Javascript

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']"
    ```
Reply
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 81,842+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more.

    © 2024 GoRails, LLC. All rights reserved.