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.

1150 Comments

The instructions state to place an image in a class=”fancybox”. I placed the class=”fancybox” before the actual image including the thumbnail image, and after. Both adjustments, which were simply moving the class causes my image not to load in Easy Fancy Box. I can send the code if needed.

Hi Christopher, if you have Auto-detection enabled (Settings > Media under the Images section) then there is no need for adding any class=”fancybox”…

Sounds like there is something else going wrong then. Adding class=”fancybox” manually will probably not solve that… CAn you share a link? If not publicly, you can use the contact form on this site 🙂

Hi Kailash, FancyBox can be triggered from the click on a submit button but you’ll need to jump some hoops. This plugin is not really suitable for that without either modifying it or inventing some intricate custom jQuery snippet to make it work for your button. I suggest you integrate the bare FancyBox scripts into your theme manually and add the needed javascript to make FancyBox aware of your button. There are a lot of how-to’s and tips about this particular usage of FancyBox out on the internet…

I couldn’t be more eager for the pro version my friend. Just for the option to round the corners! Also, any chance of including how wide the frame is in the pro-version? Pleeeaaase!

Hi!

First of all, thank you for this great plugin, RavanH, it’s really awesome! 😀

I’ve tried it on serveral of my websites and it works fine, but… I’m trying to making it works on the web celeas.es but i don’t know why doesn’t works. 🙁
I would like if you could help me, please. I need to open the .pdf documents like http://celeas.es/wp-content/uploads/2013/06/2-3-4.pdf with an overlay like Easy FancyBox.

Warm greetings and thank you so much!

Hi Kaled, it’s because your theme already has the FancyBox (an older version) hard-coded in it. You will either need to disable (is there a theme option?) or manually remove that from the theme before the script provided by Easy FancyBox can work…

Ok RavanH, I think I’ve solved it.

I just deleted the “/wp-content/themes/ElegantEstate/js/jquery.fancybox-1.2.6.pack” file and… now it seems it’s working (your Easy FancyBox plugin)! 😀

Now… the question remains to me is… it’s really necessary to delete the “/wp-content/themes/ElegantEstate/css/jquery.fancybox-1.2.6” file too, or… it’s not required? :S

Hi Kaled, deleting this file (you can probably leave the one without ‘pack’ in the name) is effective but it is not ideal because each page request still means the missing file is being requested to which in turn triggers WordPress to generate a 404 page. This is rather expensive on your server and in fact doubles the load of each page request. Plus, the visitors browser will wait for that 404 page before it can go on with building the web page in it’s tab, increasing page load times considerably.

It would be better to replace the file you deleted with an empty file or better yet, if you’re not afraid of modifying your themes functions.php, find and comment out the piece of code that is responsible for the inclusion… If that sounds too daunting for you, then go for the empty file method which will already be a lot lighter on your server and speed up your site 🙂

Hi Shivshankar, I think the comment form partly ate your code snippet so I cannot see what you did exactly. But what you need is this:
1. Activate the “Inline content” option on Settings > Media;
2. Give the link a class="fancybox-inline" attribute;
3. Wrap the contact form shortcode in the div code as given in the example in the FAQ’s to hide the form and allow it to be opened in FancyBox…

Hi rohit, the commenting system is not suited for (and eats) code snippets. Can you share a link to a page on your site where you are trying to get the contact form working with FancyBox?

Hi RC, you can create any html element like you normally would, then wrap it inside a div with an unique ID and wrap that in a div that hides the whole package like described in the FAQ’s…

awesome plugin, fast and reliable. I have a problem for multisite. I put easy fancybox plugin dir in mu-plugins and easy-facncybox.php in mu-plugins dir. I’ve did it correctly? It’s not work for me

Hi Marian, it’s been a long time since I tested in /mu-plugins/ (in fact, since WP 3.0 arrived) because Network-activate works just as well now and it does not break auto-upgrade. But good to hear it still works from there too 😉

Hi Alberto, yes you can use FancyBox to pop up a form from a button. But you need put some elements together: a nice looking button (that fits your WordPress theme), fancybox (set to use Inline content) and a contact form (inline but primarily hidden from view). So this might prove a bit difficult for absolute beginners… Maybe there is an easier ‘call to action’ plugin out there that has these elements already integrated 🙂

Wow, thanks for you quick reply. I already have the code, provided in this page, to open a popup with the contact form using FancyBox and separately I have the code to make the Call to Action button open a url (I’m using responsive WP theme). What I haven’t been able to figure out is how to link this two pieces of code to get the desired behavior. I imagine it shouldn’t be that hard.

Hi! I have a problem with the positioning, and I just can’t figure out how to solve it.. The fancybox-content opens annoyingly to the top-left corner before positioning to the center.. What could be causing this, and how could it be fixed?

Hi! I found the reason for this problem (caused by WP-supersized). But now I have another.. I can’t get the fancybox-content to stay the right size. I’m pretty sure this is caused by WP-supersized as well, but all of a sudden fancybox-content div is getting an element.styles somewhere..

Again, impossible to debug without seeing it live… That said, you need to know FancyBox will try to adapt its frame size to the image size (unless that is bigger than the browser frame) so you might just need to make sure all your images have the same size 🙂

Now I’m able to share a link. Finally. So here: http://www.floraandlaura.com/we-are-open/

I need to set the images under references-link to maximum width (regarding the whole window) around 30% and position them so that the links are still visible (top:~60px). Is there any way to that without just making all the images smaller and uploading them back on site.. ?

Hi Sandra, it seems your site is currently running into a fatal PHP error so I cannot see what could be wrong, but normally a missing element would indicate a conflict with other CSS rules in either the theme stylesheet er elsewhere. Or something is missing…

I just updated to WP3.6.1. Easy Fancy Box is working, but the gallery icon and editabilty doesn’t appear in the Visual editing window for the page. It does appear in the Text window. Makes editing the gallery a pain. Here’s the page. http://thewatercolorportrait.com/work/
Any ideas? I love the plugin.

Hi Ted, those icons are not part of the plugin. They are part of the WordPress internal gallery so I’d be surprised if the plugin is causing your issue. If you disable Easy FancyBox, do the icons appear again?

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"

Leave a Reply to RavanH Cancel reply

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

%d bloggers like this: