0

I am using fancybox 2 to display larger popup images for a series of thumbnail images. On first page load, clicking the images fails to load the fancybox popup. I see the slight blip of the loading spinner and if I open the web inspector I see the fancybox loading div for a split second before it disappears.

If I refresh the page, however, the fancybox page works just fine. This happens consistently across all pages with the same fancy box setup and occurs in both Safari and Chrome. Images are being stored on Amazon S3.

Any ideas?

//Javascript

$(function() {
  return $(".fancybox").attr("rel", "gallery").fancybox({
    beforeShow: function() {
      return $.fancybox.wrap.bind("contextmenu", function(e) {
        return false;
      });
    }
  });
});


<!-- HTML -->
<a class="fancybox" href="/some/larger/image.jpg">
  <img src="/some/thumbnail/image.jpg" />
</a>
Eric M.
  • 5,399
  • 6
  • 41
  • 67
  • How about a jsfiddle? Also, I'm not seeing a rel attribute in your html. – Macsupport Oct 04 '14 at 03:51
  • 1
    @Macsupport : `rel` is being set by the script – JFK Oct 04 '14 at 07:16
  • @Macsupport Hrm, I haven't been able to reproduce the behavior in a JSFiddle -- copied the HTML and referenced the js+css directly and it works just fine. Still not sure what's causing the issue on the actual site though. – Eric M. Oct 04 '14 at 13:01
  • @JFK: I have also noticed that the page won't scroll after clicking on one of the images. When I hit ESC the page functions again. Leads me to believe Fancybox is being triggered, but not displaying? – Eric M. Oct 04 '14 at 13:13
  • http://jsfiddle.net/cirenyc/bfqv0uxw/ and sample page http://playamax.herokuapp.com/communities/4 – Eric M. Oct 04 '14 at 13:13
  • Way too much code for me to wade thru but I do get this error in firebug which may help localize it.'TypeError: $.fancybox.wrap is null ...llery").fancybox({beforeShow:function(){return $.fancybox.wrap.bind("contextmenu... applica...d552.js (line 4, col 15009)' – Macsupport Oct 04 '14 at 14:27
  • @Macsupport Sorry about that. Updated the fiddle to have just the relevant stuff. I also removed the $.fancybox.wrap.bind code but still have the same issue. http://jsfiddle.net/cirenyc/bfqv0uxw/4/ – Eric M. Oct 04 '14 at 15:03
  • 1
    Your fiddle works fine for me. It has jQuery 2.1 and your site is using v1.11.1. Of course it may not be relevant but worth a try to use 2.1 on your site? – Macsupport Oct 04 '14 at 15:27
  • 1
    @EricM. : the URL in your `href` attributes has this trailing parameter `?1411310947` check http://stackoverflow.com/a/17554660/1055987 if this is not your case (most likely) – JFK Oct 04 '14 at 18:29
  • @Macsupport No luck with 2.x. It should work fine with that version as it's the same version used on all of the fancyapps.com examples – Eric M. Oct 04 '14 at 19:04
  • @JFK Also tried explicitly setting data-fancybox-type=image on the anchor tags but still no luck. I thought for sure that was going to be it! – Eric M. Oct 04 '14 at 19:05
  • I just happened to notice the difference in the resource list within web inspector between clicking to the url and refreshing the url. Turns out the issue is with Rails' turbolinks. I've removed it entirely and it works just fine. This (https://reed.github.io/turbolinks-compatibility/fancybox.html) makes it seem like it should work, but definitely still an issue. – Eric M. Oct 04 '14 at 19:13
  • I'm going to look into a solution for using it with turbo links and answer my own question. Thank you both for the input. Definitely helped me rule out a few possibilities. – Eric M. Oct 04 '14 at 19:13

1 Answers1

0

This turned out to be a turbolinks issue. I tried some of the suggested event listeners to no avail:

$(document).on "ready page:load page:restore", ->
  // Do fancybox

And just ended up disabling turbolinks on links to pages that utilize fancybox. Not ideal, but it solved the issue.

Eric M.
  • 5,399
  • 6
  • 41
  • 67