Question

I’m trying to get the fancybox2 to work correctly on my RoR app. I’ve tried the gem and just placing the files directly in my assets directory, but I can’t get the helpers to work.

Now the thumbs (genereted by the helper) dont show up.
Also, the overlays dont seem to be transparent when the cursus is over it, as they should be. See images 1 and 2:

Question is: What am I doing wrong?

Current output is generated with the Fancybox files in the following folders:

/assets/stylesheets/fancybox/jquery.fancybox-buttons.css
/assets/stylesheets/fancybox/jquery.fancybox.css
/assets/stylesheets/fancybox/jquery.fancybox-thumbs.css

/assets/images/fancybox/fancybox_overlay.png
/assets/images/fancybox/blank.gif
/assets/images/fancybox/fancybox_buttons.png
/assets/images/fancybox/fancybox_loading.gif
/assets/images/fancybox/fancybox_sprite.png

/assets/javascripts/fancybox/jquery.fancybox.pack.js

/helpers/jquery.fancybox-buttons.js
/helpers/jquery.fancybox-media.js
/helpers/jquery.fancybox-thumbs.js

welcome.js

(function() {

  $(document).ready(function() {
    return $(".fancybox-thumb").fancybox({
      prevEffect: "none",
      nextEffect: "none",
      helpers: {
        title: {
          type: "outside"
        },
        thumbs: {
          width: 75,
          height: 75
        }
      }
    });
  });

}).call(this);

Outputted HTML:

...
<link href="/assets/fancybox/jquery.fancybox-buttons.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/fancybox/jquery.fancybox-thumbs.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/fancybox/jquery.fancybox.css?body=1" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/fancybox/jquery.fancybox.pack.js?body=1" type="text/javascript"></script>
...
<p>
<a class='fancybox1234' href='http://.../uploads/noimage.jpg' rel='group'>
<img alt='' src='http://.../uploads/small_noimage.jpg'>
</a>
<a class='fancybox1234' href='http://.../uploads/Burgum_Hervormde_kerk.JPG' rel='group'>
<img alt='' src='http://.../uploads/small_Burgum_Hervormde_kerk.JPG'>
</a>
</p>
...

If you need more output or info to help me, please let me know.
Thanks!

---

EDIT: The order of the helpers indeed was the solution to get them to work. The overlays still dont work correctly though, so I’ll have to check whether the CSS is overridden somewhere. Thanks for your help.

Answer 1

Could be a hoisting problem :

The fancybox js file should be loaded before the helpers files so your html output, instead of this

<script src="/assets/fancybox/helpers/jquery.fancybox-buttons.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-media.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-thumbs.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/jquery.fancybox.pack.js?body=1" type="text/javascript"></script>

should be :

<script src="/assets/fancybox/jquery.fancybox.pack.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-buttons.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-media.js?body=1" type="text/javascript"></script>
<script src="/assets/fancybox/helpers/jquery.fancybox-thumbs.js?body=1" type="text/javascript"></script>

Also check your paths to avoid 404 errors since you are loading your css files from fancybox/helpers/ while the js files from fancybox/ (helpers css and js files are normally under the subdir “helpers“)

---

Regarding the black background/overlay in the close and arrows button, most likely you are using a global css rule like :

a:hover { 
 background-color: #000;
}

… so it applies to all anchors, including fancybox’s (arrow/close) anchors. Avoid global declarations and use specificity instead like :

a.myClass:hover {
  background-color: #000;
}

… or

#myContainer a:hover {
  background-color: #000;
}