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 »

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.

1176 Comments

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…

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! 🙂

Hi Shamo, without clicking anything I already see three warnings:

Invalid App Id: Must be a number or numeric string representing the application id.
The "fb-root" div has not been created, auto-creating.
FB.getLoginStatus() called before calling FB.init().

Please check your share button settings. I don’t think this is related to FancyBox.

Hi Marcel, redering of PDF files inside a browser is dependant on a browser plugin. This is also the case with PDFs inside a FancyBox lightbox frame. Most visitors (unless your visitors are mostly Mac users) will be using a browser with either the Adobe Acrobat Reader plugin or the Chrome PDF Viewer plugin. In the first case, adding a the parameter #toolbar=0 ( see more parameters on http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf ) to the file URL might help. In the latter case, I’m not sure if you can disable the save button at all…

I’m trying to use your plugin on my WordPress site, inside a widget box, to play a video widget.
First, I installed and activated the plugin, but I see no FancyBox setting on my Settings>Media page to activate inline content. How do I find them?

Next, after I activate the inline setting, where’s the correct place to insert your code? My current video code starts and ends with an

Hi Lynn, first things first: there should be a FancyBox section on your Settings > Media admin page after activating the plugin. If not, there is something going wrong. Can you check to see if the plugin is indeed activated and if not, try again and look for any error messages… Otherwise, you might try to find related errors if you have access to server/hosting error logs. Please let me know if you find anything.

Hi Carole, although in theory possible, it is more complicated than is sounds. You’d have to modify the form (plugin?) so that it issues a javascript:jQuery.fancybox.close(); command but only upon success. Not on failing user input (missing e-mail address for example) else the user will not see the input errors allowing him/her to correct them and submit again…

I have posted this before for another project but couldn’t come right, been struggling for a week now to get it working.

I want to use a fancybox popup when I click on a product in the woocommerce shop.

I added class=”fancybox-iframe” to the content-product.php file in woocommerce :

<li <?php post_class( $classes ); ?>>

<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

<a href="<?php the_permalink(); ? rel="nofollow">" class="fancybox-iframe">

and the popup works fine.

If the user chooses not to add the product and just close the popup than that’s fine, it works as it should.

But,

If the user chooses to add a product, what needs to happen is that when they click “Add to Cart”, the popup must close and refresh the shop (parent) page so that the cart gets updated.

Any ideas what I need to add to where to get this to work?

Hi Rowlan, to close a fancybox iframe you will need to issue a javascript command: parent.jQuery.fancybox.close();

But it might be easier to hook into Woocommerce to make it do a page refresh after adding anything to the cart. A page refresh will update the visible cart content and remove the lightbox at the same time.

Wonder if you can help with this? I’ve used the plugin several times in the past and it’s great, recently however i noticed that enabling the plugin causes my cycle2 slideshow to briefly display all of it’s slides on page load despite the measures i’ve taken to avoid this (display: block on first slide, display: none on the rest).

I realise it may be an issue with Fancybox itself, but since i don’t need fancybox on the page where my slideshow is, is there a way to -not- include it for that page specifically using this plugin? Any help appreciated!

Hi Andrew, to disable fancybox on your homepage you need to place the following script snippet on that page only. Either in the page content, or in the page template before the wp_footer()) call, or in a widget that only shows on the home page with JetPack module Widget Visibility (for example). Use the code:

<script type="text/javascript">
easy_fancybox_handler = null;
</script>

Any ideas why jQuery.fancybox.open([ ] { });

Isn’t working / or how to use this same kind of API call with the Easy Fancy Box plugin?

On a page where I have everything working as usual with the plugin, if I put into the console:

$.fancybox.open([
{
type: ‘inline’,
href : ‘#fancyboxID-signup’,

}
], {
padding : 20
});

— or jQuery.fancybox.open etc …

I get back that TypeError: undefined is not a function– where #fancyboxID-signup is successfully launched in the modal when clicking on an image with that value in the href.

I see it working on http://jsfiddle.net/NDM5F/ — and I see that jquery.fancybox.js is being loaded by Easy Fancy Box plugin… so I just can’t seem to figure out why I’m not able to fire a modal open using the API in this way.

Thanks for pointing me in the right direction to a different tutorial or method to open a modal.. ultimately what I’m trying to do is open the modal on the 2nd time someone clicks an object.

I’m already using Easy Fancy Box all over the site & love how it kind of springs out from the point clicked.

So I’m wanting to use it for this as well, but here I can’t simply link the thing… though I suppose a hack would be to add the href attribute to the thing on the second click hmmmmm

but alas I still need to launch a modal via pure javascript for another reason.

Thanks!

Hi, there. I’m a big fan of this plugin. But currently I’m facing an issue that Google master tool reminds me about malware in “easy-fancybox/jquery.easing.pack.js?ver=1.3” This happens twice. First time was false positive, I think this time is false positive as well. The sample malware snippet is:

document.write('<style>.ifbeky { position:absolute; left:-1007px; top:-1975px} «t;/style> <div class="ifbeky"><iframe src="xxxxxx" width="314" height="107"></iframe></div>');

But every time Google reminds me this I still couldn’t find it out. Refer to the reply here: (https://wordpress.org/support/topic/malware-in-this-plugin?replies=5) I think it is just a false positive but really annoying(Because Google Chrome gaves alarm page to my visitors). I’ve tried remove Easy FancyBox and re-install it for sure there is no injected code in the file. Do you know how is this happened?

Hi Banlei,

That code does look very suspicious (I removed the URL because it points to site that includes malware!). It is however not part of the easy-fancybox/jquery.easing.pack.js file when installed fresh from the WordPress directory. If that code it is indeed included on your site, please consider it a (very) high possibility your site was hacked.

Happy to see the problem is not from this plugin. Thank you.

————-Things that not related to 【Easy FancyBox】
The thing is, those suspicious snippet provided by Google master tool doesn’t exist on my whole site content. Funny thing is, Google master tool started detect my webpage which I was deleted for a year, and Google marked it as suspicious code and gives me with suspicious code sample… Have you seen this condition before?

Hi BianLei, no I have not seen that before. Checking your site on http://sitecheck.sucuri.net/ does indeed reveal it as being blacklisted. You’ll need to perform an in-depth investigation into if any and what files where actually changed on your site (you can use a simple FTP program to see file modification dates) and find which files have bad code inserted. After you have cleaned your site (not only the bade code itself but also the security hole they used to get in!!) then you can use the “Request Review” link in your Google Webmaster Tools account.

Hi kan8net, yes you may. And I will answer: “Because the licence under which fancyBox2 is distributed is incompatible with the terms of hosting on the WordPress.org Plugin Directory.” Not GPL, not allowed. Sorry.

Hi Sam, if you do not want to show any link or button then just create an empty anchor like <a href="#popup" class="fancybox-inline" id="fancybox-auto"></a>

Hi there, i use the fancybox for overlaying a site with an iframe. is it possible to show the arrows to switch through multiple iframes?

Hi There, I’ve been using this plugin for a while and I’m not sure if this has always happened but when you try to open a video iframe in Internet Explorer it opens up windows media player or another video program on IE and doesn’t play the video in the iframe. Any ideas? Thanks

Hi Hanna, it depends on the browser. To play a video in a browser (iframe or inline) you need a video player plugin or a browser that can play (HTML5) video natively. Are you using an older IE version? I don’t have IE to test with but you could try some of the video links on http://demo.status301.net/easy-fancybox-sandbox to see if the same thing happens there.

Hi Ravan,

Thanks for getting back, I’ve been testing this issue for a couple of days now. It seems like since IE dropped support for older browsers prior to 11 on January 12, 2016, something has changed and now when you try to open any mp4 video from an anchor link it automatically opens in an external video program. This happens on every IE version including the latest edge / 11. Using FancyBox alone with a webm version works using this demo: http://jsfiddle.net/5ev8r/186/ but if you take the webm away it does the external video opening. This is happening with your Indirect MOV support video iframe demo too. The site I use your plugin on cannot use YouTube or Vimeo etc to host their videos because the government blocks access to those and their employee’s need to view the site on the gov servers. The page I use this on has 30+ videos and increasing so your plugin worked really well because it didn’t need to load every video on the page. If I go with the FancyBox approach above I’d need to load all videos using the video element and hide them. I do really love your plugin and its only started doing this in 2016. I can’t find anything online directly specific to this issue and it will be a shame to have to try alternatives just for the sake of IE.

Thanks again!

Hi Hannah, I’d have to take a look at this in Edge (I’ve got a Windows 10 somewhere) and I’ll let you know if it behaves the same for me. IF it does, it sounds indeed like MS dropped support for this kind of embedding and I’ll try to find a more compatible approach. Until then, you could consider using a player like JW Player to embed these videos. See http://demo.status301.net/easy-fancybox-sandbox/boxed-jw-player for a demo (the link at step 6) and basic instructions on how to combine JW Player and FancyBox. Not sure if that suits your needs though on pages with a very large number of videos as it needs to have every video element loaded inline. Also be aware that the main script is only need once and each video’s div and script must use matching but unique IDs.

Hi,

We’re having problems with our popup on our site where the registration form was placed. When we click on the button and tried closing it. It won’t close.

See here: http://screencast.com/t/47WLzBhOD

Is there are a way you can fix this issue?

Please check our page here: http://theforextradingcoach.com/free-webinar.html

Note: Try to refresh the page because we’ve setup a URL split test.

Please reply to this email: admin@theforextradingcoach.com

Regards,
Mhel

Hi Mhel, there is an error occurring in the Easing script. It must be coming from a conflict with another script (from another plugin or from the theme) on the site. So you have to options. The easiest option: set the FancyBox transition to Fade. But if you really want the smooth pop-out effect, you’ll need find out if it’s another plugin or if it’s a conflict with the theme. My first guess would be the Page Scroll to ID plugin because that is using some kind of alternative easing effect…

Hi, i’m trying to load a form on page load.

Here is the code i’m using:

More info

[contact-form-7 id=”181″ title=”ContactForm”]

The link More info functions perfectly, but introducing the id=”fancybox-auto” not make any changes.

I’m sure i’m doing wrong the code. (I’m using WordPress and Contact Form 7).

¿Can you help me?

(I also post this question in https://wordpress.org/support/topic/pop-up-in-fancybox-on-page-load?replies=1)

Hi there, I’ve always loved Easy Fancybox, but I just installed it on a website that it didn’t work well on. It put a partial link at the top of the images in the WooCommerce shop on the site, and now they won’t go away, even when I remove the plugin entirely! I just reinstalled it to see if fiddling with the settings might help, but they appear to be “stuck” there. It looks like they’re a remnant of the links (with attribution) I put in the captions of a wordpress gallery included in a new post in the blog, which lead to products in the shop. I really need them to disappear.

The site is http://lindaabblettwatercolors.com
The partial link I’m seeing is this: See New Pricing” data-rel=”prettyPhoto”>
It shows up at the top left of the paintings in the shop, but only the paintings included in this new post which have links in the captions to their product posts in the shop, all the others look clean: http://lindaabblettwatercolors.com/2016/06/06/prices-reduced-original-watercolors/

The one thing that drives me crazy about WordPress is that the images don’t open in a fancybox by default. The theme I’m using on this site includes the code for their galleries, but not for wordpress galleries or single images, which is why I installed it in the first place. I thought the only problem with this arrangement was that the theme galleries open two fancybox images of the same image when it’s clicked, but then I discovered this other issue which my client won’t be happy about at all. Can you please help me? Thank you so much!

Leave a Reply to Craig Cancel reply

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

%d bloggers like this: