Easy FancyBox for WordPress

Easy FancyBox for WordPress

Install now

Download Version 1.8.9

Requires WordPress: 3.3 or higher
Compatible up to: 5.0
Downloads: 2522700

Rating: 4.6 out of 5 stars
# Votes: 155

Download

Latest version: Download Easy FancyBox for WordPress 1.8.9 [zip]
Downloaded 2522700 times.

Rated 4.6 out of 5 stars with a total of 155 votes on WordPress.org »

Commercial message:

Screenshots

  1. <p>Example image with <strong>Overlay</strong> caption. This is the default way Easy FancyBox displays images. Other options are <strong>Inside</strong> and the old <strong>Outside</strong>.</p>

    Example image with Overlay caption. This is the default way Easy FancyBox displays images. Other options are Inside and the old Outside.

  2. <p>Example of a YouTube movie in overlay.</p>

    Example of a YouTube movie in overlay.

1172 Comments

I have recursively the same issue with firefox and the youtube embedded videos. It seems Firefox ask to have an https url to play the video, in that case, fancybox don’t work anymore and on click, the youtube page opens in place of opening the lightbox. Is ther a fix for that?

We are wanting to run this on our intranet site that will load and play swf files we have recorded using jing for quick tutorials on internal software. I have it installed and have tested with pdf, jpg and swf and none of them are being detected. Any ideas, it seems that nothing is working just yet…

After updating from 1.3.4.9 to 1.5.5 iframde doesn’t work anymore. When you click on a link you go directly to the page and don’t get the FancyBox.

That’s a little bit difficult. It is an intranet website. There is no access to the website from the Internet 🙁

Hi James, in that case I can not tell you what the issue is… Take a look at the page source code and verify if all the needed script files are included. Notably in the page footer. It might be your theme that is missing the obligatory wp_footer() call? Then use a browser with developer tools (like Chrome or Opera) and check the error/console output to see if there are conflicts with other scripts…

Hi,

Thanks for the response. On the template wp_footer() was disabled. After enabling it was working perfect.
Thanks.

Regards James

I have a pricing table on the website which is created with short-codes and css, and I am having difficulty with a contact-form-7 popup using a URL. How would I add this form to the existing short-code setup at [ http://bit.ly/HxrLeg ] using your plugin?…

`[pricing column=4 title=”Starter” price=”$500″ per=”one time fee” button_url=”/#/” button_text=”REQUEST A PROPOSAL”]`

Hi Terence, I’m not sure but it does not look like you can give a specific class to the link in this pricing table shortcode… To be able to make the button/link display something in FancyBox, you’ll need to give that link a specific class, like “fancybox-inline” for example. If this is possible with the picing table shortcode, then you can make it work. Otherwise, it will need some really specific custom javascript to get it working.

I forgot to mention, I’m inserting my images though NextGen > Insert Media the code gets inserted, the images are not being loaded by Easy FancyBox ?

FancyBox only works on links to media files. If the NextGEN gallery code generates thumbnails that are linked to pages, FancyBox will not be able to do anything with that. You’ll need to configure NextGEN to link to the media files directly instead of attachment pages…

I have the fancybox-iframe class to the “Hope College Logos” link beneath the Download button.

The fancybox opens, but the iframe content isn’t included. I have tested this a number of ways.

Please advise.
Thx
CT

Hi Craig, that’s a weird effect… Funny that in the Opera browser the iframe content is shown, but not in Chromium or Firefox. Did you try linking to any other web page to see if that changes anything?

Hmmm… Google will not be caught in a frame if it can prevent it, so that one is very likely to fail. Otherwise, I have no thoughts on this. Except that looking at your site again in Chrome and Firefox, it works just fine now. Did you change anything?

I like the way it looks and works in Google Chrome but in Firefox the pdf pages are off center. Is it not compatible with Firefox?

If you want to take a look the pdf’s are on the “Print” page of my portfolio…. the United Yellow Pages samples are pdfs.

Hi Wolfram, your theme is loading its own older version of jQuery. You need to fix the theme… Or downgrade Easy FancyBox to version 1.3.4.9.

Do you have plans to update this plugin to support Fancybox 2.x anytime soon? I need the ability to trigger fancybox outside of an iframe when the link is inside one. Appears possible with 2.x.

Hi ryantownley, it is currently not allowed to include FancyBox2 in plugins hosted on WordPress Plugins Directory because of licencing incompatibility. But I’ll be looking into a way to offer easy integration of FancyBox2 in the future.

Hi! Thank you for this plugin.
Is there a way to show a ‘loading’ graphic while large pdf files load in the viewer?

At the moment, a static grey box appears till the entire file has loaded. Users may need to get a visual feedback that the file is being loaded.

Any thoughts on how this can be done?
Cheers

Hi Dee, the FancyBox script cannot detect if object embedded or iframe content has loaded or not. It’s up to the browser PDF plugin which usually means there is just a grey ‘box’. However, there will be an alternative in the Pro extension involving https://docs.google.com/gview

Hi,

Any idea how to add the class=”fancybox-iframe” to the woocommerce “Add to Cart” button. I have the image of the product opening up a popup but now also need the “Add to Cart” button to do the same. (Mine is actually a “More Info” Button)

Thks

Don’t worry, found it. Had to add fancybox-iframe to add-to-cart.php as such : sprintf(‘<a href="%s" rel="nofollow" data-product_id="%s" data-product_sku="%s" class="%s button product_type_%s fancybox-iframe"

I turned on WP Debug for an entirely unrelated reason, and immediately received the following:

Strict Standards: Non-static method easyFancyBox::register_settings() should not be called statically in /data/blogs/wp-content/plugins/easy-fancybox/easy-fancybox-class.php on line 546

Strict Standards: Non-static method easyFancyBox::register_settings() should not be called statically in /data/blogs/wp-content/plugins/easy-fancybox/easy-fancybox-class.php on line 311

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method easyFancyBox::register_scripts() should not be called statically in /data/blogs/wp-includes/plugin.php on line 429

Please advise.
Thx
CT

How would I refresh the parent page after closing popup? I have an “add to cart” on the iframe popup but onClose (afterClose) I need the parent page to refresh so that the cart gets updated.

I tried :

$(“.fancybox”).fancybox({
type: ‘iframe’,
afterClose: function () { // USE THIS IT IS YOUR ANSWER THE KEY WORD IS “afterClose”
parent.location.reload(true);
}
});

but doesn’t seem to work with easy fancybox.

Hi mistrmint, if you can edit the add to cart button, try adding the javascript call parent.$.fancybox.close();

Sorry, Craig. It looks like the comment system ate your code snippet. Try wrapping code in <code></code> tags and replace all < characters inside that code snippet with &lt; to prevent them from being interpreted…

Every time I try, it says “invalid security token” or it comments nothingness.

base target=”_parent” /

Use that in the head, with the normal less than and greater than around it.

I do not see any “click here” link. Besides, it looks like you are already using TWO other lightbox plugins (form-lightbox and lightbox-plus) at the same time so I strongly advise against installing a third one…

[…] Easy fancy box: Easy FancyBox plugin for WordPress websites gives you a beautiful and flexible lightbox solution for most of your WordPress site links.It contains  a  jQuery extension and it is Multi-Site compatible.After you activate the plugin, you can access it on your Settings > Media dashboard page where you can manage different options along with some extra features. […]

Hi Rose, your theme is incompatible with my plugin (most Elegant themes are) since it has fancybox already baked in.

Hi,

First great plugin works great, I’ve used a few times.

But now I’m facing a challenge about it. The fact is that I’m building a single page blog and the one thing missing is a gallery plugin. The thing is that I create the gallery using the add media button on the post editing area, and works great, the gallery is added, the thumbnails are generated and if you look the images in dev tools everything looks normal (no errors on the console or strange things in the html code), but when you click an image it loads the image in the browser tab/window, not the typical fancybox container on top of the overlay.

The question, is there some function that needs to be executed when the post is loaded in order so the plugin can take control over the click event (I presume the preventDefault is missing, therefore the image loads the old fashion way)?,

If I look at the header of the single page blog and the page with the post address I don’t see anything different(same scripts and stylesheet, also same html markup in the images) between both instances and I also see this in both at the bottom of the code:

I’m loading the posts using jQuery’s ajax-get method and getting just the content and comments container, nothing else.

Any idea on how can I solve this?

Best,
Rodrigo.

Hi Rodrigo, the fact that post content is loaded via AJAX is likely the cause of the issue. My plugin searches for and binds FancyBox to media links on two events: document ‘ready’ and ‘post-load’. Apparently, the theme does not trigger the ‘post-load’ event after loading new post content via AJAX. Do you know if there is an event triggered at that point at all by the theme script? And if so, what name (handler) does it have?

Hi

Thanks for the quick reply.

Actually there are two AJAX callbacks in this case. The first one is when the post data is received and a second one that’s launched to preload the images data. On the first Ajax call the post content is looked up in order to see if there’s any images on it, since there are, the callback preload the images data and when all the images are completed a new callback is triggered to change the content container display.

I made the entire code (which is not much, around 300 lines) and it uses jQuery no conflict, the main idea is a minimalist blog.

Thanks again for your reply AMD sorry for the delay in my followup.

Rodrigo.

Hi,

I forgot to mention the callbacks names.

The first callback is processAjaxResult(data), this function basically get the response and checks if there’s any on the post, if there is it calls a second ajax call to preload all the post’s images. The callback for this function is showAjaxResult(), which basically changes the container’s display property and animates the its height and opacity, both from 0. The second callback is the best because with that you make sure everything is loaded and in place to show the post, kind of a window.onload event.

I’ll be very thankful if you could indicate me what should I add to one of this calls in order to make the plugin work.

Thanks,
Rodrigo.

Hi Rodrigo, if anywhere in one of these callback functions you see a possiblity do add a line like
this.body.trigger( 'post-load' );
then in theory, FancyBox should kick in and bind to any new media links that are available at that point.

Hi,

Thanks for the response.

I’ll try that, but in the mean time I looked around the fancybox docs and in Stackoverflow and I ended up registering and queueing the JS and CSS of fancybox and made a regular jQuery(“.fancybox”).fancybox(); call.

As I mentioned before I took advantage of the first ajax callback which looks the response data for images, to add the fancybox class. Also I added a bit of code to look for galleries and add the rel attribute to each gallery depending on the gallery’s parent DIV ID.

Then when all the images are loaded I call the fancybox() function with the parameters and change the display of the post container, to prevent people clicking on an image before the fancybox method is called.

Rodrigo.

Hi! I really love your plugin but I’m having some troubles with Easy Fancybox on a website:

1. I’m using Easy Fancybox with NextGen Galleries. This works fine, except that Easy Fancybox won’t show the whole Gallery if I turn off NGG’s own lightbox effect. I don’t know if this has some effect on how images are displayed or other plugin functions.

2. I can’t get the fancybox-effect to turn off on mobile devices. I’ve tried your code:

if(window.screen.width < 500 || window.screen.height < 500) { jQuery(document).off('ready', easy_fancybox_handler); }

AND Photoswipe to disable fancybox, but nothing seems to work.

3. Is there anyway to determine maximum height or width (preferably in percents even) for fancybox/images opening in fancybox. I haven't been able to find any solution.

Webpage address: http://www.floraandlaura.com. I've blocked fancybox action on mobile for time beeing by changing the link to imagegallery for a link to facebook on mobile..

I would really appreciate any help on these issues!! Thank you!

Hi Sari, better not use the FancyBox included with NextGEN Gallery together with the one included in Easy FancyBox. Either keep the option in NextGEN activated and disable my plugin, or disable the lightbox option in NextGEN and keep my plugin. But not both…

To disable the FancyBox in Easy FancyBox for smaller screens, try:

/* Disable fancybox for small screens */
var pixelRatio = window.devicePixelRatio || 1;
if(window.innerWidth/pixelRatio < 641 ) { easy_fancybox_handler = null; };

Inside script tags, of course. One small tip: if you want to place comments in text widgets, place them inside the script tags too or else they will be part of the HTML.

Thanks for a quick response! The problem is, that your plugin is betterlooking and somehow easier to customize, and therefore I would love to disable NextGen’s fancybox, BUT this also blocks the gallery from displaying. So for some reason, if I disable NextGen’s lightbox effect the “references” -link only shows the first picture. Not the whole image gallery. Any idea what might cause this..?

Oh my, I had missed one step. Sorry about that and thank you!!!

Now the first issue is resolved. I still haven’t managed to turn Fancybox off on mobile though. So no luck changing it to e.g. photoswipe. Would you have any other solutions on this?? I’ve tried quite a few codes including this:

/* Disable fancybox for small screens */
var pixelRatio = window.devicePixelRatio || 1;
if(window.innerWidth/pixelRatio < 641 ) { easy_fancybox_handler = null; }; Thank you for the help!! Sari

Hi Sari, from my side it actually works fine. Remember you have to reload the page if you are testing it by making the browser window 640px (or less) wide… Also note that on a device with a different pixelRatio (newer devices with high density screens) the max width will be calculated differently.

Hi, Im getting the error on “jQuery(document).on(‘ready post-load’, easy_fancybox_handler );
” in IE it throws an error but in Chrome it suppresses it however the images and SWF are not loading in fancybox, any ideas?

Thanks

Hi Tim, this usually means your theme (or another plugin) is forcing WordPress to use an older (pre 1.8) version of the jQuery library. What is the error exactly? Or can you share a link to the page where this is occurring?

Hi Danny, I’ve seen issues with other plugins that compress/minify script files too. The script files in Easy Fancybox are already minified so that might be the problem… Is there an option in Autoptimize to exlude certain script files from being treated? If so, start with excluding jquery.fancybox-1.3.6.pack.css jquery.fancybox-1.3.6.pack.js and maybe jquery.mousewheel.pack.js and jquery.metadata.pack.js too.

Has anyone had any luck with getting autoptimize and easy fancybox to work together? I added this to the JavaScript exclude line:

jquery.fancybox-1.3.6.pack.js,jquery.easing.pack.js,jquery.mousewheel.pack.js

but it still does not work. When I turn off JavaScript optimization in Autoptimize, easy fancybox works again. Anything I could be missing? (The CSS optimization setting in Autoptimize works fine.)

hello – this is a great plugin however I am having issues with youtube links.

i am using nextgen gallery and have followed all the instructions in the FAQ above – but when I add a youtube link into the title of the image it opens up the image and places the youtube video underneath.

feel like I am close but maybe missing something? I have added the script above the footer – where the google analytics script goes and I have also tried the widget option.

I would greatly appreciate any suggestions.

thank you.

Hi mrcavallo, I’m not following you. Maybe a link to the web page in question helps me understand 🙂

FancyBox completely stopped working for me after I updated to WordPress 3.9. When I click the image, it just takes it to the image URL. Is anyone else having problems?

Hi DoanPhuong, I have not had such reports yet and am currently working with the Easy FancyBox development version on a WP 3.9 installation. Would you be willing to test it and upgrade to the development version? Download the zip from http://wordpress.org/plugins/easy-fancybox/developers/ under Other Versions and uninstall your current Easy FancyBox plugin, then install the zip via the Upload tab on the WP Plugins > Add new page.

Please let me know the result and if it’s still not working please share a link to your site if you can. Thanks! 🙂

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: