=== Easy FancyBox === Contributors: RavanH Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=ravanhagen%40gmail%2ecom&item_name=Easy%20FancyBox&item_number=1%2e3%2e4%2e9&no_shipping=0&tax=0&charset=UTF%2d8¤cy_code=EUR Tags: fancybox, lightbox, gallery, image, photo, video, flash, nextgen, overlay, youtube, vimeo, dailymotion, pdf, svg, iframe, swf, jquery Requires at least: 3.3 Tested up to: 4.0 Stable tag: 1.5.7 Easily enable the FancyBox jQuery extension on just about all media links. Multi-Site compatible. Supports iFrame and Flash movies. == Description == Easy FancyBox plugin for WordPress websites gives you a flexible and aesthetic lightbox solution for just about all media links on 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. After activation, all links to **JPG, GIF and PNG images** are automatically opened in the [FancyBox](http://fancybox.net/) Mac-style lightbox that floats over the web page. Most options available can be managed with this plugin along with some extra features. **Also supports:** - All common image types including webp _and_ image maps - WordPress Galleries - NextGEN galleries (see FAQs for instructions) - Youtube galleries via Youtube Simple Gallery plugin (see FAQs for instructions) - SWF (Flash) movies - SVG media images (thanks to Simon Maillard) - Links to **Youtube**, **Vimeo** _and_ **Dailmotion** - Hidden inline content - iFrames - PDF files - Auto-popup on page load - links inside Gravity Forms in ajax mode For **advanced options** and **priority support**, there is a **[Pro extension](http://status301.net/easy-fancybox-pro-extension/)** available. See [Screenshots](http://wordpress.org/plugins/easy-fancybox/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](http://wordpress.org/plugins/easy-fancybox/faq/) 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 [Status301](http://status301.net/tag/easy-fancybox/feed/) 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](http://status301.net/wordpress-plugins/easy-fancybox/) or [WordPress forum](http://wordpress.org/tags/easy-fancybox?forum_id=10). Visit [FancyBox](http://fancybox.net/) for more information, examples and the FancyBox Support Forum. Please consider a DONATION for continued development of the FancyBox project. **Recommended:** - For increased site performance, simply install and activate the plugin [Use Google Libraries](http://wordpress.org/plugins/use-google-libraries/) to load jQuery from Googles CDN. = Translators = - **Croatian** * Ivan Capan (version 1.5.6) - **Czech** * Eldenroot (version 1.5.5) - **Dutch** * R.A. van Hagen, http://status301.net (version 1.5.6) - **French** * Emmanuel Maillard (version 1.5.5) - **Gujarati** * Apoto Team, http://www.apoto.com (version 1.5.0) - **Hindi** * Outshine Solutions, http://outshinesolutions.com (version 1.3.4.9) - **Indonesian** * Nasrulhaq Muiz, http://al-badar.net (version 1.5.5) - **Lithuanian** * Vincent G, http://www.host1free.com (version 1.3.4.9) - **Persian** * Ali Akbar Kaviani, http://www.wiki10.net (version 1.5.2) - **Polish** * Kamil Szymański (version 1.3.4.9) - **Romanian** * Web Geek Sciense, http://webhostinggeeks.com/ (version 1.3.4.9) - **Serbo-Croatian** * Andrijana Nikolic, http://webhostinggeeks.com/wordpresshosting.html (version 1.5.2) + translation of this page on http://science.webhostinggeeks.com/easy-fancybox - **Slovak** * Jan Fajcak, http://fajo.name/ (version: 1.5.7) - **Spanish** * David Pérez, http://www.closemarketing.es (version 1.3.4.9) - **Turkish** * Hakan Er, http://hakanertr.wordpress.com/ (version: 1.5.2) - **Ukrainian** * Cmd Software, http://www.cmd-soft.com (version: 1.3.4.9) == Installation == = Wordpress = Quick installation: [Install now](http://coveredwebservices.com/wp-plugin-install/?plugin=easy-fancybox) ! … OR … Search for "easy fancybox" and install with that slick **Plugins > Add New** back-end page. … OR … Follow these steps: 1. Download archive. 2. Upload the zip file via the Plugins > Add New > Upload page … OR … unpack and upload with your favourite FTP client to the /plugins/ folder. 3. 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](http://fancybox.net/) 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! = I installed the plugin. What now? = First, make sure that image thumbnails in your posts and pages are linked to their full size counterpart directly. Open any post with thumbnail images in it for editing and select the first thumbnail. Click the **Edit Image** button that appears and choose **Link To: Media File**. From now on, clicking that thumbnail should open the full size version in FancyBox. The same thing goes for WordPress Galleries. Choose **Link To: Media File** when inserting a gallery tag. = I want to change something. 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](http://wordpress.org/plugins/easy-fancybox/screenshots/) ... = Help! It does not work... = Please follow the trouble shooting steps on [Other Notes](http://wordpress.org/plugins/easy-fancybox/other_notes/) to determine the cause. If that fails, ask for support on the [Easy FancyBox WordPress forum](http://wordpress.org/tags/easy-fancybox) or go to the [development site](http://status301.net/wordpress-plugins/easy-fancybox/) = ADVANCED = = Will a WordPress generated gallery be displayed in a FancyBox overlay? = Yes, but _only_ if you used the option **Link To: Media File** when inserting the gallery! The gallery quicktag/shortcode should look something like `[ gallery link="file" ]`. = The lightbox does not look good on mobile devices. What can I do about that? = The FancyBox 1.3.4 script that is used in this plugin was not developed with mobile devices in mind. The only way around this issue is currently to disable FancyBox for small screen sizes. You can do this by adding a text widget in your sidebar with the following code snippet. ` ` Tweak the value 641 to target other screen sizes. = Can I make a slideshow from my gallery? = In the [Pro extension](http://status301.net/easy-fancybox-pro-extension/), there is an Advanced option called "Gallery Auto-rotation" for that. = Can I exclude images or other links from auto-attribution? = Yes. All links with class **nofancybox** that would normally get auto-enabled, will be excluded from opening in a FancyBox overlay. `` = Can NextGEN Gallery work with Easy FancyBox ? = NetxGEN has its own built in FancyBox version along with a choice of other lightbox scripts but if you prefer to use Easy FancyBox (because of better customisability) then you need to take some steps to make the two plugins compatible. 1. Go to your Settings > Media admin page and switch OFF the FancyBox Auto-gallery option; 1. Go to Gallery > Other Options and set the Lightbox Effects option to "No lightbox" and click on Show Advanced Settings; 1. fill the Code field with ` class="fancybox" rel="%GALLERY_NAME%" ` 1. Leave the other fields empty and save your settings. = 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: `
` tag in their footer.php template or elsewhere. = Plugin conflicts = - **jQuery Updater** moves jQuery to version 2+ wich is incompatible. - **All in One SEO Pack** and **Analytics for WordPress** with outbound link tracking enabled. Disable that feature. - **Better WP Security** randomly changes version numbers in linked file URLs, breaking the FancyBox stylesheet. Disable the option "Display random version number to all non-administrative users" in the Better WP Security settings. - By default **Google Analytics for WordPress** converts links like `href="#anyID"` to `href="http://yoursite.url/page/#anyID"`, disabling inline content shown in FancyBox. - **Wordpress Firewall 2** blocks access to image files needed for porper display of the FancyBox overlay in older IE and other non-css3 browsers. - **WordPress Amazon Associate**: A script provided by Amazon and the FancyBox script are incompatible. Disabling _Product Preview_ in the **WP - Amazon > Settings** page should work around the issue. - **WP Slimstat** plugin interferes with the Easy FancyBox script for YouTube url conversion. When clicking a Youtube link, the movie opens in an overlay as it is supposed to but immediately after that, the complete page gets redirected to the original YouTube page. Adding a `class="noslimstat"` to the link is reported to work around the issue. - When using **WP-Minify**, the javascript files like `fancybox/jquery.fancybox-X.X.X.pack.js` and others need to be excluded from minification. - When using **W3 Total Cache**, minification needs to be switched off. You can try to run **WP-Minify** alongside W3TC to be able to exclude fancybox files (as suggested above) ans still have page speed benefit from minification. - Both the **uBillBoard** and **Camera slideshow** have their own easing script hard-coded which conflicts with the one in Easy FancyBox. The only way around the conflict is to set both the Easing In and Easing Out options on your Settings > Media page to **Swing**. - **WP Supersized** uses the Animate Enhanced jQuery extension which causes a conflict with the Easing extension used by FancyBox resulting in a 0px sized lightbox frame. Plus some kind of positioning issue with auto-centering. Sridhar Katakam wrote about a work-around on http://websitesetuppro.com/getting-easy-fancybox-to-work-properly-when-wp-supersized-is-active/. = Theme conflicts = - **Twenty Eleven** uses a very high stacking order (z-index: 9999) for the top image and menu div, resulting in FancyBox content being partially hidden under the page header. Work-around: Use the plugin [Custom CSS](http://wordpress.org/plugins/safecss/) or [Jetpack](http://wordpress.org/plugins/jetpack/) and add on the new Appearance > Edit CSS admin page the rule `#branding { z-index:999; }` - Older versions of **Elegant Themes** have FancyBox integrated in a hard-coded way, making them incompatible with Easy FancyBox. In the latest versions of these themes, there is an option to disable the included FancyBox. Use this option to make your theme compatible with Easy FancyBox :) - The **Mystique** theme has two option called "Lightbox" and "Optimize website for faster loading" that will break Easy FancyBox. Disable both in Mystique's options > Advanced. - **Imbalance** and other themes that uses the Photo Galleria jQuery extension: turn of the JSGallery option. - Themes like **Envisioned**, **Chameleon** and many others have FancyBox baked in. There is no solution other than stripping the theme of all FancyBox related code or disable the plugin and use the theme provided version... - Themes based on the **Thesis** framework might see issues in IE 8, for which [a hack has been proposed](http://voidzonemedia.com/solutions/thesis-ie8-remove-ie7-emulation/) = Other = - When showing an iframe as inline content in FancyBox -- not advised, use fancybox-iframe instead! -- the iframe will become blank after opening and closing it. The solution is to link directly to the iframe source and use `class="fancybox-iframe"` instead. - Embedded flash content that has no wmode or wmode 'window', is displayed above the overlay and other javascript rendered content like dropdown menus. WordPress does NOT check for missing wmode in oEmbed generated embed code. Since version 1.3.4.5, the missing wmode is added by this plugin for WP (auto-)embeds but not for other user-embedded content. Please make sure you set the wmode parameter to 'opaque' (best performance) or 'transparent' (only when you need transparency) for your embedded content. == Trouble Shooting == If, after activation, your images do not open in a FancyBox overlay, there are several possible reasons. Some are easily solved, others are more difficult. Follow these basic checks to make sure everything is in place: = Basic checks = 1. Make sure that thumbnail images are linked *directly* to their larger counterpart, not to a dynamic WordPress page that includes the larger image. This means when you insert an image in your posts or pages, you need to select `File URL` at the **Link** option instead of `Page URL`. You'll have to manually edit your old posts if you have always inserted images with `Page URL` before, FancyBox cannot do this for you. 1. Make sure you have all the needed media and their *Auto-detect* options activated on your **Settings > Media** admin page. If you are using images in other formats that JPG, GIF or PNG, you need to add the extensions to the Auto-detect field for Images. Please note: The image file names must actaully *end* with that extension! This means that if you have an image file that (for example) has *no* extension (does not end with .jpg or any other) even if is in JPEG compressed format, the FancyBox will not be able to detect is as an image. You will need to manually give those links the class `fancybox` to trigger FancyBox. = General trouble shooting steps = 1. Switch off all other plugins and switch your sites appearance to the default Twenty Eleven theme. FancyBox should work now. If so, continue with the next step. If not, re-install the plugin and verify the basic steps above. Then open any page on your site and view the source code by right-clicking on an empty section and selecting 'View source...' (or similar). Find in the `
` section a referenced stylesheet `easy-fancybox.css.php?ver=x.x.x` and copy the full URL. Paste that URL in the address bar of a new browser tab to open the stylesheet directly. It should open without any errors and show a lot of stylesheet rules on a single line. If not, there is some incompatibility with your servers PHP setup. Please ask on the [Easy FancyBox WordPress forum](http://wordpress.org/tags/easy-fancybox) or go to the [development site](http://status301.net/wordpress-plugins/easy-fancybox/). 1. Switch back to your original theme and check if FancyBox is still working. If so, continue with the next step. If not, See the Theme Incompatibility checks below. 1. One by one, switch each plugin that you had running before back ON. Keep checking to see at which point FancyBox starts failing and you will hve found the conflicting plugin. = Theme Incompatibility checks = 1. See known theme conflicts above first, then continue with these following steps. 1. Make sure your theme is capable of placing the needed javascript and css in the page header. Open any page on your site and view the source code by right-clicking on an empty section and selecting 'View source...' (or similar). There you will need to check of there are any references to javascript files like `jquery.fancybox-x.x.x.pack.js?ver=x.x.x` in the `
` section. There should also be a `easy-fancybox.css.php?ver=x.x.x` and some javascript that starts with ``... If it's not there, your theme is really out of date. Consider switching to a new theme fast! 1. Check if your theme wraps post/page content in a div with class `hentry`. If it doesn't, you might need to edit the option `Section(s)` on **Settings > Media** to reflect the class (or ID) name of the div that holds post/page content. 1. Make sure that your theme does not load the main jQuery library file more than once. Look for references to javascript files like `jquery.js?ver=x.x.x` or `jquery.min.js` in the page source code. If you find more than one, try to find out in which theme template file that second reference is hard-coded and remove that line. Usually in header.php or footer.php 1. Check if your theme loads another or the same lightbox script. Look for references to Thickbox, Prettyphoto, Lightbox2, Colorbox or FancyBox script files or code. These are very likely to cause the incompatibility and you will either have to remove these by hacking your theme or switch to another theme. If you still do not get to see your images in FancyBox, ask on the [Easy FancyBox WordPress forum](http://wordpress.org/tags/easy-fancybox) or go to the [development site](http://status301.net/wordpress-plugins/easy-fancybox/) = Plugin Incompatibility checks = 1. If you followed the general trouble shooting steps above, you should now be aware of which plugin is conflicting whith Easy FancyBox. See known plugin conflicts above first. If the plugin and its solution are not mentioned there, continue with the following steps. 1. Make sure that the plugins do not make the main jQuery library file load more than once. Look for references to javascript files like `jquery.js?ver=x.x.x` or `jquery.min.js` in the page source code. If you find more than one, try to find out where that comes from. 1. Check if your theme loads another or the same lightbox script or any other of the needed jQuery extensions like jquery.easing or jquery.mousewheel. Look for references to Thickbox, Prettyphoto, Lightbox2, Colorbox or FancyBox script files or code. These are very likely to cause the incompatibility and you will have to either find a setting in the other plugin to switch OFF the use of the conflicting script (possible in NextGEN for example, see under Advanced below) or choose between the two conflicting plugins. == Translation == 1. Install PoEdit on your computer. 1. Go to this plugins /languages/ directory. 1. If there is no .po file that corresponds with your language yet, rename the template translation database easy-fancybox-xx_XX.po by replacing the xx with your language code and XX with your country code. 1. Open the .po file of your language with PoEdit. 1. Go to Edit > Preferences and on the tab Editor check the option to compile a .mo database on save automatically. Close with OK. 1. Go to Catalog > Settings and set your name, e-mail address, language and country. Close with OK. 1. Go to Catalog > Update from POT-file and select the main easy-fancybox.pot file. Then accept all new and removed translation strings with OK. 1. Now go ahead and start translating all the texts listed in PoEdit. 1. When done, go to File > Save to Save. 1. Upload the automatically created easy-fancybox-xx_XX.mo database file (where xx_XX should now be your language and country code) to the plugins /languages/ directory on your WordPress site. 1. After verifying the translations work on your site, send the .mo file and, if you're willing to share it, your original .po file to ravanhagen@gmail.com and don't forget to tell me how and with what link you would like to be mentioned in the credits! == Screenshots == 1. Example image with **Overlay** caption. This is the default way Easy FancyBox displays images. Other options are **Inside** and the old **Outside**. 2. Example of a YouTube movie in overlay. == Upgrade Notice == = 1.5.7 = Bugfix release. == Changelog == TODO: optional disable for small sceen sizes TODO: move all script to footer and make that optional to for theme compat TODO: make jQuery inclusion optional TODO: make jQuery 1.6- compat optional = 1.5.7 = * FIX: Pro extension link update * NEW: WebP support and class='image' to force image media type * IE 6-8 css rules optional * iframe embed for Youtube, Vimeo and Dailymotion * Croation translation * HTML5 players allowfullscreen default = 1.5.6 = * iPad positioning patch * Don't unregister scripts that are not ours even for conflict prevention * box-sizing: border-box issue in Firefox fixed * Allow mousewheel scrolling page in the background again = 1.5.5 = * Prevent mousewheel scrolling page in the background * New stylesheet IE alphaimageloader path fix approach * Czech translation added * Updated Indonesian translation = 1.5.2 = * BUGFIX: easy_fancybox_handler() in combo with trigger('click') causes Uncaught Exception script error = 1.5.1 = * FIX: jQuery 1.9+ compatibility * Dropping support for gForms again -- "Cannot convert 'c' to object" error in combinaition with some older gForms version :( * NEW: support for Infinite Scroll by Jetpack = 1.5.0 = * FIX: CSS3 box-sizing issue (Twenty Thirteen) misplacing close button * NEW: Added SVG support. Thanks to Simon Maillard. * Pre WP 3.6: jQuery 1.9+ compatibility * JQuery Mousewheel extension update to 3.1.3 * NEW: Elegant Themes compatibility * Some small Touch device compatibility improvement hacks to the 1.3.4 script * Major plugin overhaul: Class implementation * NEW: Disable hide on overlay click * NEW: Allow automatic resizing to large image size set on Settings > Media during media upload via the hidden WordPress function media_upload_max_image_resize() TODO test more! * NEW Options: iFrame scrolling, autoScale, key navigation/close, cyclic galleries * Metadata custom parameters and Mousewheel gallery scrolling scripts optional * Basic RTL languages/text direction support (gallery navigation inversion, title position) * BUGFIX: https in stylesheet on Windows IIS * Improved W3TC compatibility: query string issue * Gravity Forms in ajax mode compatibility * Use jQuery's bind('ready') for better ajax content compatibility * Dynamic stylesheet response headers to allow browser caching * Minified version of jquery.metadata.js * Auto-detect on image map areas * nofancybox class for menu items * SECURITY: Settings sanitization * BUGFIX: load_textdomain firing after the main settings array is loaded, leaving text strings in it untranslated. * BUGFIX: missing signs in Youtube url regular expression * BUGFIX: unquoted rel attribute selectors in jquery.fancybox-1.3.4.js * BUGFIX: broken url path in IE stylesheet when missing $_SERVER['SERVER_NAME'] * BUGFIX: easing extension not needed on linear easing = 1.3.4.9 = * NEW: Lithuanian translation * NEW: Hindi translation * NEW: Indonasian translation * NEW: Romanian translation * NEW: Polish translation * NEW: Spanish translation * NEW: jQuery Metadata support * NEW: Image map AREA support for all content types * NEW: new iFrame/HTML5 embed code for YouTube, Vimeo and Dailymotion * NEW: fix WordPress Dailymotion auto-embed code missing wmode * Some changes to default settings * Updated Dutch translation * BUGFIX: Opening speed = 1.3.4.8 = * NEW: Advanced option: Gallery auto-rotation * NEW: Spotlight effect * Improved auto-enable and auto-gallery settings * BIGFIX: CSS IE6 hack * BIGFIX: PDF object in IE7 = 1.3.4.6 = * PDF embed compatibility improvement * NEW: Show/hide title on mouse hover action * NEW: Auto-gallery modes (Disabled, page/post images only, all) * NEW: Dailymotion support * Links with id **fancybox-auto** will be triggered on page load * Anything with class **fancybox-hidden"** will be hidden * Support for menu items in iframe * Added class **nofancybox** for exclusion when auto-enabling = 1.3.4.5 = * FancyBox script version 1.3.4 (2010/11/11 - http://fancybox.net/changelog/) * NEW: Support for PDF * NEW: Easing options * YouTube, Vimeo and iFrame options adjustable * lots and lots of more options! * BIGFIX: work-around for missing wmode in WordPress (auto-)embedded movies (credits: Crantea Mihaita) = 1.3.3.4.2 = * BIGFIX: iframe width * BIGFIX: image overlay size in Google Chrome browser issue (FancyBox 1.3.3) * BIGFIX: fancybox-swf = 1.3.3.4 = * FancyBox script version 1.3.3 (2010/11/4 - http://fancybox.net/changelog/) * Vimeo support * YouTube Short URL support (disabled by default) * Auto-recognition and seperate class `fancybox-youtube` for YouTube * Auto-recognition and seperate class `fancybox-vimeo` for Vimeo = 1.3.2 = * FancyBox script version 1.3.2 (2010/10/10 - http://fancybox.net/changelog/) = 1.3.1.3 = * translation .pot file available * Dutch translation * NEW: YouTube and Flash movie support * NEW: Iframe support * added option Auto-enable for... = 1.3.1.2 = * added option titlePosition : over / inside / outside * added option transitionIn : elastic / fade / none * added option transitionOut : elastic / fade / none = 1.3.1.1 = * small jQuery speed improvement by chaining object calls = 1.3.1 = * Using FancyBox version 1.3.1