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
First, thanks for a great plugin! It has helped me out on countless projects.
I have been trying to get Easy Fancybox to work with a NextGen Gallery slideshow. So, I have made a WordPress page template that is pretty much empty aside from the header and footer info, a wrapper, and a
the_content()call.On the Slideshow page I am using the Slideshow Shortcode for NGG. Then I have a link on the main WordPress site to the Slideshow page, using
LinkWhen I click the link, it successfully opens a Fancybox, but the NGG doesn’t seem to work. However, if I visit the Slideshow page without using the Fancybox, it loads fine. Inside the Fancybox it just displays all the images full size, with no styles, no page background, and the functionality is gone too. For example, I can’t even close the Fancybox. I click the close icon and the icon itself disappears but the page remains.
When I check the error console after trying to load the iframe through Fancybox, I see the following:
Uncaught TypeError: Cannot call method 'width' of undefined
/wp/?page_id=131:4Uncaught TypeError: Object [object Object] has no method 'cycle'
2
Uncaught TypeError: Cannot call method 'is' of undefined
Sorry for such a long post, but do you know what could be causing this? Thank you for taking the time to read this, and any help is appreciated. Also, feel free to reply to me via email if that is easier for you.
Hi Ryan, to learn more, I’d like to see this in action. Do you have a link to that custom template slideshow page? If you prefer, you can send it to me via the contact form. Thanks
Hey there,
I’m using fancybox to display an embedded google map as inline content. It works great the first time it’s viewed however if someone tries to access it again, the content won’t appear.
Hi Kevin, the Google Map embed code uses iframe and this effect (when showing iframe as inline content in FancyBox) of being blank the second time, is known. Use the iFame method for showing the Google Map page. Take the URL that you see in the
src="..."part of the embed code and use that to create a direct link withclass="fancybox-iframe"(and have the iFrame feature on Settings > Media enabled) to show it in FancyBox.This is one of the greatest lightbox plugin that I used for my wordpress plugins site. Easy to install and produced fantastic output.
Best Regards,
Are you serious, Larry, or are you spamming me here? You’d be more convincing if the plugin was actually used or listed on your site…
At least it was polite spam! And he isn’t really gaining anything, because it’s a nofollow.
Fancybox is only opening the overlay, no image appears, just a little white box in the upper right corner. I’m using it on image attchments, not thumbnails.
Ive been using this plugin for over a year on several sites in the same way and have never seen this before.
I turned off all other plugins, my theme (custom community) is current and easy fancybox has always worked with it., in fact it’s currentlyworking on another site using the same attachment page code. I’m baffled.
Hi Jon, it looks like it’s working just fine from here… What browser are you using? Did you try clearing the cache?
Okay, last question (I hope)
I understand you can use EFB to open a gallery. What I would like to do is to open a gallery attached to a post but on the front page, without loading that post.
I am trying to link from a featured image on the home page, so that then opens the post’s gallery (and nothing else) in a lightbox. I’ve been fooling around with it but can see a way of doing it without having to fetch the page in an iframe and then end up with a fancybox within a fancybox (which is getting a bit too much like Inception for my liking)
I’ve tried using the gallery shortcode within the link a giving it the fancybox class, but that just opens the gallery within the page without triggering EFB.
As always, any help is very much appreciated,
Paul
Hi there,
really nice job with this plugin – it’s as it promises “EASY” to use
Are you planning on upgrading the underlying fancybox script to version 2 – which was released lately? Playing around with the new version (on their homepage) it seems to be a bit more fluent in behaviour, reaction to user input than the version 1.x…
FancyBox 2 compatibility is planned for the next release but I cannot include the script files themselves since the fancyBox 2 switched to other licencing than GPL. That means the script files are not allowed to be present in the WordPress Extend plugin repository. It will probably take the form of needing to download and upload the script files seperately before you can use them with the plugin.
Less easy than I wished but still
Oh, didn’t notice that – but the little manual work seems to be affordable
One other point I noticed while actually testing/ debugging some of the modifications on my site: Easy Fancybox throws quite some notices due to missing checks via isset(…) on certain variables:
NOTICE: wp-content/plugins/easy-fancybox/easy-fancybox.php:81 – Undefined index: id
NOTICE: wp-content/plugins/easy-fancybox/easy-fancybox.php:81 – Undefined index: default
NOTICE: wp-content/plugins/easy-fancybox/easy-fancybox.php:82 – Undefined index: input
NOTICE: wp-content/plugins/easy-fancybox/easy-fancybox.php:83 – Undefined index: hide
NOTICE: wp-content/plugins/easy-fancybox/easy-fancybox.php:84 – Undefined index: noquotes
NOTICE: wp-content/plugins/easy-fancybox/easy-fancybox.php:179 – Undefined index: autoAttributeAlt
Notice: Undefined index: Enalbe in /is/htdocs/wp1041616_2ECNKUZHZO/www/wordpress/wp-content/plugins/easy-fancybox/easy-fancybox.php on line 340
Notice: Undefined index: id in /is/htdocs/wp1041616_2ECNKUZHZO/www/wordpress/wp-content/plugins/easy-fancybox/easy-fancybox.php on line 351
Maybe something that might be considered in a future release…
Thanks for reporting. These errors have already been adressed in the current development version. If you really want to get rid of the notices (cluttering your log file) you could give that a try.
Hello & beautiful plugin!
I created a “Child Theme” of twentyeleven and the plugin works great except at the very top of the page. The first post photo pops up behind the header image. Is there a way to fix this? My site is not yet live, running BitNami from my mac.
Thank you!
Yes, that’s a known issue, as discussed on http://wordpress.org/support/topic/plugin-easy-fancybox-fancybox-popout-under-menuheader… The solution is to change the z-index for #branding to 999
Wahoo, that’s it! Thank you so much for your prompt reply
Hi Ravan,
Im ot sure how you finsd the time to answer all these queries, but since youre here..
I have 3 links Im trying to open in iframes. One is smaller in height than the other two so I tried specifying the size of the iframe as you’ve instructed above to get rid of the gap left by the missing scrollbar.
DISCLAIMER
PRIVACY POLICY
TERMS & CONDITIONS
Now, the problem is, if I set the disclaimer link with the specific width first in the list the other two links open in the same size iframe and override the values Ive set in the media settings (589 x 90%). If I put disclaimer last in the list the default settings override the specific settings and the disclaimer iframe is too big.
Any ideas?
Hi Droid, what you are seeing is a known limitation of the metadata method. The values of the first override all others that use the same link class, in this case “fancybox-iframe”. The only way around this is using a different class name, which usually is a problem, but not in your case: there is an alternative available for iframe links! Use for the two normal iframe links the class name “fancybox-iframe” with the default sizes set in the admin, then for the third smaller one use “fancybox iframe {width:100px;height:100px}” (change the size values, obviously) and see if that works… But be aware that this might affect other links with the same “fancybox” class on that same page. You’ll have to test
Ravan, you are a gentleman and a scholar. Thank you.
BTW If you’re taking feature requests – an easy to configure iframe section for the plugin with multiple configurable classes would be top of my list. There seems to be nothing available for wordpress despite the hundreds of modal/overlay plugins. Yours is the best out there by a mile.
Thank you for your kind words
I’ll take your request into consideration (in fact, I’ve been thinking about it already) but cannot promise anything soon. Priority has integration of fancyBox2 with a completely new API and non-GPL licence which poses the problem of not being allowed on WordPress Extend…
Hi, can you tell me how to unistall totally the plugin? if i disable and delete, when i re-install it, has the old settings!
Yes, settings remain in the DB options table. It’s just a few table entries, not complete tables that have been created… But I realise it might be worthwhile to have some kind of “reset” possibility where all settings are cleared. It’s on the todo list for a future version
If you really want to get rid of this fantastic plugin, first disable and delete it and then use the “Clean Options” plugin to find and delete all orphaned and obsolete options in the DB options table. You may safely delete all entries starting with “fancybox_” and that’s it!
Hello. I tray change css and js files to get this function http://jsfiddle.net/ANLxC/47/ but Easy FancyBox Plugin not working after changes.
Plese, help me. How to make changes?
don’t change the plugin files, just add your code ( you know:
$(function() { $('.popbox').fancybox({ onComplete: function(...) });) in a sidebar or footer text widget… Or even in your themes footer.phphey, thanks for the great plugin!
just having a slight issue with custom iframe size.
under settings>media, i have enabled iframes, and have set a size. however, i cant seem to get custom sizes to work on individual iframes with the code:
all frames open with the predefined size under settings only, and no matter what i set in the {} brackets.
see example here: themartinirepublic.com/events/ if you click on thursday, it should open 1300 wide, but instead opens at the predefined 1200 wide, like the saturday one.
thanks.
Give these links the class “fancybox iframe” (not i-frame) and then test your dedicated sizes between the curlies.
Hi Ravan,
Is there a way with this plugin to link directly to a specific fancybox based on a URL parameter? On my existing site, the following function works but I just don’t know where to place it in the files for Easy Fancybox.
var thisHash = window.location.hash;
$(document).ready(function() {
if(window.location.hash) {
$(thisHash).fancybox({
padding: 0
// more API options
}).trigger('click');
}
$('#rsvp').fancybox({
// more API options
});
}); // ready
I’d really appreciate if you could find a solution for me! I tried a bunch of the other Fancybox plugins and yours is really the best! It is vital for my client to have this function and if it’s not possible I’ll unfortunately have to start exploring other lightbox plugins.
For your reference:
http://www.flavormediagroup.com/#rsvp
http://www.flavormediagroup.com/wordpress/#rsvp
Thanks!
Hi Caitlin, just put your code wrapped in the proper script tags) inside a text widget in your sidebar of footer. Be aware that your code might become redundant in the next release as similar code is on the roadmap
Oh, well. One more question, sorry.
Is there a way to set a max-width to easy fancy-box and still have the box center? I’ve managed to fudge the css with max-width on the wrap, content and outer, but the frame still aligns to the left of the size set in the console.
For example, my width is set at 71%, but I want this to go no larger than 844px on screens larger than 1280px. I can set the size, but the alignment is still to a setting of 71%.
Hope you can help (again).
many thanks,
Paul
Hi Paul, I’m not sure about it but I think it will not be possible. The centering is done via javascript so I suspect no style rule can help you there…
Installed the plugin and loving it. However, I’m having trouble with the iframe method on class=”fancybox-iframe”. Using class=”fancybox iframe” works but the iframe is way too small. Using class=”fancybox-iframe” doesn’t work at all (the page loads normally, not in an iframe). I have class=”fancybox-iframe” in right now so you can see. Please check it out and advise.
For the class fancybox-iframe to work, you will need to activate the iFrame feature under the FancyBox options on Settings > Media.
Hello,
Need urgent help for vimeo video in fancy-box.
Since there’s a feature that you can autoplay the video on page load in full screen, Is there any way to auto close the video pop up fancy box when video is finished?
An urgent reply is appreciated.
Hi Fatima, no there is no such interaction between the Vimeo player and the FancyBox function implemented. In fact, there is no interaction at all. FancyBox is just another way of embedding media on your site… If you need interaction like auto-close on end of movie, you’ll have to be prepared to do some heavy customisation. It depends on the API provided by the Vimeo player (if it’s at all possible, I have not studied the case) how the end of movie play is detected.
Sb help me? I have problem with this plugin, it stopped working! My site is szuta.pl
Hi Michał, your theme is missing the essential
wp-footer()function call in the footer.php template file…I repai footer but it still not working ;/
Michał, it’s the outbound link tracking code from your seo plugin that is throwing an error
'this.attr' is not a functionon image links. Either disable that feature or tweak the seo plugins settings to get rid of the error. I cannot tell you how because I am not familiar with that plugin but once that error is gone, FancyBox will work… It seems to me you can completely disable the Google Analytics visitor tracking in that plugin since you are using yoasts google analytics already and right now you are counting each visit twice.Thanks. This was SEO
Thanks, this is indeed an easy to yet powerful plugin. I am having some issues getting it to open long tall images in a large size, I think this might be a limitation of fancybox in some way but I am not sure. I have tried many options to try and override the widow pop up sizes including the media setting curly bracket options in the class, but they seem to make no difference. please see this blog entry as an example http://www.roibot.co.uk/pinterest/
Hi Alan, the possibility to disable FancyBox’s automatic resizing is implemented in the development version. If it’s crucial to your operation, you can try that version out by downloading it from http://wordpress.org/extend/plugins/easy-fancybox/download/ and uploading via FTP … Let me know if you find any bugs!
Thanks, I’ll give it a go (on a test system) and let you know how I get on.
This website:
http://stackoverflow.com/questions/6528177/extend-fancybox-inside-an-iframe-to-outside
tells me that I would be able to have the fancybox overlay a parent iframe, which would be very helpful to me. Would you be able to instruct me what lines to change when I edit the plugin to accomplish this? Thank you so much for even considering this request!
Hi John, I see no way to integrate this behaviour by editing the plugin. However, you might try to add some script to an onclick attribute to links inside the iframe. Something (along the lines of the example on stackoverflow) like:
onclick="window.parent.$.fancybox({'href':'http://farm5.static.flickr.com/4058/4252054277_f0fa91e026.jpg'});return false;"Let me know if that works or not
Hi Ravan,
I am a noob to jscript and I have FB working on firefox and chrome but can’t get it to open properly on IE9. I am using HEADWAY theme so I am not sure if that has anything to do with it. I inserted the code below into a HEADWAY via HTML Javascript Adder Plugin.
The script I have is the following:
[gravityform id="1" name="How Can We Assist You?" ajax="true"]
Hi Ted, looking at your site I see no related javascript or CSS errors. I’m not in the position to test on Internet Explorer at the moment (my last Windows machine crashed badly) but it might be a conflict with the Thickbox script that is loaded too. Could you ask again on the WordPress forum or on Google Groups so others can take a look?
Hi Ravan,
First of all a great thank you for this awesome plugin! I am using it for my assignment and this plugin sure helpes me a lot!
I am currently using it with NextGen Gallery, and Easy Fancybox displays the description for each image during hover, as I am building a multilingual site the description looks messy when they are all being shown at once. Is there a way to disable title and only show the image when users hover over the thumbnail?
Any advice will be greatly appreciated!
Thanks,
Anisa
Hi Anisa, you can disable titles all toghether by removing the check mark next to “Show title” (one for each media type) on your Settings > Media admin page. Are you using a plugin to create your multi-lingual site? If so, which one?
Thanks for the advice!
However if I disable titles all together than I will not be able to have the description shown during the popup
However, the preview is not showing anymore and I do not know why, seems like it is only activated when I try to place the nextgen tagcloud in sidebar (which I failed to do so). Maybe this sort of solves the title problem, but I do want to have preview with no description and popup with descriptions though. Is there a way to tweak it?
Yes I am using qtranslate. I tried both
[:en]and<!--:en--><!--:-->tags and it does not work.http://www.qianqin.de/qtranslate/forum/viewtopic.php?f=3&t=3&p=15#p15
Ok, I see: qTranslate and NextGEN… I have no idea how these can be made to work nicely together (if at all) and it sounds to me like you’ll have to make separate galleries for each language if the language tags in the image titles do not get filtered. FancyBox does not play any part in this, it’s just a different way of presenting embedded media after it has been rendered by WordPress and the various plugins.
I do not have much experience with qTranslate because I have switched to Polylang and NextGEN I avoid as much as possible because it is simply too big/powerful/complicated for my usual website needs
Sorry I cannot really help here.
Thanks anyway
Hello RavanH,
I have install EasyFancyBox plugin, and I have use it in a widget in sidebar with image thumbnail to call youtube video in fancybox, but fancybox is only opening the overlay, no image appears, just a little white box with close button in the upper right corner. My test web site is here: http://www.bogosavljev.com/_lemaitre/en/cinema/
Click on any of tree thumbnails in right sidebar to see a problem.
Thanks,
Djuka
Hi Djuka, you are using the class “fancybox-youtube” which is reserved for youtube page links. If you want to play these movies (youtube or not) as inline content, use simply “fancybox”. Alternatively, just link to the youtube movie pages via their share URL (…youtu.be/…) and you do not have to embed them as inline content at all.
Hello RavanH,
I’m not sure what you mean? How to link image thumbnail to youtube movie?
I’m using this container to hold youtube video which is not open when I clikc on image thumbnail in sidebar:
<a href="#commence" rel="nofollow"><img src="/images/commence.jpg" /></a>Either move the the
id="commence"from the hidden div to the object inside it OR just change thehref="#commence"tohref="http://youtu.be/YOURVIDEOPAGE"(use the short URL that Youtube gives you for sharing) and remove the hidden object.When I change href=”#commence” to href=”http://youtu.be/-e10eNq6ztI” I don’t have overlay, just loading icon, no youtube video in fancybox… And I have remove hidden object (in first thumbnail), don’t look other two, I didn’t work on them…
Ahhh, finaly it’s working!
I have move id=”commence” from hidden div to the object and it work!
Thanks for your help!
I’m having difficulty getting an iframe to work.
This is the youtube iframe code that allows the video to be played on pc’s and ipod/ipads.
I’ve tried several different methods but not having any luck.
Here’s the iframe:
Never mind.. after more experimentation… I finally got it to work. You can delete these two messages.
Hi James, the dedicated class “fancybox-youtube” already uses the Youtube iframe embed. Is that not working for you on iPad?
(your code got filtered out by WordPress so I’m not clear on what you where actually trying to do, sorry)
Hi there,
I need some help with this plugin. I was able to get overlays for youtube videos and htmls on only one post, but not on the other posts. Is there a way to fix this? Thanks.
Hi humyai34, it depends on what is causing the problem… maybe if you share a link I can tell you more.
Hi RavanH,
I just resolve the problem. Some of my posts contain javascripts that conflicted with the plugin, so I gotta around that. Thanks for responding with an offer.
I really like this plugin. It is like the swiss army knife for the lightbox effects on wordpress.
I created this quick video tutorial to show anyone who is interested on utilizing this plugin on their wordpress blog or website..starting from installing it, to some of its configuration all the way to couple of different scenarios and uses for it.
Check it out here..
http://getyourblogready.com/?p=641
That’s fantastic Tarek! Thanks for sharing
( by the way, the class fancybox-youtube is not even needed if you leave the auto-detect switched on 
)
Thanks Ravan,,,
I am planning a more detailed video….
and once I am done I will posted here, so others can benefit.
Thanks for the feedback, and anything to make wordpress awesome
Hello,
I am using fancybox with contact form 7 to popup the form. For past one month it was working fine, but suddenly the popup doesn’t work anymore! I am assuming this has got to do with the recent update?? Contact form 7 is working perfectly ok as I have tested it without fancybox
here is the code used:
<a class="fancybox" href="#contact_form_pop">Contact Us</a>
<div class="fancybox-hidden" style="none;">
<div id="contact_form_pop">[contact-form-7 id="5248" title="Contact Form]</div>
</div>
Hi tracersa, I’ll respond to this question on the forum http://wordpress.org/support/topic/plugin-easy-fancybox-popup-not-working#post-2751561
Thank you..I have replied back to you. Hope you will be able to help
Hello Ravan,
Hope you doing well..
Are you aware of any issues with the easy fancybox, and The thesis theme?
FOr some reason the plugin is not working with thesis..
Let me know, and thanks again for your help and your feedback…
Tarek
Hi Tarek, I’m not familiar with the Thesis theme or incompatibility with Easy FancyBox… Do you have a link so I can take a look?
Hello, I’m having a problem with Easy FancyBox showing video with Firefox browsers. The popup only shows a white screen but plays the audio just fine. I have tried it on Safari and IE and it works great just not Firefox. Any help would be greatly appreciated.
Hi Tim, I checked your site in Firefox and it works just fine… Maybe it’s a browser plugin issue? Other than that, the theme has already a lightbox script integrated: prettyPhoto. Plus a lot of other scripting going on. So you might be running into a conflict at some point.
In reference to this exact issue, I downloaded the dev version, and while it did remove the errors mentioned, it also produced these errors. What to do?
Notice: Undefined index: sanitize_callback in ../wp-content/plugins/easy-fancybox/easy-fancybox.php on line 359
Hi Eric, Just uploaded a new dev version (6) so if you want to download again, please be my guest and tell me if these notices are gone
Thank you for the great plug-in.
I am using this plug-in with association with contact form 7. The contact form pops up when the user clicks on subscribe. Since the additional settings in Contact form 7 allow javascript, I used the following code to close the form.
on_sent_ok: “$.fancybox.close();”
This works but I am not able to view the confirmation/validation/error message. I want another fancybox to pop up with the form submission message.
Any help in this regard would be really appreciated.
Hi Copyleft, a great idea! Thanks for sharing how you made it work so far… I’m sorry that I cannot be of any help since I’m not familiar with these hooks in Contact Form 7. Is on_sent_ok triggered after each submission or only after a valid submission, in which case “$.fancybox.close();” would only suppress the confirmation message, which theoretically could be replaced with a custom message in FancyBox. If not, are there other hooks (javascript events) that might serve better?
Thank you for your reply.
on_sent_ok is only triggered on successful completion. “$.fancybox.close();” only suppress the confirmation message. I have no idea how to pop up another box with the confirmation message. Maybe I need to add an auto pop up after
this statement.
on_sent_ok: “$.fancybox.close();”
I tried placing the following but no luck
<a href="#testboxopen"></a><div><div id="testboxopen">
It worked
</div></div>
Looking forward to your feedback.
Give the link the id=”success” attribute and try
on_sent_ok: "jQuery.fancybox.close();jQuery('#success').click();"I placed the following code but I still don’t get the second pop up.
on_sent_ok: “jQuery.fancybox.close();jQuery(‘#success’).click();”
<a href=”#success”></a>
<div class=”fancybox-hidden”>
<div id=”success”>Successful submission</div>
</div>
You forgot to give the link the id=”success” attribute.
Sorry, you changed the ID’s … here is a full example of what I mean:
on_sent_ok: “jQuery.fancybox.close();jQuery(‘#successlink’).click();”
<a href=”#success” id=”successlink”></a>
<div class=”fancybox-hidden”>
<div id=”success”>Successful submission</div>
</div>
Your timely and helpful support is really appreciable.
The above code stops even the first popup to close. You can have a look at http://babarhaq.pk/wordpress/
Again thank you for all your time and support.
Copyleft, you need to type the code manually instead of copy-pasting because that will take copy the wrong quotation marks (this is a template thing: normal single and double quotes in posts and comments on this site get converted to rounded quotes)… Another thing is that you are running two FancyBox plugins on the same site. The other one is throwing an error.
Finally, I was thinking about another approach: forget the hidden div and link with new fancybox and just set a small timeout/wait to the close command so that the visitor will be able to read the success message (which you can adapt to say the window will close in a few seconds) with the code
on_sent_ok:"jQuery('#fancybox-wrap').fadeOut(5000); window.setTimeout('jQuery.fancybox.close()',4000);"Change the values 5000 and 4000 (milliseconds) to vary the fadeout and closing times.
Trying to get one thumbnail to open multiple hidden images.
The thumbnail opens twice then the other images. Want to not have the thumbnail open with the large images.
Also if I want multiple groups of these on the same page is using rel=”group1″ …rel=”group2″ correct?
Site: http://www.wsreclamation.com/portfolio/
Code:
<div>
<a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_03361-e1337092420650.jpg">
<img src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_03361-e1337092420650.jpg" alt="" width="350" height="262" />
</a>
<div class="fancybox-hidden">
<a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_03361-e1337092420650.jpg">
<img class="alignnone size-large wp-image-158" title="IMG_0336" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0336-1024x768.jpg" alt="" width="1024" height="768" />
</a>
<a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0337.jpg">
<img class="alignnone size-large wp-image-157" title="IMG_0337" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0337-1024x768.jpg" alt="" width="1024" height="768" />
</a>
<a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0339.jpg">
<img class="alignnone size-large wp-image-156" title="IMG_0339" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0339-1024x768.jpg" alt="" width="1024" height="768" />
</a>
<a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0340.jpg">
<img class="alignnone size-large wp-image-155" title="IMG_0340" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0340-1024x768.jpg" alt="" width="1024" height="768" />
</a>
<a href="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0342.jpg">
<img class="alignnone size-large wp-image-154" title="IMG_0342" src="http://www.wsreclamation.com/wp-content/uploads/2012/05/IMG_0342-1024x768.jpg" alt="" width="1024" height="768" />
</a>
</div>
Hi Alex, you do not need to use the hidden div for that. Just place all thumbnails into your post content (linking them to their full size counterpart like you did already) and then go into the HTML View editor tab and remove all the img tags (starting with
<img ...and ending with... />) except the first one. This leaves you with one thumbnail linked to one image, followed by a lot of links without anchor text which makes them invisible to visitors but still accessible for FancyBox.If you want full control over galleries, you will need to disable the Auto-gallery option on Settings > Media and then use the
relattribute on each link like you seem to have understood alreadyThanks
Can you just give me an example of how the code will look please.
Forgive me if this has been covered but I can’t seem to figure it out.
I have a WP gallery on this page:
http://linkserver55.com/~netprofi/simon-robson/
with an image at the top and the gallery lower down for the portfolio.
How do I get rid of the head shot from the portfolio gallery?
Thanks, in advance, I have added the “nofancybox” class to the head shot but it still shows up in the gallery.
Annette
Hi Annette, the head shot shows up in the FancyBox gallery because it is right there in the WordPress gallery (the last one) which is managed by WordPress, not by my plugin. To make WordPress not include that image in the gallery, you’ll have to jump some hoops to make it no longer be linked to the post/page. Delete the image. and then create a new page or post that you keep in Pending status or Private (as long as it is not accessible to public) and then re-upload and insert the head shot into this private post. After this operation, the image is now attached to this private post. Then go back to the original page and re-insert the image by browsing the media gallery (it should be at the top there since you have just uploaded it). Now, the image is in the post that you want it while being attached to another post. This way, it will not show up in the gallery… Like I said, it’s a bit complicated. Hope the method will serve you. Otherwise you’ll either have to insert all the other images manually (not using the WordPress gallery feature) or use a plugin like NextGEN Galleries.
Wow … thanks so much … you are AWESOME.
This is the perfect solution.
Thanks so much,
xxxooo