Easy FancyBox for WordPress

Easy FancyBox

Easily enable the classic FancyBox light box on just about all media links: Images, YouTube, Vimeo, Dailymotion, PDF, inline and iframe content.

Description

Easy FancyBox plugin for WordPress websites gives you a flexible and aesthetic light box solution for just about all media links on your website. Easy FancyBox uses an updated version of the traditional FancyBox jQuery extension and is WP 3+ Multi-Site compatible. After activation you can find a new section FancyBox on your Settings > Media admin page where you can manage the media light box options.

After activation, all links to JPG, GIF and PNG images are automatically opened in the FancyBox Mac/Gnome-style lightbox that floats over the web page.

GDPR / EU Privacy

This plugin does not collect any data and does not set any browser cookies. However, the PRO version offers an option to disable the automatic popup after the first visit, which needs a browser cookie. This cookie stores the visitors first website visit timestamp and path on the client side. It is not shared nor is any data stored server side or elsewhere.

FEATURES

Supported media and content types:

  • All common image formats including webp
  • Hosted video on Youtube, Vimeo and Dailmotion
  • PDF files (embed with object tag, in iframe or in external Google Docs Viewer)
  • SWF (Flash) files
  • SVG media images (thanks to Simon Maillard)
  • Inline HTML content (see instructions)
  • External web pages (see the FAQs)

Also supports:

  • WordPress Galleries (option “Link to” must be set to “Media File”)
  • NextGEN galleries (see instructions)
  • Image maps
  • WordPress menu items (see instructions)
  • Jetpack Infinite Scroll

Additional features:

  • Modal window option (see instructions)
  • Automatic detection of media file links
  • Automatic detection of galleries
  • Popup on page load optional (see instructions)
  • Fade or Elastic popup effects
  • Styling options for light box overlay (color and opacity) and window (border size and color)

For advanced options and priority support, there is a Pro extension available. See Pro features below.

See FAQ’s for basic questions or the advanced FAQ’s for advanced instructions to manage YouTube, Dailymotion and Vimeo movies (and similar services) and tips to make inline content display in a FancyBox overlay.

Get support on the WordPress forum.

Visit FancyBox for more information and examples.

PRO FEATURES

  • Priority support on dedicated forum
  • Slideshow effect for galleries (autorotation)
  • Spotlight effect for the light box overlay
  • FacetWP, Gravity Forms and TablePress compatibility
  • More styling options: rounded corners, inline content background and text colors
  • More automatic popup options: triggered by URL hash, first link by media type, hide popup after first visit
  • Pass dedicated light box setting per media link via link class (see Metadata instructions)
  • More elastic (easing) popup effects on open and close
  • Show/hide image title on mouse hover
  • Fine-tune media link and gallery autodetection to match your theme source markup to allow galleries per post for example

For these additional features, you need to install the Pro extension alongside this free plugin.

KNOWN ISSUES

See a list of known plugin and theme conflicts here

Contribute

If you’re happy with this plugin as it is, please consider writing a quick rating or helping other users out on the support forum.

If you wish to help build this plugin, you’re very welcome to translate Easy FancyBox into your language or contribute bug reports, feature suggestions and/or code on Github.

Frequently Asked Questions

Help! It does not work…

Please follow the trouble shooting steps to determine the cause. If that fails, ask for support on the Easy FancyBox WordPress forum.

What’s FancyBox?

Basically, it is a fancy way of presenting images, movies, portable documents and inline content on your website. For example, if you have scaled-down images in your posts which are linked to the original large version, instead of opening them on a blank page, FancyBox opens those in a smooth overlay. Visit FancyBox for more information and examples.

Which version of FancyBox does this plugin use?

This plugin uses an updated version of the original FancyBox 1.3.4, better adapted to the mobile era.

I installed the plugin. What now?

First, make sure that image thumbnails in your posts and pages are linked to their full size counterpart directly. Open any post with thumbnail images in it for editing and select the first thumbnail. Click the Edit Image button that appears and choose Link To: Media File. From now on, clicking that thumbnail should open the full size version in FancyBox.

The same thing goes for WordPress Galleries. Choose Link To: Media File when inserting a gallery tag.

Where is the settings page?

There is no new settings page but there are many options you can change. You will find a new FancyBox section on Settings > Media. To see the default, check out the example under Screenshots …

Will a WordPress gallery be displayed in a FancyBox overlay?

Yes, but only if you used the option Link To: Media File when inserting the gallery! The gallery quicktag/shortcode should look something like

.

The light box does not look good on mobile devices. What can I do about that?

The original FancyBox 1.3.4 script was not developed with mobile devices in mind and although the version used in this plugin has some adaptations for mobile devices, it might still be less optimal for very small screens. The only way around this issue is currently to disable FancyBox for small screen sizes on Settings > Media in the section Miscellaneous > Browser & device compatibility.

Can I make a slideshow from my gallery?

In the Pro extension, there is an Advanced option called “Gallery Auto-rotation” for that.

Can I exclude images or other links from auto-attribution?

Yes. All links with class nolightbox that would normally get auto-enabled, will be excluded from opening in a FancyBox overlay.

<a href="url/to/fullimg.jpg" class="nolightbox"><img src="url/to/thumbnail.jpg" /></a>

Can NextGEN Gallery work with Easy FancyBox?

Yes, follow the instructions here.

Can I use ONE thumbnail to open a complete gallery?

Yes, follow the instructions here.

How can I make AJAX or Infinite Scroll loaded content be seen by FancyBox?

This largely depends on the (theme or plugin) script that is responsable for this new content. Easy FancyBox is compatible with Jetpack Infinite Scroll but other scripts may need to be adapted.

Read more which hook ‘post-load’ that is available to trigger FancyBox to scan new content here.

Is Easy FancyBox multi-site compatible?

Yes. Designed to work with Network Activate and does not require manual activation on each site in your network.

Easy FancyBox

1164 Comments

Hi

I have installed fancy box to my webbsite but when i click on my pictures it hasent made a difference. They presents as they did before. What can i have done wrong?

Thankfull for help.
Anna

That’s funny… I made this plugin exactly for WP3.0 in MS mode. And it has been running just fine on several multi-site installs I manage. These installs are running on shared hosting linux boxes but I could not tell you exactly what flavours. But you are saying that plugins_url($efb, __FILE__) just doesn’t do it on Debian unstable? Could you please elaborate? What is your PHP version?

You see, the WP function plugins_url() in itself uses dirname(plugin_basename($plugin)) — which basically is the same as your basename(dirname(__FILE__)) solution. I really wonder why that internal WP function would not work on a Debian unstable box…

Hi,

sorry I was on holiday.

So, the PHP version installed on Debian unstable is 5.3.2-2.
I’ve installed the plugin in the documentroot of one of the blogs I’m hosting, and then made a symlink to /usr/share/wordpress/wp-content/plugins. The funny thing was: the plugin was working for that one blog, but not for all the other blogs which could activate the plugin. I had checked the HTML source of those others, they were all including the CSS and JS files correctly (which brought even more confusion).

When I had replace that one particular piece of code, the plugin all of a sudden worked for all the other blogs as well.

The wordpress version installed on Debian unstable is 3.0.1-2

Small update:

I’ve installed your updated plugin now (1.3.1.2) and it doesn’t work anymore (on neither of the blogs)

The thing I see in the html source for the CSS file, is:

http://samurider.be/wp-content/plugins/home/insaniac/wordpress/wp-content/plugins/easy-fancybox/jquery.fancybox.css.php?ver=1.3.1

Which obviously is not good.

Applying my changes again, turns the href of the CSS into:

http://samurider.be/wp-content/plugins/easy-fancybox/jquery.fancybox.css.php?ver=1.3.1

Which of course looks better 😉

Maybe a symlinking problem?

Hi,

What do you mean by “I’ve installed the plugin in the documentroot of one of the blogs I’m hosting, and then made a symlink to /usr/share/wordpress/wp-content/plugins…” exactly? And why the need to put up symlinks in a WordPress installation?

The plugin is designed to be installed in either the plugins folder (as almost all WordPress plugins) or the mu-plugins folder (but then fancybox.php needs to be moved one dir up!). So on your box, that would create /usr/share/wordpress/wp-content/plugins/easy-fancybox/ and its files and subfolders. You then need to Network Activate it to make it work on all sites in your WP Multi-site setup.

Hi,

I can’t enable the Network feature, since it’s not subdomains I’m hosting with WordPress blogs, but FQDNs (customers owning domains with their own home directories).

Look: in Debian, there is one general WordPress installation in /usr/share/wordpress/. All the domains which will use WordPress, will use this /usr/share/wordpress as DocumentRoot (this is a configuration directive in Apache, it is the directory where your website is saved), so they (the domains) will not each install WordPress by itself. They will only have a ‘wp-content’ directory (and their own database schema).

If you want to install plugins, that all domains can use, you either install them in /usr/share/wordpress (but this is from a maintaince point of view not such a good choice) or you install them in some kind of user directory (in my case /home/insaniac/wordpress/wp-content/plugins/, where the user insaniac has write permission when he creates an FTP connection to the server).

In order to enable this plugin for all the domains using WordPress, you create a symlink from this user directory to the main /usr/share/wordpress/wp-content/plugins/ directory.

This works for every plugin that I have installed, except for easy-fancybox 😉
If you read the Readme.Debian that comes with WordPress on Debian, they also suggest creating symlinks in /usr/share/wordpress/wp-content/plugins/ for the plugins you want to install.

Now, I’ve checked why the other plugins are working, and yours not: the other plugins all use this basename(dirname(__FILE__))).'/plugin-name' construct, to include JS and CSS files. Well, at least all the plugins I’m using 😉

Maybe this is only Debian specific, I don’t know that, I’m just reporting it 😉 I’ve already created a patch file and each time the plugin gets updated, a cronjob will install the patch so that for me, the plugin will keep on working 😉

Cheers,
Johnny

Ok, wow, thanks for the detailed explanation on this particular use of WP on Debian servers. I had no idea…

But what i’m basically reading here is that the native WordPress function plugins_url() does not return the correct URL on this setup. Sounds to me like a bug to me … Do you know if there is a ticket about this on WP Track? If not, you might consider creating one. Or maybe report it to the Debian package maintainers?

Anyway, I ‘m not aiming to be stubborn about it 😉 but I had just hoped a native WP function like plugins_url() would take care of it all… You see, your fix breaks the plugin when installed under /mu-plugins/ on a normal install.

Could you tell me if the code wp_enqueue_script('jquery.fancybox', plugins_url($efb, basename(dirname(__FILE__))."/fancybox.php").'/jquery.fancybox.pack.js', array('jquery'), '1.3.1'); works on your server?

YES!
This works perfectly! So I’ve applied this piece of code to those 4 lines in the //ENQUEUE section and it still works 🙂

This is the code I’m using now:

// ENQUEUE
wp_enqueue_script('jquery.fancybox', plugins_url($efb, basename(dirname(__FILE__))."/fancybox.php").'/jquery.fancybox.pack.js', array('jquery'), '1.3.1');
wp_enqueue_script('jquery.easing', plugins_url($efb, basename(dirname(__FILE__)).'/fancybox.php').'/jquery.easing.pack.js', array('jquery'), '1.3.1');
wp_enqueue_script('jquery.mousewheel', plugins_url($efb, basename(dirname(__FILE__)).'/fancybox.php').'/jquery.mousewheel.pack.js', array('jquery'), '3.0.2');
wp_enqueue_style('jquery.fancybox', plugins_url($efb, basename(dirname(__FILE__)).'/fancybox.php').'/jquery.fancybox.css.php', false, '1.3.1');
add_action('wp_head', 'easy_fancybox');
}

I’ll have a look in the Debian bugzilla and in the WordPress bugzilla if it has been reported already 😉

Thanks, it was nice hacking with you 🙂

Hang on! 😉 If you could perform one more test, I ‘d be grateful…

What happens if you replace the parts basename(dirname(__FILE__)).'/fancybox.php' with the more elegant plugin_basename(__FILE__)? On normal installs, it boils down to the same. If it works on the Debian package install too, that’s what i’ll be using in the next release. 🙂

Nope, that doesn’t work, the files are translated to:

‘http://jmorano.moretrix.com/wp-content/plugins/home/insaniac/wordpress/wp-content/plugins/easy-fancybox/jquery.fancybox.css.php?ver=1.3.1’

So as you can see, it includes the full OS pathname now.

Here’s the code I’ve used:


// ENQUEUE
wp_enqueue_script('jquery.fancybox', plugins_url($efb, plugin_basename(__FILE__)).'/jquery.fancybox.pack.js', array('jquery'), '1.3.1');
wp_enqueue_script('jquery.easing', plugins_url($efb, plugin_basename(__FILE__)).'/jquery.easing.pack.js', array('jquery'), '1.3.1');
wp_enqueue_script('jquery.mousewheel', plugins_url($efb, plugin_basename(__FILE__)).'/jquery.mousewheel.pack.js', array('jquery'), '3.0.2');
wp_enqueue_style('jquery.fancybox', plugins_url($efb, plugin_basename(__FILE__)).'/jquery.fancybox.css.php', false, '1.3.1');
add_action('wp_head', 'easy_fancybox');
}

Ok, thanks… so I guess the WP internal function plugin_basename() does not return the expected result on Debian package install either 🙁 In fact, it may be the cause since plugin_basename() is used in plugins_url() at some point.

Maybe there’s a ticket on plugin_basename() and Debian package then? 😉

Anyway, after some more testing, basename(dirname(__FILE__)).'/fancybox.php' turns out to be unreliable when installed in /mu-plugins/ so none (so far) of the working fixes for the Debian package can go into the plugin code… I guess you’d better stick with that smart patch file 🙂

Hi RavanH

I’m helping my friend to build her photo-folio site and I do like what I see, thanks to your awesome, useful, and simple plugin.

Just one question, what do I do to make Fancybox gets the title of a single image? It perfectly gets the title of the image that is a part of a gallery, but not a single image.

Here’s the link:
http://www.arumaum.com/sepenggal-kisah-senja-di-kaimana/

Note that the “single image” on the upper part of the post doesn’t have a title.

Thanks for the plugin. Be blessed.

Hi Harry, the cause is that the first image link does not HAVE a title nor does the image have an alt text to work with. The ones generated by the gallery shortcode get that title text for the link automatically. So, open the post for editing and then either open that first image in the fancy image editor and give it a Alternative Text description or (if you do not use the rich text editor in WordPress) just edit the title in after ‘alt=’ … Or you can give the link a title. That will also get picked up by the FancyBox script to serve as image title. Whatever you prefer 🙂

By the way: Nice images!

Thanks for the reply RavanH,

I’ve put and “alt” to the single image and it worked 🙂 , thanks. But the first image is auto-generated by Timthumb, I don’t know how to give an “alt” to that one. Do you have an idea how?

Thanks for the compliment for the images, it’s hers, not mine 🙂

Sorry, I have no idea how Timthumb works… Does it not use the Alt or Title text you define in the WP Gallery?

Unfortunately not. I’ve just tested; add the “alt” and have Timthumb re-resize it and still no title.

I guess I have to find the way to tell Timthumb to get the image title in its code.

Pretty scary for a newbie like me 🙂

As far as I understand, TimThumb comes in the form of a PHP library… Did you install the bare library and then integrate it with WP yourself? Or did you just install one of the plugins that seem to be designed to do the integration? In which case, you might raise that question with the appropriate plugin developer.

By the way, why use TimThumb at all? I mean, WP can handle image and thumbnail resizing just fine, as far as I know… And on the Media tab you can adjust max image sizes to fit your theme… Does TimThumb offer something more?

Sorry for the late reply. I’ve subscribe to this comment but I got no alert.

I finally made it, well, short of. I just add the [alt=””] thing to the code and now I get the title. Not the image title but the post title, but I think it’s better than nothing.

The Timthumb is needed by my theme, it is installed by the theme. I helps me to resize my image into sizes and place them into the right place (the slider, the portfolio page, and the first image of a post).

I was thinking about the same thing when I found the same feature in Scissor plugin which I mainly use to “glue” the watermark. But I guess I have to dig deeper into the code to deal with the auto-placement, something I’m not good at.

What would I do to have a link to an image not open in a lightbox but on a new page as it would without the plugin?

Also, is it possible to use easy fancybox to display youtube movies like with fancybox itself?

Thanks in advance 🙂

At this point, all thumbnails linked to images are automaticaly enabled with FancyBox overlay… However, I will consider an option to switch this auto-enabling thing off and let the user control it per image. The other way around like you propose (auto-enabled but can be switched off per image) might also be an option but I will have to look into a possibility to code that in.

Youtube movies are planned for the next release 🙂

Hi, I have Easy FancyBox installed at my main site http://jlynn2.com and it works great. I’m just building photoanimoto and EFB doesn’t work. I tried making a new post and uploaded a photo but no luck. I tried clearing cache and a reboot, but still the same. I uninstalled and reinstalled, also no luck. All the plugins are the same as jlynn2.com except for Youtuber which I need to play some of my YouTube vids. Any suggestions ?
I’m just an ancient photographer so I don’t understand code and all that stuff. It would be great if you could help as I intend to display a lot of before and after shots.
Thanks. John

Hi John, at first glance, the plugin seems to be installed just fine. Somehow the javascript does not make it stick on photoanimoto but I cannot tell you why. Before saying “please head over to http://fancybox.net/support for support on the FancyBox script” I ‘d like to suggest a workaround (for now)… You see, I notice that the FancyBox script works fine on http://www.photoanimoto.com/about/ while it does NOT on http://www.photoanimoto.com/the-power-of-topaz/ and the only difference between the two is the use of a WordPress gallery instead of inserting single images in a post. I am guessing that when you insert the images “manually” instead of just letting WP throw the whole lot on there in a gallery, you will find it works fine. Could you test this theory?

If that works, please let me know. I ‘ll try and figure out why the gallery mode does not work with my plugin (on your site) as it should…

Hi, thanks for the quick reply. If you go to my other site: http://jlynn2.com and navigate to ‘Belfast Chillifest’, these photos were uploaded in gallery form and work just fine. Also, I tried making a new post and uploading just one image but that didn’t work either. I also tried de-activating the YouTube plugin, which is the only extra I have that’s different to the jlynn2 site, but again, no luck. They’re both the same theme, running on the same computer and browser. Its very strange. I can’t think of anything else. Has anyone else had a similar problem? I’d love to get this fixed. Thanks again. John

Wow… I’ve been staring and picking at your pages source codes to find what makes it so different and after stripping EVERYTHING (not exaggerating here) I finally see what’s different.

It’s the link href. on the working page the gallery thumbnail images are linked to their uncropped counterpart while on the non-working page the thumbnails are linked to a ‘page URL’. Example: first working thumbnail http://www.jlynn2.com/wp-content/uploads/2010/09/bs36web-150×150.jpg is linked to http://www.jlynn2.com/wp-content/uploads/2010/09/bs36web.jpg while the first non-working thumbnail http://www.photoanimoto.com/wp-content/uploads/2010/09/market-1-150×150.jpg is linked to the page http://www.photoanimoto.com/the-power-of-topaz/market-1/

The auto enable feature of my plugin ignores linked pages because FancyBox would open those in an IFRAME overlay (so the complete page, not just the image)…

This can be fixed with the option Link thumbnails to: that you will have to change to Image File when inserting a gallery into your post content… I’ll ad this one to the FAQ’s 🙂

I need to be able to disable Easy fancy-box running on certain pages on my site. Can you tell me how to do that please?

Hi Richard, disabling the auto-enabled FancyBox is not possible with the current release except by modifying the plugin core yourself. However, the next release (soon) will offer the possibility to switch auto-enabling off to gain more control (by using class="fancybox") over when and where FancyBox runs. Would that suffice in your case? I realize it is actually the opposite of what you are asking but it could amount to the same result…

I’ll consider your request to be able to switch off FancyBox per page. It will take some work to make it user-friendly so I cannot promise anything 😉

Hi RavanH, thanks for your reply. The problem I’m having is that my theme already runs a jquery library on a built in portfolio feature. However, it does not include overlays on WP image galleries, or thumbnail images! Easy Fancy box fills the gap beautifully. Problem is that it works on the theme portfolio images also, so I get 2 overlays. Its confusing to have to close 2 overlay boxes!.

What I need to do is say ‘if page_ID=portfolio then don’t load easy fancy box js.” Looks like switching it off for that page would be the only answer… unless you have a solution??

Ok, I see… You say the theme uses its own jquery extension for overlay. Does that script load only a page named ‘portfolio’? If it is enqueued properly I might be able to either make Easy FancyBox replace it completely or back down when it detects the enqueued script… Got a link for me? Or the name of the theme? I might be able to figure out the best approach and squeeze that in for the next release.

hi tux. sorry but that is not possible. the upcoming release will have the ability to switch of the auto-enable feature to let you manually INCLUDE images… hope that’s useful.

Hi there, thank you for plugin development. It work perfectly, but there is one question.

Is there some way to tell pugin to recognize SWF movie dimensions? I got loaded two SWF on my site but both of them are streched down a bit. Is there a way to fix their dimensions?

thnx

At this point the auto detection of dimensions is switched off as it did not seem to be very stable. I’ll do some tests with the new version 1.3.2 to see if this is still the case and figure out some workable solution… Keep your eye out for the next release 🙂

Another note: you can use class=”fancybox-swf” — NOT rel=”…” ! — to ‘force’ a link to trigger a FancyBox overlay for SWF movies but if the link ends in .swf the plugin (by default) automatically detects and uses FancyBox for it. There is some difference in behaviour for these two options. The first one (using class=”fancybox-swf”) will use a fixed width (680px) and height (495px) but on the autodetected links, the FancyBox auto-dimension function is used…

You might want to test with it to see the differences and find out what works best for you.

Hi Paolo, it is not possible with my plugin but it is an interesting idea… I’ll look into a way to customize layout of the overlay.

Hi there.

I would like to remove the keyboard navigation functionality of this plugin. Some of my SWFs are Flash games that require those same keys. How can I go about making this change?

Thank you.
-Philip

Hi Philip, the upcoming version should not have this problem anymore. But if you cannot wait for it, remove ‘swf’ from the list of autodeted filetypes (Settings > Media at the FancyBox section) and then edit all your SWF game links to have a class=”fancybox-swf” tag. This way, they will not be grouped as a gallery anymore. But if you’ve got too many links to edit, just wait for the next release 🙂

I’m putting together a test site for a friend who does video. He wants the video to pop up. Easy Fancybox is a great solution considering I know nothing about PHP and jquery. I’ve hit a slight stumbling block however. I’m trying to change the color of the semi-transparent part around the the pop up from white to black. I changed it in a couple of places in the css and php files. Problem is, it’s not doing anything. In fact WP is saying the only active file in the plugin is the easy-fancybox/easy-fancybox.php. All the other easy-fancybox files are listed as inactive. Help?

Hi Aaron, the plugin indeed consists of one active file easy-fancybox/easy-fancybox.php which is a wrapper for the FancyBox script files. These are included in the package but not recognized as active by WordPress.

The wrapper function means that when you edit the active plugin file, you can add/change any of the API parameters that are described on http://fancybox.net/api . But the API parameters there do not seem to include any way to influence the color of the padding and/or margin which is what you seem to be looking for. If so, you might get some better answers about undocumented API parameters (there are some, I am sure) from the FancyBox support group http://groups.google.com/group/fancybox . Let me know what you learn and I will consider adding it as an option in the next release 🙂 …

Or am I mistaken and are you talking about the actual overlay color? Because that CAN be changed…

Assuming you are talking about the solid white border (not the semi-transparent overlay) and there is no parameter available, you have two options to work around it:
1. use a class for the video links that does not have a border like fancybox-swf, fancybox-youtube or fancybox-vimeo (each have different width and height but none have a border)
2. add the following CSS to your theme header.php, just before the closing tag:

#fancybox-content {
border-color:#000000;
}

And you may have to add some extra CSS if you are using title as ‘inside’ :

#fancybox-outer {
background-color: #000;
}
.fancybox-title-inside {
color:#fff;
}

Hi,

The gallery thumbnail images are handled by WordPress and it all depends on your themes stylesheet how they are presented. You will need to take a look at the source code of your gallery page and edit your style.css so that there is a margin set for each image… Not something you can control with Easy FancyBox, sorry.

I’ve been thinking about that and am planning to implement that for the next release. Although it is actually not an ‘option’ regarding FancyBox javascript: the border color is defined through CSS.

You can read on http://groups.google.com/group/fancybox/browse_thread/thread/813f2fc9dab02b0e/aea5c64738e16970?lnk=gst&q=border+collor#aea5c64738e16970 some instructions to change it via your own theme (place the css code right above the closing tag) but if you find that too difficult, you will need to wait for the next upgrade of Easy FancyBox 🙂

Thanks for the plugin. It’s one of the few that is working with my site on PHP4 (i know it should be upgraded).

I would like to adjust the default fancybox settings (specifically margin and padding). However, changing the defaults at the end of the fancybox.js file has no effect. I’ve also tried editing easy-fancybox.php here:
'margin' => array (
'default' => '5'

but no change. Thanks for the help.

Hi,

Changing defaults in any of the files will only have effect when they are not overwriten by other values.

First make sure you are using the latest version of Easy FancyBox. You should now have the option to change the ‘padding’ on your Settings > Media admin page. Look for the fields called “Border”.

For the ‘margin’ value, it is a bit more difficult because that value you have changed in easy-fancybox.php is the margin that will be used for PDF documents but not for any others. You might try to change the default margin on line 45 at the end of jquery.fancybox-1.3.4.pack.js (notice the ‘.pack’ there!) because that is the file used on your site, not the un-packed version… Or you can try adding

'margin' => array (
'default' => '0'
),

as a ‘Global’ array value in easy-fancybox.php between 'options' => array ( on line 31 and 'intro' => array ( on line 32…

Thank you, that worked great. I edited easy-fancybox.php as described, and the margin is adjusted.

Any suggestions on adding navigation to the bottom of the border? ( prev | next )

Changing the content of the bottom is theoretically possible. Take a look at Tip no. 7 on http://fancybox.net/blog where an example is given to make it look like the old Lightbox script did… Not with prev | next links but still it shows there should be a way to incorporate those links using the $.fancybox.prev() $.fancybox.next() methods ( see bottom http://fancybox.net/api ) to get what you are looking for.

Let me know if/how it works out, I might put it in the next release 🙂

Hi RavanH,

Thanks for your quick response on the WP forum regarding the video embed. I’m now having an issue with .pdf files not opening up in Firefox though it IS working in Safari. When you click the .pdf link a pop up Fancybox window comes up with the icon of a lego block and the text “Click here to download plugin” and a warning appears at the top of the page stating “Additional plugins are required to display all the media on this page.” Clicking the “download plugin” link leads to an “unsuccessful search by Firefox to find a suitable plugin”. Likewise clicking the “Install missing plugins” link at the top of the page next to the warning by Firefox leads to not finding a suitable plugin.

In the WordPress Admin Page Content window I have entered this to link to the pdf:

Article Title

I have the PDF settings in Easy Fancybox checked as on for “Enable FancyBox for PDF” and “Auto-detect.” I’m using the newest versions of Firefox, Safari, WordPress, and Easy Fancybox.

Any ideas?

Thanks in Advance!

Hi Alex, this is a FireFox thing… I can only refer you to http://support.mozilla.com/en-US/kb/Opening%20PDF%20files%20within%20Firefox but I must say: I have a similar issue with FireFox and the latest Adobe Reader plugin. It does not seem to get recognized and if I ‘re-initiate the plugin database’ (as per instructions on the Mozilla website) FireFox keeps crashing on me before it even opens 🙁

If you find a solution, please let me know!

Hi again RavanH,

Again, thanks for your feedback. So to recap, basically my options are either:

a) make the pdfs into plain links that won’t open in Fancybox windows
or
b) provide a note to the website visitor using Firefox to either re-open the page in Safari, option click the link to download the pdf, or install the necessary browser plugins (with a link to them).

Is there a way to create a conditional statement such that if a visitor is using Firefox with Mac OS X, then it disables Fancybox for PDFs and clicking on the PDF link merely prompts a download dialogue?

Thanks for your efforts!

Alex, try re-installing/upgrading the Adobe Reader from http://get.adobe.com/reader/otherversions/ (except when you are using 64bit linux: enable the Partner repositories and install the acroread package) … In my case upgrading from 9.3 to 9.4 has solved the Firefox PDF issue. I did a search on the internet looking for others with this problem but could not find much, so I can only guess for most people opening PDF in FireFox is no problem 🙂

Thanks for the handy plug-in. Given the rise in use of mobil devices as the primary way to access the web, do you have any plans to add logic to show alternate content for media types that require the Flash plug-in? As it stands, if one clicks a SWF link, the overlay appears, but nothing is displayed inside it. This may confuse less technical viewers who don’t currently receive any indication of why the content isn’t showing in the overlay on their iPhone, iPad, etc.

Hmmm… you have a point there. I’ll consider doing a javascript check before actually appending FancyBox to any SWF urls. But then, when the visitor without Flash installed, follows that link it will get a blank new page (I suppose) which might be just as confusing as the empty FancyBox overlay !

You could allow the user to specify a message to be displayed as an overlay on a static image they provide for each Flash object. For example, I’m working on a portfolio site for a client who wants all content displayed in one long row, and each Flash object loads using your plugin only when the viewer clicks on a static image shown on the page. You could use the same static image in the overlay window and have user-configurable text displayed that tells users they need Flash to view that content.

On normal browsers without the plugin installed, the visitor gets a message that a plugin is missing… This is not the case on mobile devices?

Anyway, I get your point but again, it is the FancyBox script that renders the embed code and therefore your suggestion is better of in the hands of the FancyBox devs. But there MIGHT be a possibility to work around it and overwrite that with custom embed code which includes some alternative tag and even some generic text stating a plugin is missing…

I’ll consider it but I currently have not got much time to implement such a feature.

No problem. I’ll suggest it to the FancyBox folks and see what they have to say.

There is no message about missing plug-ins when viewing on an iPad or iPhone, just a big white box with an “X” in the corner. 🙂

I’ve installed this plugin and I really like the simplicity and effectiveness. Good job!

Besides Easy Fancybox, I’ve also installed qTranslate. My website’s default language (i.e. domain.com) works well with Easy Fancybox, but the 2nd language (i.e. domain.com/en) have problems. Whenever I click on an image or video, it’ll not show up in an overlay but on the bottom of the page (below the footer) instead.
I find out in the source code of the 2nd language pages that the stylesheet of Easy Fancybox does not show up. This is because the path has become this: domain.com/en/wp/wp-content/plugins/easy-fancybox/easy-fancybox.css.php

“en” (the language shortcode) is added there. I’ve no knowledge for this, so I don’t know how to fix. I see that the paths to the js scripts are correctly, it’s only the path to the stylesheet.

Djw,
I have not tested my plugin with inline content but you might try something like this (notice the differences) :

This shows content of element who has id="data"

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


(remove blanks between '< a', < div' and '< /')

Important here is the class="fancybox" because that will trigger FancyBox. You can also set different width and height for the inline content via the style tag...

Let me know. I might need to add another group for inline content ;)

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: