Easy FancyBox for WordPress

Easy FancyBox

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

Description

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

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

GDPR / EU Privacy

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

FEATURES

Supported media and content types:

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

Also supports:

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

Additional features:

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

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

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

Get support on the WordPress forum.

Visit FancyBox for more information and examples.

PRO FEATURES

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

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

KNOWN ISSUES

See a list of known plugin and theme conflicts here

Contribute

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

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

Frequently Asked Questions

Help! It does not work…

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

What’s FancyBox?

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

Which version of FancyBox does this plugin use?

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

I installed the plugin. What now?

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

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

Where is the settings page?

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

Will a WordPress gallery be displayed in a FancyBox overlay?

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

.

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

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

Can I make a slideshow from my gallery?

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

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

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

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

Can NextGEN Gallery work with Easy FancyBox?

Yes, follow the instructions here.

Can I use ONE thumbnail to open a complete gallery?

Yes, follow the instructions here.

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

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

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

Is Easy FancyBox multi-site compatible?

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

Easy FancyBox

1164 Comments

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>

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>

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 rel attribute on each link like you seem to have understood already 🙂

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.

I’ve a problem when i try to set the popup to open on page load.

Following your tutorial this is what i’ve made:

<div class="fancybox-hidden">
<div id="fancyboxID-1" style="width:460px;height:380px">
...inline content here...
</div></div>
<a href="#">Read my inline content</a>

But when i try to load the page the popup show The requested content cannot be loaded.
Please try again later and also the link is visible on my page.
What’s wrong? Thank you mate 🙂

Hi Andrea,

Try this code:
<div class="fancybox-hidden">
<div id="fancyboxID-1" style="width:460px;height:380px">
...inline content here...
</div></div>
<a href="#fancyboxID-1" class="fancybox" id="fancybox-auto"></a>

Which should auto popup a fancybox with the text “…inline content here…” and NOT show any link to re-open it. If you do want the link visible, add some anchor text (like the “Read my inline content” from the example) or an image.

My client wants a “Look Inside” pop-up for a paid PDF download. I’m using the Easy FancyBox plugin with Next Gen Gallery on this page: graingiver.com/food-for-thought
It works perfectly in Firefox, but in IE there are no navigation arrows to view each of the 4 pages. I only see the “X” to close the window.

Any suggestions?

Hi Eileen, the only thing I notice with IE is that the facebook script throws an error. Not sure why but your like button in the sidebar seems wrong (has <?php echo $URI; ?> in the iframe source URL which is NOT going to work) so maybe that could be interfering in Internet Explorer? It’s just a wild guess but try removing the text widget and disabling the facebook share plugin to see if that changes the behaviour of fancybox or not…

Thanks for the reply.
The popup didn’t work in IE before I added the social media code (though I appreciate you telling me there is a problem, and I’ll remove it from the sidebar.)
I’m not sure what to do now. Is the problem with using Next Gen? The goal is to display 4 images, PDFs or JPGS, in a particular sequence activated by clicking on one thumbnail.
Is there a better way to achieve this?

Well, it can be done without NextGEN which would make the site lighter, yes, but I would not call it better. With NextGEN it really should work too. Is there any possibility to switch to the default Twenty Eleven theme for a moment to see if thqt changes anything? Or you could try to upload some imaes to the post and insert them each seperately as thumbnail linked to their full size FILE counterpart (not attachment page) to see if that does work as it should… If so, you can then proceed to remove the thumbnails except the first one, while leaving the links to the full size images in the post source. You will need to do this in the HTML tab view. Hope this makes sence to you 😉

Ravan,
Thanks again for the reply. After stepping away from it for the long weekend, I tried your suggestions:
I removed the shortcode for the nggallery, then I re-uploaded the full size-images linking to the file URL, and inserted each thumbnail into the post for all 4 images. This worked beautifully in both Firefox and IE., whereby the full-size image pops up for the cover page and then advances in order through the other three. But, of course, I only want to launch from one thumbnail.
Thus I removed all thumbnails, except for the first one, and now the first full-sized image pops up, but there are no arrows to advance to the other links in either Firefox or IE. So, something went wrong when I removed the 3 thumbnails. It’s probably me, since no one else has posted about this. Please stick with me until this is resolved?
Here is my code:
<a href="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Cover_1024x1325.jpg"><img class="alignleft size-thumbnail wp-image-265" title="Look Inside" src="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Cover_1024x1325-150x175.jpg" alt="" width="150" height="175" /></a><a href="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Contents_1024x1325.jpg"></a><a href="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Introduction_1024x1325.jpg"></a><a href="http://graingiver.com/wp-content/uploads/2012/05/LookInside_Objectives_1024x1325.jpg"></a>

I really appreciate your time.

Eileen, I tested your code on my own site and it works just fine. Did you have the Auto-gallery feature turned on?

Hi, Is there a way where you can have a link inside an easy-fancybox that will shut down the easy-fancybox and go to a specific page inside the website itself?

best regards Peter

Hi Peter, yes that is possible but how to do it, depends on the content you are displaying inside FancyBox. Let’s say you are showing inline content, then place a link inside the text that points to the page you want to go and add this attribute to it: onclick="jQuery.fancybox.close();return true;". Use parent.jQuery.fancybox.close() from within iFrame content (will only work when both the parent page and the iframe content page come from the same domain) and when showing images or other media, you will have to get a link with the attribute (without ‘parent’) into the title. This is a bit more difficult. You’ll have to avoid using double quotes and maybe escape some stuff with a backslash to make it work…

Hi RavanH,

Thank you very much for the advice.

It is indeed both for inline content and iFrame content I need it. All materials are on the same domain, so that shouldn’t be a problem, I guess.

best regards Peter

Hello,
great plugin, love it!
Is there a way to display a Youtube or Vimeo playlist in Easy Fancy box, too?
I just get it to work with single videos.
Thanks for any advise!
Uta

Hi,
Thanks for a great plugin!!!

Is it possilbe to add ltr support?

the CSS I’ve taken care of:
.rtl #fancybox-title-over {
text-align: right;
}

and I can take care of translation.

But I do not know how to change the arrow direction…
for RTL the first item should be on the right
and pressing the arrow on the left should transfer to the next image.

I do not know how to accomplish that.

Can you please help?

Simon

Hello Simon, thank you for your feedback and request. RTL support is indeed something that would be valuable but I’d have to take some time for it. And someone to test it out for me, so if you don’t mind I’ll contact you via e-mail directly…

Simon,

Could you try this CSS?


#fancybox-left { left: auto; right: 0px; }
#fancybox-right { left: 0px; right: auto; }
#fancybox-right-ico { background-position: -40px -30px; }
#fancybox-left-ico { background-position: -40px -60px; }
.fancybox-title-over { text-align: right; }

I’m not sure if the body class .rtl is always applied correctly (it might depend on the theme) so I’m leaving that out.

Another thing: I have no idea how FancyBox will react to using the left/right arrow keys on an RTL keyboard. Does the left arrow key stroke move forward (to next image) or does it move backward like on LTR?

Please let me know if these rules are useful and how the keyboard arrow keys work. And if you made a translation and are willing to share it with the WordPress community, please send me the .mo file and I’ll include it in the next release 🙂

Regards,
Allard

Hi I have a problem with fancy box, I have an iframe content inside the fancy box, so it opens the first time. but when I try to open it again, the contents inside the fancy box suddenly vanished. I try auto-detect and also putting iframe class in it, but to no avail.

does anyone know any solution for this? or is having same problem?

Thanks and regards,
Dave

Not sure if you answered this already. I want to display a caption (the title) on the popups that is a working link to another page. Is that possible?

Thanks so much!

Hi Josh, yes that is possible. Replace the current title with HTML code that represents a link but without (!) using double quotes. Double quotes will break the link… If you know how a link is formed in HTML code, it should be easy. Just replace the usual double quotes with single qoutes. 🙂

Hi there – when I click an enlarged image or next /prev arrow, the same active image displays two more times before advancing on to the next image. So each time I try to navigate to a new image, what I get is the same image repeated twice before a new image appears. Is there a fix for this?

Thanks!

Hi Aaron, this usually indicates there are more than one (consecutive or nested) links to the same image in your page source. FancyBox does not discriminate between link targets and shows them all. If you give me a link to a page where the problem is visible, I might be able to tell you more. But you can also check yourself by opening the page source (it depends on your browser but usually you can right-click and choose “View page source…” or something) and find the thumbnail of the first image that appears double. Then check the amount of link/anchor (a) tags there are to its full size counterpart…

Hi Allard,

How i can set fixed width and height for pop-up window?

I tried this: $.fancybox( { autoSize:false, minWidth:400, width:400, height:400, maxWidth:400} ); – but not works for me.

How i can force this styles:
<div id="fancybox-content" style="border-width: 0px;width: 500px;height: 500px">

Thanks!

Hi Dmitry, with those style rules you added to the content div, it should already work. No need for any parameters in the fancybox() function.

Impossible task said by my colleague:

I want to open two different pop up form at same page and for it I have created two contact us form and and put their short code correctly but when i open either first or second popup form it opens the first popup form.

hi vishal goyal, it should be perfectly possible. are you using two different ID’s for the two forms and inside the two links?

Well, obviously…

Or are you talking about another ID like fancybox-auto? Are you looking to open these two forms in their own FancyBox at the same time? Then your colleague is right. That is not possible. You will have to display the two forms inside ONE box…

moe, tested on FireFox 13.0.1 and should work. if not on your end, then there is either something wrong on your site or try emptying the browser cache.

Hi Ravan,

First off all thanks for this great looking plug-in.
I try to use it to load in a webpage using the folowing code:
<a href="http://maakeenshirt.nl/designer/index.php">Open De Designer</a>

However, the page opens as a separate page and not as a overlay.
Iframes is activated in the control panel.

Any ideas?

Thanks a lot, Robert

Ha Robert, je commentaar was door Akismet als spam gefilterd. Vandaar dat er geen reactie kwam. Ik zie dat je nu Shadowbox gebruikt. Mocht je toch FancyBox willen, gebruik dan dit voor je iframe link:
<a href="http://maakeenshirt.nl/designer/index.php" class="fancybox-iframe">Open De Designer</a>

Or download and install the latest dev version, then add the link straight to your menu and give that menu item the “fancybox-iframe” class…

Hello RA,

I have tried many plugins but yours seems to do the trick I’m looking for. I am currently testing the development version (because of the “no resize” option), and have two questions, one which has been asked earlier (the first one below)but for which I have seen no reply:

1. Is it possible to have the large image open not on click but on the mouse hovering over the smaller one?

2. Is it possible to have an icon such as a magnifying glass automagically appear on the top right or left corner of the small image which has a link applied to it, so as to indicate there is a way to magnify it? I actually use the same source image both for the “thumbnail” (or smaller image, resized by attributes) and the larger one (which opens in the popup).

Thanks a lot!

Miklos

Hi Miklos, both questions: yes it is possible… but not with this plugin. That’s to say, it’s outside the scope of this plugin. However, if you would like to hire me for these customisations, please contact me 🙂

I have a problem when using iframe to show pdf in posts. I try to embed a pdf to post using following code:

<a href="http://File-path/File-name.pdf&embedded=true">File-name</a>

However, everytime I click the name it shows: ‘the requested content cannot be loaded, please try again later’. I find a post in this page that generate same problem, but the situation is different. Since I have very few php experience, I don’t know how to fix this problem. Can someone help?

Thank you in advance!

Hi Bryan, for iframe use the link attribute class=”fancybox-iframe” and disable the PDF feature in the FancyBox settings OR at least the auto-detection option in the PDF settings to prevent two different instances of FancyBox being attributed to the same link…

I add link attribute class=”fancybox-iframe” before the href and it seems work. But everytime when I click the link it keep showing loading icon and stuck there, totally no response. I have to shut down browser and restart. Since the file is just 700kb, I don’t think it is loading problem, any way to fix it?

Did you disable the PDF function on your Settings > Media page completely?

OK, I just double check the code and it is:
<a href="http://FILE-PATH/FILE-NAME.pdf&embedded=true" rel="nofollow">FILE-NAME</a>

In Settings>Media I have uncheck all settings of pdf (auto-detect, show title, allow title from thumbnail alt tag), but it still appear ‘the requested content cannot be loaded, please try again later’.

Actually I follow reference this solution and it seems work in that post:
http://wordpress.org/support/topic/plugin-easy-fancybox-error-with-fancybox-pdf-in-safari?replies=4

Hi Shawn, you need to look for the Media settings page under the Settings menu. Not the Media menu.

Hi,
My question is How to show number of image?
I would like to display a title and for example “Image 2 of 5” or “Image 2/5”.
I can’t find it…

Thanks a lot!

Hi wilq, that might be a feature of the Pro version in the future bit it is not possible with this plugin right now. Sorry.

Hi, I am using the recent version of the plugin and trying to get the box to work for the wordpress menu. I saw a thread about this in WP forums, but my class is just class=”fancybox iframe” . It is not working for me and using class=”fancybox-iframe” does not work for any links. I always have to use class=”fancybox iframe”.

Thanks for your advice!

Hi Sir, Such great plugin you made.

I just downloaded the latest version of the fancybox and was wondering why the shortcode (from wp-members) doesn’t work in the inline content of the fancybox?

Thanks very much

Hi Dave,

It has really nothing to do with FancyBox but it’s a WordPress thing. If the inline content is defined inside regular post or page content, the shortcode inside it should be treated just like normal. But if the inline content is inside a sidebar widget, the shortcode will not be converted by WordPress. Again, just like normal.

But there are ways to get WordPress handle shortcodes inside text widgets the same as they are in post content. The easiest is to install a plugin like Widget Logic which adds an option to process shortcodes in widgets at the bottom of the Widgets page.

Hi Rolf

Any chance you’d give us a little more detail on how to do this?
I’m seeing the following options:-
Add ‘widget_content’ filter
Use ‘wp_reset_query’ fix
Where do I go from there?

P.S. LOve your plugin!!!

Cheers
Rich
~

Hi Gudiq, you could do something like this from a link in inline content:

<a href="#" onclick="javascript:jQuery.fancybox.close();">close me</a>

Use parent.jQuery.fancybox.close() from inside iframe content (will only work when parent and iframed content are on the same domain). For more complicated examples of binding a function to an event in jQuery, see http://api.jquery.com/category/events/ but remember that jQuery on WordPress runs in noConflict mode (read what that means on http://api.jquery.com/jQuery.noConflict/)

Hi!
I wonder how to make international letters work in the image caption text?
The text “Det spöregnade när vi var på 9/11 Memorial” looks like this now -> “Det spöregnade när vi var pÃ¥ 9/11 Memorial”… 🙁

That text should appear just fine like it is. Does your theme use the proper DOCTYPE and meta CHARSET declarations? You should have UTF-8 (or any other that supports ö/ä/å characters) defined with something like <meta charset="UTF-8" /> in your theme source head section… And you should make sure your theme uses a universal font type that supports these characters as well.

Try switching to the default Twenty Eleven theme to check if the characters are correctly displayed. If not, there is something else going wrong.

Hello
I`m using this WP Plugin . It`s easy to use and very useful .
But today I found it some pictures not show with original scale (If the width of the image is too wide) . Others can .
I don`t know what happend.

Hi Tony, FancyBox will automatically scale down images that are larger than the browser window (viewport) so that there will always be a margin around them with the semi transparent overlay and room for the close button. If you do not like this behaviour, you could install the latest development version which has an option to disable downscaling. You can find the latest dev version on http://wordpress.org/extend/plugins/easy-fancybox/developers/ under Other Versions.

Hi,

After updating to WP 3.4.1 i lost some features. Image is not showing navigation arrows and i can´t choose colours from the adminpanel. X (close) button is working normally.

Is this because of WP has changed some js libraries?

Hi Saana, the plugin should run fine on WP 3.4.1. Try clearing your browser cache or (if you are using such a plugin) the WordPress cache. If that does not do the trick, send me a link and I’ll have a look.

Hello, I’m using this on a client’s website. When they view the PDF links on iPad, the fancybox works great but the PDFs are cropped if viewed horizontally. But if you open it when the iPad is in a vertical position, you’ll be able to see the whole PDF file loading in the lightbox/fancybox window. Is there a workaround for this? Thank you!

Hi Joy, that sounds like an iPad browser PDF plugin issue. I’m afraid I cannot help you with that (cannot afford an iPad) other than giving some alternative methods for displaying the PDFs. See http://demo.status301.net/easy-fancybox-sandbox/pdf-embeds/ in your iPad and tell me which of the three options works best 🙂

P.S. Your own site looks great, just one tip: to the right of your Bio page the texts of your contact form buttons are showing (reset/submit) because of the negative text-indent… Add overflow:hidden; to avoid this.

Wow. I didn’t think I would ever receive a reply. Okay will try those. How about disabling the plugin when on a mobile/ipad/iphone?

Will also fix the overflow on my site. It’s been there for months 😀

BTW, the PDF file that opened is also cropped on iPad from the demo.4visions.nl page 🙁

Do you know how to disable the plugin when the viewer is using iPad/iPhone? Thanks.

Hi Joy, even the Google Docs Viewer crops the PDF? That’s annoying… I’m afraid I do not have a quick solution ready to disable FancyBox for iPads. Sorry.

Simply uncheck the option “Show title” for each of the appropriate media types (Images/Inline, Flash, Youtube etc) on your Settings > Media admin page.

Leave a Reply to Chris StegnerCancel reply

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

%d bloggers like this: