Requires WordPress Version: 2.7 or higher
Compatible up to: 3.3.2
Easy FancyBox-in-a-Box for just about all media links gives you a flexible and aesthetic media lightbox solution for your website. Easy FancyBox uses the packed 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 plugins options.
Supports:
- images (.jpg/.gif/.png and others) and image maps
- WordPress Galleries
- PDF and SWF (Flash) files
- movie sites like Youtube, Vimeo and Dailmotion
- hidden inline content
- iframes
- popup (auto-activate) on page load
See Screenshots for an impression on how images and YouTube movies will be presented on your site as soon as you have installed and (network) activated this simple plugin.
See FAQ’s for instructions to manage YouTube, Dailymotion and Vimeo movies (and similar services) and tips to make inline content display in a FancyBox overlay. Subscribe to 4Visions for tips on how to get a high degree of control over what will be shown in a FancyBox overlay on your website.
Get support on the Easy FancyBox web page or WordPress forum.
Visit FancyBox for more information, examples and the FancyBox Support Forum. Please consider a DONATION for continued development of the FancyBox project.
Recommended:
- For increased performance, simply install and activate the plugin Use Google Libraries to load jQuery from Googles CDN.
Translators
- Dutch * Author: R.A. van Hagen, for version 1.3.4.9
- Polish * Author: Kamil Szymański, for version: 1.3.4.9
- Romanian * Author: Web Geek Sciense (version 1.3.4.9)
- Spanish * Author: David Pérez, for version: 1.3.4.9
Installation Instructions
WordPress
Quick installation: Install now !
… OR …
Search for “easy fancybox” and install with that slick Plugins > Add New back-end page.
… OR …
Follow these steps:
-
Download archive.
-
Upload the zip file via the Plugins > Add New > Upload page … OR … unpack and upload with your favourite FTP client to the /plugins/ folder.
-
Activate the plugin on the Plug-ins page.
Done! By default, any images that are linked to directly (not to a WordPress page) from within your posts and pages, should now be opening in a FancyBox overlay 
Not happy with the default settings? Check out the new options under Settings > Media.
WordPress MU / WordPress 3+ in Multi Site mode
Same as above but do a Network Activate to activate FancyBox image overlays on each site on your network. No database tables are created or manipulated and no activation hook needs to be run for it to function with default settings. The plugin can also work from the /mu-plugins/ folder where it runs quietly in the background without bothering any blog owner with new options pages or the need for special knowledge about FancyBox. Just upload the complete package content to /mu-plugins/ and move the file fancybox.php from the new /mu-plugins/easy-fancybox/ to /mu-plugins/.
Frequently Asked Questions
BASIC
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?
The same version as this plugin has. I aim to keep close pace to FancyBox upgrades and always move to the latest and greates version. Please, let me know if I’m lagging behind and missed an upgrade!
Where is the settings page?
There is no new settings page but there are a few options you can change. You will find a new FancyBox section on Settings > Media. To see the default, check out the example under Screenshots …
Help! It does not work…
Please follow the trouble shooting steps on Other Notes to determine the cause. If that fails, ask for support on the Easy FancyBox WordPress forum or go to the development site
ADVANCED
Will a WordPress generated gallery be displayed in a FancyBox overlay?
Yes, but only if you used the option Link thumbnails to: Image File when inserting the gallery! The gallery quicktag/shortcode should look something like [gallery link="file"].
Can I make a slideshow from my gallery?
Yes. 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 nofancybox that would normally get auto-enabled, will be excluded from opening in a FancyBox overlay.
<a href="url/to/fullimg.jpg" class="nofancybox"><img src="url/to/thumbnail.jpg" /></a>Will a NextGen gallery be displayed in a FancyBox overlay ?
It can be. Switch OFF the FancyBox Auto-gallery feature, then set the NextGen option “JavaScript Thumbnail effect” to “Custom” and fill the code line field with
class="fancybox" rel="%GALLERY_NAME%"Can I use ONE thumbnail to open a complete gallery ?
It can be done manually (using the internal WordPress gallery feature, or not) or in combination with NextGen Gallery.
Manual
A. Open your post for editing in HTML mode and insert the first image thumbnail in your post content (linking to the images file, not page) to serve as the gallery thumbnail.
B. Place the following code to start a hidden div containing all the other images that should only be visible in FancyBox:
<div class="fancybox-hidden">C. Right after that starting on a new line, insert all other images you want to show in your gallery. You can even use the WordPress internal gallery feature with the shortcode [gallery link="file"]. NOTE: if the gallery thumbnail is attached to the post, it will be show a second time when flipping through the gallery in FancyBox. If you do not want that, use an image that is not attached to the post as gallery thumbail.
D. Close the hidden div with the following code on a new line:
</div>With NextGEN Gallery
You can choose between two shortcodes to show a gallery that (1) limits images per gallery using the shortcode [nggallery id=x] or (2) per tag name (accross galleries; you need to set tag name manually => more work but more control) using the shortcode [nggtags gallery=YourTagName,AnotherTagName].
General steps:
A. Place the shortcode of your choice in your page/post content.
B. Configure NextGen on Gallery > Options > Gallery settings to at least have the following options set like this:
- Number of images per page: 1
- Integrate slideshow: unchecked (optional but advised: use auto-rotation in the FancyBox settings instead)
- Show first: Thumbnails
- Show ImageBrowser: unchecked
- Add hidden images: checked
C. Optional: install Custom CSS and add a new CSS rule to hide the page browsing links below the gallery thumbnail:
.ngg-navigation {
display:none;
}Can I display web pages or HTML files in a FancyBox overlay?
Yes. Place a link with either class="fancybox-iframe" or class="fancybox iframe" (notice the space instead of the hyphen) to any web page or .htm(l) file in your content.
NOTE: The difference between these two classes (‘-’ or space) is in size of the overlay window. Try it out and use the one that works best for you
Can I show PDF files in a FancyBox overlay?
Yes. Just place a link with the URL ending in .pdf to your Portable Document file in the page content.
If you do’nt have Auto-detect checked under PDF on Settings > Media admin page, you will need to add class="fancybox-pdf" (to force pdf content recognition) to the link to enable FancyBox for it.
Can I play SWF files in a FancyBox overlay?
Yes. Just place a link with the URL ending in .swf to your Flash file in the page content.
If you do’nt have Auto-detect checked under SWF on Settings > Media admin page, you will need to add either class="fancybox" or class="fancybox-swf" (to force swf content recognition) to the link to enable FancyBox for it.
How do I show content with different sizes?
FancyBox tries to detect the size of the conten automatically but if it can not find a size, it will default to the settings for that particular content type as set on the Settings > Media page. You can manually override this by defining the width and height wrapped in curly brases in the class attribute of the link itself. For example, a Flash movie with different size:
<a class="fancybox-swf {width:1024,height:675}" href="link-to-your-swf"></a>Can I play YouTube, Dailymotion and Vimeo movies in a FancyBox overlay?
Yes. Just let the plugin auto-detect and auto-enable it for you!
Place the Share URL (the full Page URL, the Short URL or even with the HD option) to the YouTube/Vimeo/Dailymotion page in your content. If you have disabled Auto-detection, give the link a class attribute like class="fancybox-youtube" for Youtube, class="fancybox-vimeo" for Vimeo and class="fancybox-dailymotion" for Dailymotion, to manually enable FancyBox for it.
Both YouTube and Vimeo movies can be made to play immediately after opening by adding the paramer autoplay=1 to the URL. For example, a short-url YouTube link that should play in HD mode, have the full screen button and auto-start on open, would look like:
<a href="http://youtu.be/N_tONWXYviM?hd=1&fs=1&autoplay=1">text or thumbnail</a>I want that ‘Show in full-screen’ button on my YouTube movies
Append &fs=1 to your YouTube share URL.
The flash movie in the overlay shows BELOW some other flash content that is on the same page!
Make sure the OTHER flash content as a wmode set, preferably to ‘opaque’ or else ‘transparent’ but not ‘window’ or missing. For example, if your embedded object looks something like:
<object type="application/x-shockwave-flash" width="200" height="300" data="...url...">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="...url..." />
</object>just add <param name="wmode" value="opaque" /> among the other parameters. Or if you are using an embed like:
<object width="640" height="385">
<param name="movie" value="...url..."></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="...url..." type="application/x-shockwave-flash" width="640" height="385" allowscriptaccess="always" allowfullscreen="true" wmode="window"></embed>
</object>just change that wmode="window" to wmode="opaque" or add the tag if it is missing.
Can I display INLINE content in a FancyBox overlay ?
Yes. Wrap the inline content in
<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:460px;height:380px;">
...inline content here...
</div></div>Then place a FancyBox link anywhere else in the post/page content to the inline content. Something like
<a href="#fancyboxID-1" class="fancybox">Read my inline content</a>NOTE: The wrapping divs ID must be unique and it must correspond with the links HREF with a # in front of it. When using the above example for more FancyBox inline content (hidden div + opening link) combinations on one page, give the second one the ID fancyboxID-2 and so on…
Can I make an image or hidden content to pop up in FancyBox on page load?
Yes. A link that has the ID fancybox-auto (Note: there can be only ONE link like that on a page!) will be triggered automatically on page load.
Use the instructions above for inline content but this time give the link also id="fancybox-auto" (leave the class too) and remove the anchor text to hide it. Now the hidden div content will pop up automatically when a visitor opens the page.
Same can be done with an image, flash movie, PDF or iframe link! But please remember there can be only one item using the ID fancybox-auto per page…
Can I make a menu item open in a FancyBox overlay ?
Yes. But it depends on you theme what you need to do to make it work. If you are on WordPress 3+ and your theme supports the new internal Custom Menu feature or if you are using a custom menu in a sidebar widget, it’s easy:
- Go to Settings > Media and enable FancyBox iFrame support.
- Go to Appearance > Menus and open the little tab “Screen Options” in the top-right corner.
- Enable the option “CSS Classes” under Advanced menu proterties.
- Now give the menu item you want to open in a FancyBox iframe the class
fancybox-iframe.
If you are on an older version of WordPress or if you cannot use WP’s Menus, you will need to do some heavy theme hacking to get it to work. Basically, what you need to achieve is that the menu item you want opened in a lightbox overlay, should get a class=”fancybox-iframe” tag.
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. You can even install it in mu-plugins: upload the complete /easy-fancybox/ directory to /wp-content/mu-plugins/ and move the file easy-fancybox.php one dir up.
Changelog
Really? Ok then… Read the full Easy FancyBox changelog
Download
Latest version: Download Easy FancyBox 1.3.4.9 [zip]
Downloaded 102865 times.
Nederlands
English
Français
470 Comments
Hi Ravan,
Just wanted to start by thanking you for an awesome WP Plugin! Works awesome. I ran across a scenario where I have anywhere from 40-50 different SWF files of varying size. I wanted to share with you the mods I made to allow resizes for individual elements, instead of one default size.
After some research I learned of a jQuery Metadata plugin which allows you to extract metadata from tag classes. I downloaded the jquery.metadata.js from http://plugins.jquery.com/project/metadata and dropped the jquery.metadata.js into the fancybox plugin directory
I then added the following 2 lines to the easy-fancybox.php file for the script to register.
after line 15:
define( ‘METADATA_VERSION’, ’2.1′);
after line 1160:
wp_enqueue_script(‘jquery.metadata’,plugins_url($efb_subdir, __FILE__).’/fancybox/jquery.metadata.js’, array(‘jquery’), METADATA_VERSION);
And now on any of my SWF links I just add… <a class="fancybox-swf {width:800,height:600}" … and voila! I can resize individual SWF links to the actual SWF size.
You may not give a crap, but I just wanted to pass this on in case you want to use it.
Thanks again for the great work you did on this plugin. Cheers!
~Eric
Hi Eric, the Metadata plugin was on my TODO list but I have not had time to look at it. Your code will save me a lot of time and will likely make it into the next release… Thanks!
Hi, is this feature now built-in to the plugin? I’m trying to figure out how to do what Eric was describing. Please advise. If not I will try and retrace his steps to achieve this (since I have no idea how to make varying fancybox sizes for .swf files). And I only have two SWFs I need to do this with!!!
Thanks.
Hi Drew, no I still have not had any time to move forward with integrating the Meta-data plugin… But if you are only going to need this for two swf files, you might try a different approach: read the section in the FAQ’s about displaying INLINE content. This method will allow you to take control over the size of the displayed content without needing to hack the current version of this plugin
Hi Ravan,
I will check that out thanks.
Drew
Hi just wanted to say that worked perfectly for my needs. Thanks for this plugin.
Hi Ravan,
On my personal site, I can’t get the plugin to work. (I can’t get any fancybox to work) even without any plugins active (except for yours). I’m happy to donate for your time if you’re able to take a look for me!
thank you,
Cathy
email me for logins.
the site url is http://desperatelyseekingwp.com/solutions/portfolio
Hi Cathy, the first thing I notice is that you need to change the option “Auto-gallery” to “All images, One gallery for all” which will make it compatible with your theme.
But then there seems to be abother problem. The stylesheet returns a 404 : http://desperatelyseekingwp.com/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4 … Can you check if that file exists at all?
And the third problem is that the jQuery library is loaded 3 times (and different versions) which is sure to cause problems…
Hi,
when I try:
< a href="http://example.com" rel="nofollow">open< /a>it does not work.
With:
< a href="http://example.com" rel="nofollow">open< /a>it works!
Just wondering if there is something to fix in the code…
thanks!
Hi ugo, it looks like WP filtered out some essential parts in your code. Can you submit again but this time putting a space between each opening ‘< ‘ and following character (like ‘a’ or ‘/’) ? Or maybe use the contact form to send it via e-mail… Thanks
class=”fancybox iframe” works
class=”fancybox-iframe” does not work
Did you activate the iFrame option on your admin Settings > Media page?
just found out that it was only matter of activating the iframe in the media>settings menu, now even the class fancybox-iframe works
sorry to bother, sometimes we all need to check all the possible options before asking support…
btw great plugin Ravan, it would be nice to have it in the myeasy series!
Hi Rhavan,
awesome Plugin. Works like it is supposed to on a WP 3.04 MS installation.
But …
Maybe I’m missing something and you can point me in the right direction. If I load a page automaticaly via an iframe and there is a link to another page, I want to get out of the iframe. So I use target _parent or _blank. Works fine if I load the iframe by itself. If I load the same iframe in easyfancybox it does not leave the overlay. For clarification: I want it to close the overlay and open the link according to its target settings.
What am I missing?
Heico, this concerns the FancyBox script more than it does the plugin. Your best bet is to ask about it on the FancyBox forum at http://groups.google.com/group/fancybox/ … Maybe something with onclick=”parent.$.fancybox.close();” in the link to make the FancyBox overlay close on click?
ops, messages crossed
Hello to you all! I’ve been reading through the comments and saw one other person having issues with pdf’s/mac. My pdf’s aren’t showing up. When I click on the file link that I inserted/embedded into my page, the overlay box appears, but just appears a gray empty box with no pdf document inside. I use mac/safari. I forwarded the link to a friend on windows and hers did the same thing. Please help! THank you!
Nevermind, seems to be working now…..just super super slow to load the page. Thank you anyway!!
I’m using FancyBox to display pdf files. In Firefox they are showing up wonderfully, but when I try the site in IE 7, a blank box pops up. I have enabled “auto detect” in the pdf settings, and I also tried adding the class=fancybox-pdf to force it, but still blank. What gives? I really don’t want to go back to making all my pdf’s into jpg’s because I want to turn the site maintenance over to the company so they can update these pdf links themselves… Thanks!
Hi Yvonne, do you have a link for me? It looks like you are using lightbox2 on your garrisonestates site…
Yvonne, I think I found the problem. It should be fixed in version .7 that will be released right now.
Thanks for reporting the issue.
Hello Ravan.
First: Nice PlugIn, works very well.
My Question: I use more than one inline-content in one post, that’s no problem. But is it possible to step thru the different inline-content without leaving the fancy-box… just the way like a gallery?
Thanks for your help…
Jörg
Hi Jörg, I have not tried that before but I suggest you test with giving all the links the same rel=”xxx” tag. Those x’s can be anything but if you make it “gallery” you will append the inline content to any FancyBox image gallery you might already have on the same page.
Let me know if if works or not
I don’t care for the spotlight effect in the latest version, but I don’t see any way to disable it in the options. Am I missing something?
After updating to v1.3.4.7, I discovered that the overlay opacity/color properties no longer work. The ‘spotlight’ effect is less than desirable…how can I get the overlay to be a simple, professional solid color again? I can see the color and opacity properties in the CSS, but they just don’t display…pretty frustrating to update plugins and have them break basic functionality and change admin settings that were already properly in place.
Thanks,
Cody
…and how can I turn off the slideshow feature when viewing images? The only setting I see in the admin that has to do with this is turned off….yet the functionality persists. Seriously bummed that after having the plugin installed and functioning perfectly, I’m now forced to invest more time to fix things that shouldn’t be broken. I had it so simple….an 80% black overlay that didn’t scroll into an auto-slideshow…now I have no overlay, had to manually remove the gnarly spotlight via CSS and the images rotate through when I don’t want them to. Can you not add new functionality to your plugin without forcing those settings on people? When I upgrade, why not leave my settings alone and turn off all the new ‘features’ (spotlight is awful) by default? I appreciate the plugin and your efforts to develop and maintain it, there just seems to be a disconnect between your own tastes and forcing functionality on users who don’t want it.
Hi Cody,
You are right. That should not have happened. A mistake on my side (a 1 instead of a 0 somewhere) and a lot of trouble on your side. My apologies.
I am working to release a fixed version right now.
Thank you for the quick fixes…frustration was getting the best of me. I did change plugins, but switched back because the other was giving me errors displaying iframes. Thanks again, everything is functioning properly.
Great plugin but I have a problem. I’m using wordpress with 2 languages and it seems the plugin doesn’t support that. I just published a post with links which should open in an iframe. The English version of the site works fine when you click on the links (http://www.elias-lange.de/readup-1/) but not in the German version where nothing will happen. (http://www.elias-lange.de/de/readup-1/) Does somebody has a idea how to fix this?
Hi Elias, thanks for reporting this. Is it qTranslate you are using there?
EDIT: I have been able to reproduce the issue on WP3.1 and qTranslate 2.5.15 and 16b (development version)… I don’t know if this is a qTranslate thing or a bug in WP3.1 and I have not seen this issue in earlier WP versions! I’ve posted a question on the qTranslate forum about it so I hope to find out more soon…
The image href link auto defaults to the attachment page (rather than image itself), with a thumbnail appearing on the attachment page. This isn’t very intuitivebecause it makes readers click the image twice. Readers click an image – it first opens another page, with a thumbnail that the reader has to click a second time in order to open up the lightbox.
How do I change this default behaviour?
Hi Ed, this is a default WordPress setting (both inserting images and galleries, see my response to Anna’s question below) that I do not know how to override. I did notice that when inserting a single image and you select “Link to image file” to make FancyBox kick in the first time, that setting will become your default for the next image. Sadly, this is not the case for galleries.
I will be investigating the possibilities to override this WP default behaviour but I cannot promise anything.
Can anyone please tell me how to open images in a lightbox. All settings in media are right. I created a gallery page in WP. On that gallery page are about 20 pictures for 20 different albums. Each picture I linked to another page for the albums contents. No matter what I do, the picture I click on, opens in a new frame or tab….instead of opening in lightbox. I would really LOVE to have the albums open the linked contents in overlay. I have already updated to the latest version of Fancybox.
Any thoughts of what I can do or what I am doing wrong?
Thank you so much in advance for your time!!!
Hi Anna, make sure that when inserting a Gallery, you select ‘Link thumbnails to: Image file’ … Else they will open on a WordPress generated page.
It’s on the TODO list for Easy FancyBox to override this default gallery setting in WordPress but I have no idea yet if that is even possible.
I’m trying to get a NextGen gallery to display and it works, but only if I display the gallery thumbnails. I wanted ONE thumbnail to open the whole gallery. I inserted the [nggtags gallery=YourGalleryName] right before the gallery and I still get multiple thumbnails…
DO NOT WANT !!!
Have I missed something ?? This is WP3.1 too…
Hi Jon, what do you mean by “I inserted the [nggtags gallery=YourGalleryName] right before the gallery…”? Just use the NextGen tag and nothing else. You will have to create a gallery in NextGen and use the name of that gallery to replace
YourGalleryNamein the tag…Oh, and don’t forget to change the NetxGen settings to use the custom code
class="fancybox" rel="%GALLERY_NAME%"on the Effects tab…OK… I have [nggtags gallery=issue_2_preview] (which is the right name for the gallery), and the “class” change in the effects tab.
I get nothing displayed. is it possible another plugin may be clobbering it (it’s not obvious, but I have a facefook “like” button after it)
got a link for me?
Emailed you username and password, and link
Update: Just installed WP3.1, Nextgen and Easy Fancybox on a virgin Debian VM server and I get exactly the same issue – the only thing in the post is “[nggtags gallery=old_computers]” and I get no images showing.
Incompatability with WP3.1 maybe ??
There should be no problem with WP3.1 … Let me know if the pointers I gave by e-mail are not enough to get FancyBox working!
Update for you: Before I checked the theme for the duplicate jquery loads, I thought I’d trash the WP install completely, all themes and plugins as well.
Virgin WP3.1 install, Easy Fancybox and Nextgen as the only plugins, using the supplied Twenty Ten theme.
Post contains nothing more than [nggtags gallery=flood]
Custom effect has been changed in Nextgen to class=”fancybox” rel=”%GALLERY_NAME%”
Even rebooted the server – same result. Absolutely nothing…
Correct me if I’m wrong, but this points to WP3.1 being the culprit, yes ??
hello, i’m working on a new site using thematic and a child theme. the plugin installed with no problem, but when i activate the plugin, i get a lot of:
Notice: Undefined index: id in /home/daveydz3/daveydz/wp-content/plugins/easy-fancybox/easy-fancybox.php on line 315
Notice: Undefined index: id in /home/daveydz3/daveydz/wp-content/plugins/easy-fancybox/easy-fancybox.php on line 317
in the admin as well as on the front end. just installed thematic yesterday and haven’t changed much besides styles.
also, a few other plugins are giving similar errors not just yours. I’ll leave your plugin activated so you can see.
any idea?
Hi David, you will need to set your server/hosting account to NOT print errors and notices like that on the front end. All errors/warnings/notices should be caught and written to a log file. Ask your provider or system admin how to achieve that. If it cannot be done on your hosting account, try putting the following code in your wp-config.php file, just after the line with “define(‘ABSPATH…” :
/* error logging */
@ini_set(‘log_errors’,'On’);
@ini_set(‘display_errors’,'Off’);
@ini_set(‘error_log’,ABSPATH.’/mycustom_error.log’);
Then create a new empty file with the name mycustom_error.log and upload it to your site root. The messages should be sent to that file instead of the front end of your site. Don’t forget to overwrite that file once in a while with an empty one to prevent a HUGE log file after a while…
i’m such a dumb dumb, after all that, i realized that– duh!– i enabled wp_debug *facepalm*
i removed that and the notices don’t come up.
Thanks for your reply!
I’ve discovered another possible bug. When select “Transparency fade during elastic transition” and customize the speeds to 700, 300, 300 and hit ‘Save Changes’, it resets them all to 300. As well, if I enter 700 in the first field and leave the second and third empty to default to 300, upon hitting ‘Save Changes’ it empties all three boxes, effectively setting the first I’ve tried to dictate manually to the default also. Just a heads up, thanks.
Thanks Cody, for spotting and reporting that bug… will be fixed in the next release
Thanks for the plugin. It’s easy to set up and the options are perfect.
I am, however, running into a couple issues. From what I can tell, it looks like the plugin is not enqueueing jQuery (the jQuery plugins yes, but not jQuery itself). Correct me if I’m wrong. I was running into an issue w/ have multiple copies of jQ active after enabling the plugin. I was enqueueing jQ in my theme, but that was first on the page, and the plugin was creating issues.
The second thing is more of a suggestion: is there a way to have the plugin only load the additional jQ scripts on pages that would use it? Currently, they are loading on all pages, so there is a good amount of overhead on something that I’m only using on a couple pages. If there was a fix, that would be great.
Thanks again!
Hi Ira, the plugin uses the official WP method of queuing scripts so it should work with any normal theme and should not cause conflict with any other plugins… unless they go outside the WP method. One thing you absolutely need is the
wp_head();code in your header.php but it sounds like you have that.Are we talking about http://www.roycroftdesign.com/ here? Looking at the source code, it loads jQuery just fine
About loading the scripts only if it is needed: that’s not possible at this time. The script needs to be loaded before it can check for any images it should ‘attach’ itself to. I could code a way to check for images in post/page content before the page loads but that will have some down-sides of its own. For starters, that will also have an impact on page load and it would leave out any images that are outside post/page content like sidebar widgets…
Thanks for the response. Did have jQuery enqueue’ed (and included wp_head in my header.php), so it must be some other issue. And yes, that’s the site. I’ll tinker with it if I get a chance.
Just an idea: would it be possible to enable a meta box on pages/posts with a check box to enable the script? I wouldn’t be as concerned if it was just one script, but really it’s about 8 scripts that I only need on one page. Or maybe there could be an option to only load them if there was a shortcut used on the page? Couple thoughts.
Hi Ira, I’ll consider your idea about the post meta box with a checkbox for a future release…
Hi there,
What could cause the “spotlight effect” to not work anymore? It worked at first, I don’t think I did much to the plugin for a few hours but then I could be wrong, then checked again, and it didn’t work anymore. Fresh reinstall (deactivate, then delete/reinstall, turn off all settings but the “images” one with “spotlight” checked) of the plugin itself didn’t help.
Thanks for the pointers!
Do you have a link for me?
Actually, it’s weirder than that: I’m primarily working on an iMac with safari (all latest versions). There it’s not working (anymore – it did work at first) – clearing the cache didn’t help.
On the same iMac with Firefox 4 latest beta, it does show the spotlight overlay – but the pdf thing is broken.
On my other computer, a MacBook Pro, it does work both on Safari and Firefox (latest stable OSX and Safari versions + latest FF 4 beta) but the pdf doesn’t work on FF.
On my client’s computer (windows 7 + firefox 3 I guess) it all works, both the overlay and the pdf – so I don’t really worry about the overlay so much (although it is weird) , but I’m wondering if there is not an incompatibility between FF4 and the pdf plugin.
As for the link: http://home.francoissechet.com/musicaglotz/musiciens/altinoglu-alain/ for example (I am the guy with the audio plugin question over at wordpress support… since it’s more of a troubleshooting issue than a general question that may apply to other wordpress people, I figured I would ask that one here instead)
Merci François, pour le bug-report avec FF4. Je vais l’ étudier… Concernant spotlight et Safari : plus difficile car je n’ai pas un Mac
Hi Ravan,
I just updated to WordPress 3.1 and FancyBox doesn’t work anymore. Any solution for this? Still works on single images tho.
Here’s the link –> http://www.arumaum.com/?p=260
I mean FancyBox doesn’t work on the gallery anymore, sorry..
Take a look at http://www.gourmetrabbit.com/magazine/, click on the image at the bottom – that is FancyBox working with WordPress 3.1
That link is FancyBox working on a gallery
Thanks for the reply Joe
Yes I just revisited the link and find out it is a gallery. May be it’s conflicting with my other plugins, I’ll try to disable them on by one.
Thanks for the reply Jon
Yes I just revisited the link and find out it is a gallery. May be it’s conflicting with my other plugins, I’ll try to disable them on by one.
If you’re using NextGen, ditch it – caused me no end of grief. There are a couple of tricks to get it working – happy to help if I can (if Ravan is busy..:-) )
Hi Harry, in your source I see the theme loads the jQuery library TWICE. This is never a good sign. Please edit out the hardcoded jQuery call ( a line with
< script type="text/javascript" src="http://www.arumaum.com/wp-content/themes/synthetik/js/jquery-1.4.1.min.js">< /script>) from your header.php first.Thanks for the response, Ravan.
I have deleted the line from my header.php but still doesn’t work. Is there something else that I missed?
Studied some more and it appears that jQuery 1.4.4 (included with WP) produces some kind of error (which I cannot explain) with your theme. You will need to edit the themes functions.php to make WP use the jQuery library version 1.4.1 that is included with the theme instead of it’s own… Do you know how to do that?
I found a tips from Bazil749: (original link –> http://wordpress.org/support/topic/i-want-to-disable-jquery-included-in-wordpress )
// Drop this in functions.php or your themeif( !is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"), false, '1.3.2');
wp_enqueue_script('jquery');
}
Is it going to work if I just replace the link to Google’s jQuery library with the one included with the theme?
Yes, that would be the way to go
Sadly it did not work Ravan.
I heard it’s tricky, but maybe I should downgrade the WP.
I don’t think the WP version is the issue here. Try this code:
function my_replaced_jquery() {
if(!is_admin()){
wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js', array(), '1.4.1');
wp_enqueue_script('jquery');
}
}
add_action('wp_enqueue_scripts','my_replaced_jquery');
(take care there are no false line-breaks when you copy/paste this code)
Awesome, it works. Thanks Man.
Gallery images are now clickable, but the next and previous buttons don’t work. Any idea?
Oops, sorry.. the buttons work! But I guess they slightly take more time than they used to be.
Thanks a lot Man!
Ravan,
this is a really fantastic plug-in! I installed for a new home page (http://www.quantapoint.com/test2/) and it works great on FF and Chrome, but in IE I just get a white box.
Can you please help me out? Thank you for your efforts.
If anyone with higher IE knowledge could take a look at http://wordpress.org/support/topic/plugin-easy-fancybox-not-working-in-internet-explorer we’ll be much obliged
I just left him a reply… I think I figured it out, IE was picking up a bad style from somewhere (visibility:invisible;)…so I posted the correction for him to add to his stylesheet. I fight IE like this all the time…it just decides to apply styles arbitrarily, so frustrating. Anyway, hope that helps…now, if you can only help me solve my IE problem with PDFs.
Is there a way to dictate that PDFs are displayed in single page format when the overlay opens? Right now it’s set to ‘width’ by default, but the top 1/2 of my first page is blank….so it looks like it opens to nothing when you just have to scroll down a bit. Defaulting to single (or full) page would be huge in my case. Thanks in advance.
PS – I did some searching online to see if there was a value I can change within the jquery file, but came up empty handed…
Hi Cody, I’m not seeing what you describe on http://www.bangtailpress.com/site/services/#readers … I suppose it depends on the browser and how the plugin that’s used interacts with it. I’m not sure there is an option to control what you want but you CAN change some options and play around to see if you can get what you want:
Open easy-fancybox-settings.php and find (in the latest version on line 476) the part
#toolbar=1&navpanes=0&nameddest=self&page=1&view=FitH,0&zoom=80,0,0and edit that to your liking. Maybe changing the parameter view=FitH (for fit-to-height?) is your ticket…I think you’re right, view=FitH looks to be the command, I’ll look into it, thanks man!
Interesting…just after posting my previous comment I noticed that others were having issues with PDFs displaying in an overlay using Internet Explorer. So I tested my PDF links in IE7 and IE8 and discovered that they do not work (work properly in FF). Instead of opening to the PDF, it opens the image used as the link. If you click that image a second time (within the popup) your are prompted to download the file directly…rather than have it display in-browser. I tried both the auto detect and class=”fancybox-pdf” methods, no dice either way. Here’s the link for you to reference, would love to get your feedback at your earliest convenience. (the two blocks on the right should open to excerpt PDFs).
I thought I fixed those issues in the latest version.
Will take a look at your site in IE (not easy for my as I’m not using windows a lot) ASAP but if anyone can verify the issue, please do so!
Need help getting an image to automatically popup on the load of the homepage. I’ve tried following the instructions outlined above, but I must have made an error. Can you help me get this going? thanks.
Hi Chad, you have misunderstood the instructions. You need to create a working INLINE link first.
After you got that working, you can give that link the parameter
id="fancybox-auto"and remove the link text (to hide the link) and useclass="fancybox-hidden"on the div that contains your inline content to hide that too.Hi. Is there a way when youtube auto-detection is enabled to disable a link in a single post? Something like class=”fancybox-voutube-disabled”?
Hi Elias, the class nofancybox should do the trick (it’s in the FAQ’s)
Thanks. Btw. did you find out if the qTranslate plugin makes the problems with the iframes?
Are you still seeing that problem? Which versions of qTranslate and Easy FancyBox are you using?
Fancybox Version 1.3.4.8
qTranslate Version 2.5.18 (Just Updated!)
And now it works. Thanks allot!
Hello. Great plugin! I have a problem with the class “fancybox-iframe” in
Chrome. When I use it in order to open a html page with
.swf, the page loaded in the frame it’s completly in blank until you click above. But in mozilla and IE works good!
Tell me: where can I see this problem in action…
Hi – Thanks 4 all. Finally it seems to work except one thing: EFB opens always one of the NextGenGallery’s pictures and doesn’t show the arrows to get to the following/previous pictures – unfortunately web site is under construction so I can’t give you a link, but do you have any idea?
You need two things:
1. Make sure you have
class="fancybox" rel="%GALLERY_NAME%"under “Custom” on the Effects options in NextGen;2. Then, on Settings > Media either set “Auto-gallery” to “One gallery for all” (easiest) or adjust “Section(s)” to match your theme’s posts div class/id usage.
Hello. Can someone please help me with this error message that only 1 person is getting when they try to view/download a pdf document with the fancy box plugin????
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; GTB6.6; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; AskTbFXTV5/5.9.1.14019)
Timestamp: Sat, 9 Apr 2011 02:40:56 UTC
Message: Invalid property value.
Line: 116
Char: 165
Code: 0
URI: http://www.balirock.com/wp-includes/js/jquery/jquery.js?ver=1.4.2
The document is a food menu located here: http://www.balirock.com/menus
THANK YOU SO SO SO MUCH IN ADVANCE!!
Hi Anna, try this: set in Overlay > Color either a valid color value starting with # or clear the field to use the default #777… It seems you have entered the value 777 (without #) so the plugin regards it as a numeric value instead of a string. That might be causing the error in IE.
Hi Ravan,
I am a beginner, and have a rather simple (embarrassing) question:
Can you tell me the exact code, I have to write when i want to use the iframe-option from your plugin. If i want for example to use an iframe for google.com, what do i have to write within the TinyMCE Editor in HTML and Visual. Unfortunately i couldnt find any example…
Thanks a lot!
Hi Dresad, first start with inserting a working link in your post/page content to the page you will later want to be opening in FancyBox. After that, the best thing to do is to NOT use the TinyMCE rich text editor but to switch to the ‘HTML’ tab. This will show you basic representation of the post content plus source code that comes along with it. This might look scary to you but it will give you the exact control over your content that you actually need here… Find the link you have just created in the HTML view. It will look something like
<a href="http://link.url/to/externalpage.html">Link text</a>and you will need to give that link aclass="fancybox-iframe"so it will look like<a href="http://link.url/to/externalpage.html" class="fancybox-iframe">Link text</a>. Then save and (if you enabled the iFrame option under the FancyBox settings) your link should open in a lightbox overlay…Hi,
I’ve got a small problem with Easy FancyBox.
I use it to open Vimeo movie on my website.
I use the default configuration for Vimeo with “auto-detect” mode.
It’s work perfectly on Mac and PC with different browser : IE, Firefox, Safari …
The problem is that is not working on iphone and ipad.
I’ve got a blank frame instead of the video.
Can someone help me ?
Best regards,
Sylvain.
PS : sorry for my english, i’m french.
Salut Sylvain,
I’m working on support for iPad and other devices in the current development release : http://downloads.wordpress.org/plugin/easy-fancybox.zip
I’d be grateful if you could give it a try and report any issues… en Français si tu préfère
Hi,
I notice others have had a problem with displaying PDFs in Firefox and is was fixed in release .7. I am still having the problem and I have release .8 installed. The PDF will display in IE8 and Google Chrome but a blank box displays in Firefox.
Any ideas?
Thanks
John
Hi John, please tell me more: which FF version? On faithful Linux or on M$ Windows? Can you give me a link? And do you also have trouble opening the PDF half way down http://demo.4visions.nl/easy-fancybox-sandbox/ in FF?
Regarding my earlier post about PDFs not working with Firefox. The problem is not your plugin but rather Firefox in Linux. Firefox works fine on a Windows machine. The Firefox issue with PDF has been around for sometime now, not sure if or when it might be resolved. Sorry for the false problem.
John
That’s strange. I’ve got FF 4.o running on Ubuntu 11.04 (64bit) with the acroread package installed and I can open PDFs (in- and outside FancyBox) just fine… Same as before with FF 3.6 on Ubuntu 10.10 (64bit) and on Linux Mint 9 (32bit). In fact, even if the official (Adobe’s) PDF reader is a bit bloated, it has always worked fine for me…
I’m having the same issue with PDFs in Firefox. I’m running version 3.6.17 for Mac. The box will open with a link to the pdf, but the document is never rendered. When I view your .pdf example, it prompts me to install a missing plugin, then a dialogue box appears from Firefox telling me “no suitable plugins were found.”
You can get the official package (inlcudes Reader and Mozilla browser plugin) from http://get.adobe.com/reader/otherversions/
Select your operating system and language, then download and install… There are versions for MacOS, Linux and even Android
If you pick English as language you are sure to get the latest version. Other languages might still only be available in older versions but they should work just the same.
Hello. Please help me. I use easy fancybox in comination with nextgen gallery everything work fine except image wont resize on a smaller screen.
Image 1200×800 wont resize to fit screen in a smaller window.
Also viewing the site on an iphone, the image in fancybox becomes very small.
See my site here: http://wp.lagrafica.se/photography/?album=1&gallery=7
I am comfortable with javascript, can this be changed?
Thanks for a nice plugin!
//Niklas
Hi Niklas, in which browser do you get this? When viewing your site in Opera 11, Chrome (latest) and Firefox 4, the images get scaled down just fine… But there does seem to be some problem because your theme, DeepFocus, loads the FancyBox 1.2.6 library. This interferes with the newer version 1.3.4 used in my plugin and results in unexpected behaviour. You need to either remove the one used by your theme or disable my plugin…
Hi! Thanks a million for the awesome plugin!
I am pulling up some web pages in iframes as well as a couple of youtube videos using fancybox. They box however is not centered.
Is there any way to center the lightbox?
Thanks again!
Hi Pat, the overlay frame should be centering automatically. Maybe there is some CSS on your site interfering?
I am not understanding how to put the images in a gallery so that my navigation arrows show up. I put the images in a widget/text http://xavierfleming.com and they come up one at a time when clicked. What exactly do I need to do to put them in a gallery? Thanks
Hi Bianca, the easiest would be to go to Settings > Media and set the Auto-gallery option to “One gallery for all”.
Alternatives with more control are: (1) manually give image links that you want to group together corresponding rel attributes (2) add any section, like your sidebar, that includes image links for which you want to create separate galleries in the Sections field.
Thanks so much!! I really appreciate the help. Have a great weekend!
Hi.
Firstly, love the plug-in.
Am having a problem with it tho…
http://www.davejohnsondesign.co.uk/2009/08/dips-purple-cows-and-big-moos
Have a look at the link above – I’m trying to get the ‘Fancy Box’ effect to work when the image is clicked on this page – but when I click on the image it opens in a new page, and then the Fancy Box effect works when the image is clicked in this new page.
At first I thought it might be a plug-in conflict, but I still get the same problem when I deactivate all other plug-ins.
Any suggestion on how I can get this to work?
Many thanks
Hi Dave, it’s not a plugin conflict, it’s the link… you are linking the image to another (auto-generated WP) page. You need to link the image directly to its larger version. When inserting the image in your post, there is an option to change the “Link to” URL. Choose “File” instead of “Post” there.
Brilliant!! that’s sorted it! Many thanks!
Hello,
I am developing a website and the plugin seemed to work just fine. Then I got a new client machine with Win7 Enterprise SP1 and IE8 x64. Then the entire WordPress site hang when loading. . When I use my old machine which is XP 32 bits with IE8 then it load but is slow. Upograding to IE9 on both and everything flies again. Using FF4 on the 64 bits also hangs on loading. Disable the plugin and all is fast again
http://213.46.9.236/main
Any glues ?
Ha Marcel, what plugin are you talking about? PDF? Flash? In both cases, you might have issues with a 32bit plugin on a 64bit system.
For Flash there is a 64bit bèta version available on Adobe Labs http://labs.adobe.com/downloads/flashplayer10_square.html but the PDF plugin is still only in 32bit
… searching on Google for 64bit and acrobat reader might get you some tips on getting it stable…
Installed easyfancybox plugin intending to use the iframe feature to display webpages. Set up evreything correctly put a test link on a post and everything worked fine for about 3 or 4 times of clickig on the link to this post after that though it quit displaying the iframe and wouldn’t work anymore. I have it set to auto trigger first iframe link so it would display automatically on page load. Am Using WP 3.1.2, IE 8 and latest version of plugin. You can see the post page here the link is at the top of the page: http://bargainmans.com/survival-food.html
Thanks for any assistance.
I had the class on the link set up like this: class=”fancybox iframe”. I just now changed it to this: class=”fancybox-iframe” and it started working again. Well at least it’s working now.
Yep, that’s exactly the way to go. Class “fancybox” is reserved for images and inline content but “fancybox-iframe” is the class to use when controlling iFrames in FancyBox.
Hi,
Im wondering how I can add another picture showing on the pop up box, as I dont want to repeat the one showing in thumbnail?
Best wishes
Desta
Hi Desta, FancyBox will show whatever image you LINK to and ignores what you use as thumbnail image or link text. So yes, these two can be completely different images. Example:
<a href="http://the.url.to/another-image.jpg"><img src="http://the.url.to/thumbnail.jpg" /></a>
Thanks!
Hello,
Is there a way to have my contact form pop up when clicked on instead of going to a new page with this plug in?
Thanks
Yes, that’s possible… See this example: Click the link “Formulaire contact” on http://www.jardindessecrets.fr/contact/ ( and don’t let the language scare you ) where FancyBox and Contact From 7 are working together. In the source code you can see how it’s done.
Hi Ravan,
I am trying to use Easy Fancybox on the above site (for the resume link), but for some reason it won’t work. Any ideas?
Thanks.
Hi, your theme Minicard already includes FancyBox. It’s an older version (1.2.1) which gets loaded on top of the one included in my plugin. Loading FancyBox twice is never a good idea and will cause unexpected results or — as in your case — will break FancyBox completely.
Sadly, the theme Minicard has its FancyBox javascript hardcoded in header.php (it does not use the official WP convention of including script and stylesheet files) so there is no way for my plugin to prevent this double loading of scripts… Do you have access to the theme template files? If so, and if you want to use my plugin to display PDF’s (as the integrated version cannot do) you need to remove all related FancyBox references from header.php:
<link rel="stylesheet" href="/js/jquery.fancybox/jquery.fancybox.css" type="text/css" media="screen" />
and the part from
<script type="text/javascript" src="/js/jquery.fancybox/jquery.easing.1.3.js"></script>
all the way down to
/* ]]> */
</script>
(just before </head>)