bitbonsai/facybox

A jQuery-based, Facebook/Fancybox-style lightbox which can display images, divs, or entire remote pages. Based on fancybox.net and famspam.com/facebox

bitbonsai

$ npm install bitbonsai

and

console.log(require('bitbonsai'));

To get my contact information.

Credits

Shameless fork of rauchg

Thanks to John K Paul for the idea, and this tweet for pointing it out!

facybox's Issues

facybox Ignores the Content-Type header

When trying to display an image without an extension (e.g. by using send_file in a rails application for securing access to that file) facybox will ignore the Content-type header returned by the web server and display garbage to the end user. facyBox should instead also include a list of recognized mime types that it knows are images that can be displayed inline, similar to the imageTypes setting and display those images inline.

Preloading images in Firefox doesn't work

Firefox wasn't preloading images because the regex used to pull the image URL out of the background-image CSS didn't cover the format that Firefox uses (surrounding double quotes). This branch fixes this problem.

http://github.com/rmm5t/facyBox/tree/fix_preload_images

Relelvant commit:

http://github.com/rmm5t/facyBox/commit/a3ce2866171ac612f6b3b75770f8ae58a66c7331

IE (any version) /none image request

There seems to be a bug with the fixPNG function where it causes IE to make a request for an image for the background-image style with a url that has 'none' in it. This is generating error messages in my application because that url is not a valid request. My solution was to change this:

$(this).css({
                    'backgroundImage': 'none',
...

to this:

$(this).css({
                    'backgroundImage': '',
...

I'm not positive of the repercussion of this change for others, so I will leave it for you to decide if this breaks anything or not.

Thanks,

-Jim

I have verified on IE9 this works, but I don't have access to older versions of IE to test with.

Demos in homepage do not work.

Demos at homepage do not work. Probably because page throws the following JavaScript error: Uncaught TypeError: Cannot read property 'msie' of undefined

facybox positioning is off center for chrome (with adblock plus)

I've noticed that the facybox positioning is off center for chrome browsers which are running the adblock plus extension specifically.
I'm not entirely sure why this is the case, but was hoping someone here has run into this problem before and knows the solution.

thanks!

ie6 select always on top

There is a known issue in ie6 where select/dropdowns will always show on top of other dom elements including a facybox pop-up. It seems like the accepted work around is to stick an iframe in between the pop and the dropdowns in zorder. It would be nice if this was integrated directly into facybox. See: http://www.welove72.com/blog/2009/01/ie6-select-element-always-on-top/

Dynamically loaded content problem

Dear developer,

My problem is as follow: I load content into a div on a page. The dynamically loaded content contains hlinks with the attr rel="facybox"
If i load the content regular via php it works fine, but when I load it dynamically with the .load() function the hlinks just open a regular new window and not the nice facybox ones.

My code is as follows:
$('a[rel*=facybox]').facybox();
$('#dynfrontpageres').load('someurl/request.ajax.php?action=requestfrontpageresume');

I've tried using the live() like this: $('a[rel*=facybox]').live().facybox(); but with no luck..

Hope you can help:-)

need to alter JS if moving image location

you provide a css file for changing image locations, but also the line 288

img.src = 'images/loading.gif';

needs altering ...

Facybox title below image

Is there a way for facybox to display image title from a href attribute below the image?
also to add additional content such as social media links?

currently have it working in a wordpress installation using jquery Isotope for laying out images(or posts in the loop).

with this:

<a href="#" rel="box" class="item" title="<?php the_title();?>"><?php the_content();?></a>

<script>
$("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").facybox();
</script>

Advanced Gallery Configuration

How do I link to different images within the same gallery?

For example, say I have two thumbnails and I want them to open their respective image within the gallery. How would I modify the jQ?

<style> #open_gallery1 { background:url("demo/logo-facybox_thumb.png") no-repeat scroll 0 0 transparent; border:6px solid #000000; display:block; height:90px; text-indent:-9999px; width:120px; } #open_gallery2 { background:url("images/coffee_48x48_thumb.png") no-repeat scroll 0 0 transparent; border:6px solid #000000; display:block; height:90px; text-indent:-9999px; width:120px; } .gallery a.thumb { color:#000000; float:left; font-size:14px; font-weight:bold; line-height:12px; text-decoration:none; } .gallery a.thumb:hover { color:#FFFFFF; text-shadow:0 0 4px #000000; } </style>

<div class="gallery">
  <p><a style="cursor: pointer" id="open_gallery1" class="thumb">image</a></p>
  <p><a style="cursor: pointer" id="open_gallery2" class="thumb">image</a></p>
  <script>
    jQuery('#open_gallery').click(function(){
      jQuery.facybox({images:['demo/logo-facybox.png','images/coffee_48x48.png']})
    });  
  </script>
</div>

Can't get the facybox to close in IE

Hi,

I'm not so good with jquery, but I'm having trouble with closing the facybox in IE. (Have tested it in IE6 -> 9)

I use this function:
$('a[rel=closefacybox]').click(function(){
$(this).trigger('close.facybox');
});
The manual close function (or whatever the correct term is) works fine in Firefox and Chrome. Someone else out there experienced the same?

Spin.JS

Using Spin.JS For Loading Demonstration

A few issues

When I've been opening an overlay in Firefox using the latest version of FacyBox and JQuery, it has been causing the divs in the background page to overlap each other. I'm not sure if this is an issue in IE, but it hasn't happened in Safari or Chrome.

Also, when I open an external page in an overlay, the divs get messed up there, too. Is there a setting in FacyBox that assigns a maximum size for overlays, or is this a different issue?

The last issue I'm seeing is that when you have accessed a page from the menu, and then hit back and returned to the menu, it stops working. You have to click on it before it will do anything.