{"action":"opened","issue":{"url":"https://api.github.com/repos/gavinkflam/lightbox2-rails/issues/1","labels_url":"https://api.github.com/repos/gavinkflam/lightbox2-rails/issues/1/labels{/name}","comments_url":"https://api.github.com/repos/gavinkflam/lightbox2-rails/issues/1/comments","events_url":"https://api.github.com/repos/gavinkflam/lightbox2-rails/issues/1/events","html_url":"https://github.com/gavinkflam/lightbox2-rails/issues/1","id":54986322,"number":1,"title":"Lightbox overlay duplicates when using turbolinks","user":{"login":"nudzg","id":5119900,"avatar_url":"https://avatars.githubusercontent.com/u/5119900?v=3","gravatar_id":"","url":"https://api.github.com/users/nudzg","html_url":"https://github.com/nudzg","followers_url":"https://api.github.com/users/nudzg/followers","following_url":"https://api.github.com/users/nudzg/following{/other_user}","gists_url":"https://api.github.com/users/nudzg/gists{/gist_id}","starred_url":"https://api.github.com/users/nudzg/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nudzg/subscriptions","organizations_url":"https://api.github.com/users/nudzg/orgs","repos_url":"https://api.github.com/users/nudzg/repos","events_url":"https://api.github.com/users/nudzg/events{/privacy}","received_events_url":"https://api.github.com/users/nudzg/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-01-21T07:25:30Z","updated_at":"2015-01-21T07:25:30Z","closed_at":null,"body":"How to reproduce:\r\n\r\n1. Load page\r\n2. Follow some (internal) link (this time, page is loaded using turbolinks). It's working nice at this point.\r\n3. Follow another (internal) link\r\n4. Now there's another div#lightboxOverlay and div#lightbox at the bottom of body and the browser is showing the spinner inside the empty overlay.\r\n\r\nJavascript is included at the bottom of body:\r\n\r\n    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>\r\n\r\nA workaround that worked for me was adding div#lightbox-container at the top of the body and modify lightbox.js in Lightbox.prototype.build function:\r\n\r\n    $('#lightbox-container').html('');\r\n    $(\"<div id='lightboxOverlay' class='lightboxOverlay'></div><div id='lightbox' class='lightbox'><div class='lb-outerContainer'><div class='lb-container'><img class='lb-image' src='' /><div class='lb-nav'><a class='lb-prev' href='' ></a><a class='lb-next' href='' ></a></div><div class='lb-loader'><a class='lb-cancel'></a></div></div></div><div class='lb-dataContainer'><div class='lb-data'><div class='lb-details'><span class='lb-caption'></span><span class='lb-number'></span></div><div class='lb-closeContainer'><a class='lb-close'></a></div></div></div></div>\").appendTo($('#lightbox-container'));\r\n\r\nI was unable to find anything better :-("}}