Easy FancyBox for WordPress

Easy FancyBox

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

Description

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

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

GDPR / EU Privacy

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

FEATURES

Supported media and content types:

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

Also supports:

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

Additional features:

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

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

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

Get support on the WordPress forum.

Visit FancyBox for more information and examples.

PRO FEATURES

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

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

KNOWN ISSUES

See a list of known plugin and theme conflicts here

Contribute

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

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

Frequently Asked Questions

Help! It does not work…

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

What’s FancyBox?

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

Which version of FancyBox does this plugin use?

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

I installed the plugin. What now?

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

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

Where is the settings page?

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

Will a WordPress gallery be displayed in a FancyBox overlay?

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

.

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

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

Can I make a slideshow from my gallery?

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

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

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

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

Can NextGEN Gallery work with Easy FancyBox?

Yes, follow the instructions here.

Can I use ONE thumbnail to open a complete gallery?

Yes, follow the instructions here.

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

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

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

Is Easy FancyBox multi-site compatible?

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

Easy FancyBox

1164 Comments

Hi Ravan, great plugin it is perfect for my site and I love the ease of use. One question I have is how do I add an image to the right hand side of the active photo. (Just like this site has) I have been going through your code but can’t seem to find a place to drop it in. Is it in the easy-fancybox/easy-fancybox.php or somewhere else?

Many thanks 🙂

Hi Chris, I do not understand what you mean with “an image to the right hand side of the active photo” … Could you elaborate or give a link to an example?

Hi, I want to set the size for a box showing inline content. I want the same contents that are on my page to open in a box 700p wide and 100% height.

I tried on my test-blog:
http://masungo.se/wp/?page_id=106

The problem is that I can’t seem to set the size for that box, to simply add
<a class=”fancybox {width:600,height:400}” href=”#reader” >LINK TO CONTENT</a>
<div id=”reader”>
INLINE CONTENT.
</div>
doesn’t seem to work on inline content.

I saw your tip on another forum to instead set the size for the containg div (which I call reader) but the problem there is that when I set the size 700p for example that div gets to wide for the normal page (as my width in that template is only 550p).

I have found no way of setting the size for an inline fancybox, only for iframe, images and flash-content. How do I do to get it right?

See my attempt here:

http://masungo.se/wp/?page_id=50
<a class=”fancybox” href=”#reader” >READER MODE</a>
<div id=”reader” style=”width: 700px; height: 100%;”>
INLINE CONTENT
</div>

Hi Staffan, when using FancyBox to display inline content, it’s best to take the content from inside a hidden div. That way, you can give the div (with proper ID) inside it, the dimensions you want it to have in the overlay. FancyBox automatically adapts to the width and hight given to that inline content div.

When you show already visible inline content in FancyBox but with different dimensions than it has on the page itself, then after closing the overlay, the content is put back in its place on the page but it will keep the dimensions set in FancyBox. This will likely break your normal site layout…

i have one question, i want to load fancybox script only when post has images, swf etc

please see my question @support

i would like to suggest u to please give option in plugin setting .

please have a look @ this

i used this code but not work

please reply !! 🙂

Hi sangeeta, I will consider an option like that for the next release. But the problem is that some people use FancyBox not only for post content but for sidebar content too. Or for galleries either generated by WP or by another plugin like NextGEN… This will be much harder to detect so finding a one-size-fits-all solution will be difficult.

I have been using your previous version with no problem but when I updated to 1.3.4.9 it fails as follows. The grayed out background is there but no fancybox image. You can see what looks like an indication in the upper left corner when an image can not be found. I checked my browser error console and received the following jquery error:
Error: f.easing[e.animatedProperties[this.prop]] is not a function
Source File: http://www.linuxforall.net/desertscape/wp-includes/js/jquery/jquery.js?ver=1.6.1
Line: 18

It seems the problem happens when I try to use the new version on a site that is using jquery with another plugin or the theme. Like I said your old version worked under the joint jquery situation but your new version will not. I had to revert to your previous version to get my site back in order. I built a copy of the site in another directory and then updated your plugin and recreated the failure.

Hi jwsheff, it seems your theme is missing the essential (not only to my plugin but many others) WordPress footer function .

In the latest plugin update, some of the script files have moved to the footer to improve page load time but this fails when your theme is missing the obligatory footer call…

He RavanH, awesome plugin. I love the animation!

Anyway is there a way that I can set a no conflict mode or something in the JS so it doesnt conflict with any other of my ajax plugins?

Let me know, thanks!

Hi Vinh, do you mean setting jQuery to no conflict mode? That should not be necessary with Easy FancyBox because it does not use short jQuery references ($) by itself. Are you seeing a jQuery conflict with any other script?

Hi RavanH!

Thanks for a great plugin, looks good on my site and lots of helpful documentation and support here.

I’m having a problem viewing PDF’s though which is quite important for the site i’m currently working on. Both the latest versions of Safari and Firefox on Mac OSX say Missing Plugin. Firefox cannot find an extension automatically, adobe reader is installed but i never needed it to read PDFs on either browser anyway?

Do you have any ideas how to make it work?

Many Thanks

Hi Ralph, it’s outside the scope of this plugin to tell browsers what plugin they should use or force them to install one. It simply allows you to embed PDF’s in a lightbox overlay, just like you would embed them straight into your posts/pages. But there are some alternatives that might work better on these two browsers on OSX. Please have a look at my PDF testing page http://demo.status301.net/easy-fancybox-sandbox/pdf-embeds/ (allow for some load time) where you will see some links with FancyBox enabled and some straight embedded examples. Tell me which one works in OSX, if any.

To use iframe mode: Disable the PDF feature in the FancyBox settings and enable the iFrame feature. Then use class="fancybox-iframe" on any PDF links. Now these links will cause the PDFs to be loaded into an iframe (inside the lightbox) instead of with an embed code.

Hi Ravan,
On one of my sites today I all of a sudden realised that Easy Fancybox wasn’t working anymore. I first thought it had to do with WP Supercache or my CDN, but even with those disabled I couldn’t get it to work. Then I started digging a little deeper and I discovered that in the file easy-fancybox.css.php the actual css file is being called, like: include( './fancybox/jquery.fancybox-' . htmlspecialchars( $version , ENT_QUOTES) . '.css' );
However viewing that in my source created errors and a warning that that specific file (jquery.fancybox-.css) did not exist. Looking in the fancybox sub-directory the css file actually uses 1.3.4, so I have now changed that into include( dirname(__FILE__) . '/fancybox/jquery.fancybox-1.3.4.css' );
This works fine and Easy Fancybox is working again on my site now.
I am not really sure what triggered this bug as I am using your plugin also on other sites without this problem.
Cheers,
Piet

Ha Piet,

When the file easy-fancybox.css.php is called from the page header, it should be with ?ver=1.3.4 appended. This parameter in turn is used by htmlspecialchars( $version , ENT_QUOTES) to form the complete file name. So when you are saying FancyBox was not working anymore, something seems to be causing this ?ver= to be suppressed. Do you have a plugin running that does this on purpose maybe?

Allard

Hoi Allard, thanks for your response. Yes, that is exactly what is happening. I have several plugins running, hard to tell which is the one that surpresses this ?ver=.
Recently installed BetterWPSecurity and BackupBuddy, so it could be any of those two perhaps. For me (and for now) it’s ok now as I have hardcoded the version into the plugin and as you don’t do updates of the plugin on a daily basis, I’m actually quite ok with it 🙂

It’s probably BetterWPSecurity. Does it have an option to switch off this ‘var’-query-string-removal feature? If so (or not) I’d like to make a mention about it in the FAQ’s… Dank 🙂

Hoi Allard, been looking all through the options of BetterWPSecurity, but cannot find a specific option that switches off the feature. So perhaps it’s indeed a good idea to make a mention of this in your FAQ. Graag gedaan!

Vinh, Please disable Easy FancyBox on that site and tell me if the calendar works then. Leave it de-activated so I can take a second look tomorrow…

Hello Ravan, thank you for your awesome plugin!
I am using it in a site in combination with the Postie plugin (for posting by email) and this is great because all attached files like images/movies/pdf files get a thumbnail or icon and they will open flawlessly in fancybox, except…
the files that open in an iframe (like pdf), IN EXPLORER IE9, open only the first time and when loading for a second time there will be a blank iframe which can’t be closed.
I found a link leading to similar issues with Fancybox, and there seems to be a workaround, but I am not as good in .php as to know how and where to implement it… the link is http://groups.google.com/group/fancybox/browse_thread/thread/d7321b9a4df5b20b/
and the website I am working on with this is http://www.pattinaggioaltichiero.com, although for know I have no iframed links for you to show the problem..

Can you please suggest how to solve this??
Thank you so much in advance!

Henriette, the PDF problem in IE9 is not well know (yet) but has been reported before. It’s a problem with the PDF plugin in your browser so there is not much I can do about it.

There is, however, a workaround and I might be integrating it into the next release. For displaying PDF files, the current version of Easy FancyBox uses standard embed code. This does seem to generate the issue of not being able to be opened twice in IE9. If you force Easy FancyBox to display the PDF files in iFrame mode, the issue does not occur. You can do this by disabling the PDF feature in the FancyBox settings (or at least the autodetection option for PDFs) and then give each PDF link a class="fancybox-iframe" attibute.

This should work around the issue in IE9 but I'm not sure if you can automate this in Postie. Can you?

(I’m sorry, my english isn’t too good)

1st. – I can’t find out how to put my site to do PDF recognition by iFrame as you said to do it.. so how do I give each PDF link a class=”fancybox-iframe” attibute… ?? I’m very basic, sorry.

2nd – I also need to create several thumbnails (one for each) that links to several gallerys of pictures.. can you teach me step by step (baby steps)

Thanks!! 😉

Hi Rosa,

Number one: First switch off the PDF auto-detection (or even the complete PDF function) on your Settings > Media page and then go to edit your page. To add a class attribute to a link, you need to switch to the HTML view tab. I’m not sure how it is called in your language (Portuguese or Spanish?) but I would guess ‘HTML’ 😉 Then scroll through the source code you see there and find your link. It should look something like this but with other URL and anchor text:

<a href="http://url.to/your.pdf">open my PDF</a>

Now change it like this:

<a href="http://url.to/your.pdf" class="fancybox-iframe">open my PDF</a>

Number two: To show more than one gallery on a post or page, you will need to install a gallery plugin. There are some basic instructions on how to set up the well known NextGEN Gallery plugin with Easy FancyBox in the FAQ section under “Will a NextGen gallery be displayed in a FancyBox overlay ?”. Then, use NextGEN to manage your galleries and insert a thumbnail for each one as described under “Can I use ONE thumbnail to open a complete gallery ? … With NextGEN Gallery”

But if you only want one gallery per post/page, you can do without the NextGEN plugin. Contact me if you want more detailed instructions via e-mail. EDIT: Oh, I see you already did 😉

Allard

Alan, if you are using files with .jpeg extension, and you want auto-detection, you need to add that extension to the Auto-detect field under FancyBox > Images & Inline on your Settings > Media admin page. Or add class="fancybox" attribute to each link…

Hi Marcus, it’s your theme. It loads the prettyPhoto script which basically does the same as FancyBox. If there is a theme option to switch it off, please do so. Else you will have to make a choice: manually remove prettyPhoto from the theme (see functions.php) or uninstall FancyBox.

Ravan, nice implementation. I took a look at the header of one my pages after I loaded it; am I seeing things, or is it supposed to add around 30 lines of code to the header?

Hi Dave, it depends on how many features you activated on Settings > Media > FancyBox. The more features, the more javascript, the more visitor side page load time. As mentioned on that same settings page, only enable the feautres you actually need on your site to keep things lite 😉

That is indeed an option to do this by inclusion of an external js call, but that call will have to be to dynamically created content via php. This will have the same impact as putting the javascript straight into the head section of the body. With the ‘bonus’ of one extra server query… So no gain there.

Ofcource, I could device some way to add ‘expires’ headers that get reset after any changes in the config or some other way to both make changes appear instantly while still allowing browser caching to gain server time. But it will take a lot of extra development and testing time 😉

Hi there,

Thanks for getting back to me. I have solved the problem by choosing to use an iframe instead of embedding the content in a hidden div. For some reason that worked in my new theme. 🙂

Thanks again for this plugin it really helped me out on this project. 🙂

i like to change the color of the next and preview buttons.
i did so and replaced the ones at the server.
/fancybox/fancy_nav_left.png
/fancybox/fancy_nav_right.png

but nothing happens. it’s still showed with the white buttons.
how can i make easy-fancybox realize the change. i played with the settings but that won’t help.

Hi B. Rouge, it is actually the image sprite easy-fancybox/fancybox/fancybox.png that you will have to change to see the effect in modern browsers. The seperate images you changed are used only for IE6. And who still uses IE6? 😉 But they are still there for the few that do come to your site with IE6…

If you change the images or other files, please do not forget to make a backup of them. Any new update of the plugin will overwrite your changes so you can quickly replace the new image with your backup later.

Hello, I really like the plugin. The best I’ve seen. And Spotlight efect is just awesome! Thanx! I have one question to anyone who may reply @) Is is possible to add loop mode to the it? (to get from the last gallery image to the first one with the “Next” arrow button) Thank you.

[MARKED AS SPAM BY ANTISPAM BEE | Server IP]
Hi Ravan,

Great plugin, thank you for that !

I’m using it for 1 only thing on a new website: show PDF’s files. It displays the files properly but the “Download this file” button at the bottom does nothing 🙁

And I have another question too: is it possible to set the document to fill the full-width of fancybox window by default ?

Thanks a lot for your help, mate 🙂

Here is a screenshot of what’s not working: http://www.diigo.com/item/image/1q1ia/a04w

And the URL where the PDF’s are:
http://www.gite-var.com/infos-pratiques/contrats/

Hi Franck, what you are seeing there is the title that has been taken from the alt attribute of the thumbnail image. It’s not an actual (download) link. If you set the alt text to anything else, that title below the pdf will change accordingly. Basically, you can create a link as alt text like for example:

<a href='http://www.gite-var.com/Contrat-Gite-Mimosas.pdf' target='_blank'>CLIQUEZ ICI POUR TELECHARGER LE CONTRAT</a>

Note that I am using single quotes ( not ” but ‘ ) to prevent conflict with the alt attribute wrapped in double quotes. Also note that it is just a link, it is up to the visitors browser to decide what should be done with the content: display in a new tab (most likely) or download… And although this will allow the title to become an actual link, it will probably not pass strict HTML validation so if you are concerned about that, you will need to find another solution to allow your visitors to download the file instead of viewing it in a lightbox or new browser tab.

And the same goes for the width of the PDF document content. I’ve added some parameters in the URL that try to pass a zoom level of 80% but it completely depends on the browsers PDF plugin if it will adhere to that setting or not. Zoom level (or width) might also be overridden by the PDF documents internal settings that where set during creation of the file…

can i give an i-frame an independent background that differs from the one in the setting?

reason is i’d like to have a black background for showing images and a white for showing other homepages (mostly they are using no background for a white background).

best regards
tbr

Hi. I’m currently using your plug-in for a website. It’s working great!

I just want to ask if it’s possible to automatically close the lightbox once the SWF bit is done?

Thanks and I hope you can help me!

Cheers!

Hi Ava, that’s a question that has been asked before. But difficult to answer because functionality like that depends on the flash movie that’s being played. Is it a one-layered flash movie that does actually END or is it layered like a movie player that does not end itself while the movie inside it does end… If the latter, does the player have some kind of API to communicate with it to be able to detect its status. You see, it would be nearly impossible to write generic script that could cope with any possible kind of flash content.

Someone on gravity form forums recommended your plugin, it works great!
Question: What if I am using gravity forms and I want to close box on submit?

Here is a link:http://4kensingtondrive.com/buyer-tips/6-buyer-mistakes

Here is the code I have so far in the page:

[gravityform id=”1″ ajax=”true”]

Is it best to add script to top of page? it doesn’t seem to work for me, here is what I added:

jQuery(document).bind(‘gform_confirmation_loaded’, function(){
fancybox_close(); //closes the fancybox
return false;
});

I want my user to see my page but register first to access it. 1 step is preferable. Thank you for the awesome plugin and help!

Hi Josiah, if you want to add javascript, you can use a simple text widget (in the footer or as last one in the sidebar) and make sure you wrap the script in the proper tags. I also suggest some small changes but have not tested it so cannot confirm it will work:

<script type="text/javascript">
jQuery(document).bind(‘gform_confirmation_loaded’, function($){
$.fancybox.close(); //closes the fancybox
return false;
});
</script>

Also make sure to NOT check the ‘Automatically add paragraphs’ option.

You can take the code out of that META description tag in the header. It does nothing there…

Once again, thank you for your attention.

I have inserted the script in the appropriate place in the footer. agentpress has a place for it in its theme settings.

Here is what I put in the page as html:


[gravityform id="1" ajax="false"]
<a href="#fancyboxID-1" rel="nofollow"></a>

Gravity forms has a submission confirmation message with ajax that probably overrides the close command? I have ajax on false as you can see. If I can switch off the confirmation fuction in gravity forms it may solve the problem….. Thoughts?

You might be correct in your assumption here… On http://fancybox.net/blog at example #5 you can see how in theory a form could be used in FancyBox. No idea how that could be made to fit your Gravity form submission/validation. I have no experience with that plugin so I can only advise you to try and see 😉

Hi there – your plugin is so great! Is there a way to get a javascript form to open in an overlay? I am using the javascript on my site right now – it’s an AWeber sign up form.

The page I want to use it on is http://knitfreedom.com/free-patterns/worsted-weight-socks – right now I have an icon of the PDF logo and the form below it. I want people to be able to click on the PDF logo and have the form appear in an overlay.

Is there any way to do this? Thank you!

Also, is there any way to view the fancybox videos on mobile devices without being sent to YouTube after the video is finished being viewed?

Thank you!!

Hi Liat,

In theory it is possible to handle javascript request via the FancyBox API but in your case that would mean redesigning both AWeber and my plugin to work together in a meaningful way… Too much trouble, I can assure you.

However, there might be an alternative. I’m not sure if this is going to work in this particular case but there is a way to place your form on the page like normal and then hide it from normal view so it can be shown inside a FancyBox modal window.

Wrap the form (or shortcode) inside the following tags where the ID value must be unique on that page:

… form code here …

Next, create your link to pop up de form by referring to thqt ID:

… your link text or image here …

This should make the form open in FancyBox but the question remains if the javascript still works. You’ll need to test it

About the videos redirecting mobile browsers to the youtube page afterwards: I was not aware this happens. It is a Youtube thing, I guess. I’ll try to find out nore about why this happens and if there is a way to prevent it. Otherwise, you might find the Vimeo service to be a better alternative 😉

Oh, and I notice you are using prettyPhoto and Colorbox at the same time with FancyBox. These three lightbox scripts can cause issues when used together…

Hi there! Love love love your plugin! I had two questions for you.

1) I would love if there was a way to include an option to disable automatic adding of jquery – I already add jquery manually via google libraries, so it would be great to not load it twice.

2) this is a bit more complicated. I’m looking for a solution that will allow me to link to a fancybox via my thumbnail of the image (mostly for videos–youtube)–fancybox does this for me wonderfully, but it centers it in the page. I want the fancybox to load exactly where the image was (like the image thumbnail and the video have the same dimensions) – in other words, I want it to be seamless. Any chance you could help me with this? I’d be willing to donate $$.

Thanks again!

Hi Kristina,

1) Do you include the library as a hard-coded link in the themes header.php or do you use a plugin like Use Google Libraries and let WordPress handle the library inclusion? If the latter, there will be no problem with loading two libraries since my plugin conforms to the official way of including scripts… If the former, and since there is no option to exclude the jquery library, I would suggest to (a) remove the hard-coded link, (b) install Use Google Libraries and (c) activate Easy FancyBox. from then on, your site will be using the jQuery library as provided by Google plus it will be in no-conflict mode (which is safer) just like the official WP included library.

2) To give the lightbox an absolute position to match the original thumbnail will be extremely complicated. Supposing you are only using ONE link to open in FancyBox per page and each time the thumbnail is in the same place (first thing in the sidebar for example) then you might be able to pull it off by adding some CSS rules to your stylesheet. You can read more here. But as soon as you want it to work like this for several links from thumbnails that are on different places on your page, you would have to completely rip the plugin apart and maybe even rewrite a substantial part of the FancyBox script itself… The lighbox script simply is not designed to be able to do this, sorry 🙁

Hi Paul, I fear that is an issue related to displaying of PDFs on the iPad and it’s out of the scope of this plugin or FancyBox script to do anything about it. But it will be interesting to find out if the alternative for showing PDFs, iframe mode, works better on the iPad…

Could you please (1) disable PDF support and enable iFrame support in the FancyBox settings, (2) change your current PDF link(s) to use class="fancybox-iframe" and (3) fire one on the iPad and let me know if (and how) that changed anything? If you need more precise instructions/help with that, please let me know.

Thanks 🙂

Hi, this is a great plugin, but here’s my guestion:

So, I can open html page on fancybox with this link.
<a href="page1.html" rel="nofollow">First page

First page contains link to second page:
<a href="page2.html" rel="nofollow">Second page

If I make a chain of these fancybox links, like above, only first page
shows on fancybox.

How can I make a link within fancybox that opens new page in a new
fancybox?

Just make the first link open in FancyBox using the class fancybox-iframe and all following pages will remain inside that same frame. Take for example the automatic pop-up on http://demo.status301.net/easy-fancybox-sandbox/ and click the link in that text, then click other links to browse further and it will all be inside that frame… Unless one of the pages has a so-called break-out script that forces the page to be opened in the top window. In that case, there is nothing FancyBox or this plugin can do about it.

Hi Brett, there are no scrollbar options for iFrame mode in this plugin at this point. I will be looking at it for the next version…

Enable the PDF functionality on Settings > Media and give the link a class=”fancybox-pdf” attribute or enable auto-detection. You might also need to disable the download tracking for PDFs in Analytics for WordPress…

Thankyou for a great plugin!

I have successfully added it to my wordpress-blog and it works great, but only in the feed with all the posts? As soon as I click one particular posts image the overlay is there but the image is way out of the viewport? What could be wrong?

http://klaranilsson.se/munkfabriken/ <<for instance here.

Would love to get some help on this!

Hi Klara, it seems your theme is not including the usual footer.php there… or at least it is missing the obligatory wp_footer() call and the closing </body></html> tags.

Hi Ravan,

Loving this plug-in! It has saved me a massive b***-ache in a piece of webdesign, brilliant!.

I have a quick question though: I’m using this to open an iframe to some content heavy pages and there’s a bit of a wait on the load. Is there a way to add a loading gif to the frame while the content loads? I was wondering if I could manually set this as the background?

All the best,

Paul

Hi Paul, In the case of iframes, FancyBox cannot determine if the content has loaded so your idea to set the loading animation as background is not bad. I do not have a clear idea yet on how to make this work (it will take more than just some CSS) but it’s on my list 🙂

Awesome news. I look forward to it!

I have one other question as well…

It is possible to set a 0 opacity on the background of the box, without fading out the content as well? The effect I would like is to have an iframe fancybox over an image, with the bg of the iframe content set to 0.5 opacity so there is a kind of overlay effect. (I hope that makes sense)

Thanks again!

Paul

Hi Paul, actually there is a way… It will influence the border too but put (for example) rgba(254, 254, 254, 0.6) in the field “Background” under Window > Color in the FancyBox section on your Options > Media admin page.

Hope I explained that clearly enough 🙂

No problem 😉

Downside here is that this does not work on IE 8 and below. If you want that too, you’ll need to get more complicated by adding a proprietary filter like for example
rgba(254, 254, 254, 0.6); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7AFFFFFF,endColorstr=#7AFFFFFF);
where ‘7A’ stands for the transparency (in hex value format)… You’ll have to test 🙂

Leave a Reply to VinhCancel reply

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

%d bloggers like this: