Requires WordPress Version: 2.7 or higher
Compatible up to: 3.3.2
Easy FancyBox-in-a-Box for just about all media links gives you a flexible and aesthetic media lightbox solution for your website. Easy FancyBox uses the packed FancyBox jQuery extension and is WP 3+ Multi-Site compatible. After activation you can find a new section FancyBox on your Settings > Media admin page where you can manage the plugins options.
Supports:
- images (.jpg/.gif/.png and others) and image maps
- WordPress Galleries
- PDF and SWF (Flash) files
- movie sites like Youtube, Vimeo and Dailmotion
- hidden inline content
- iframes
- popup (auto-activate) on page load
See Screenshots for an impression on how images and YouTube movies will be presented on your site as soon as you have installed and (network) activated this simple plugin.
See FAQ’s for instructions to manage YouTube, Dailymotion and Vimeo movies (and similar services) and tips to make inline content display in a FancyBox overlay. Subscribe to 4Visions for tips on how to get a high degree of control over what will be shown in a FancyBox overlay on your website.
Get support on the Easy FancyBox web page or WordPress forum.
Visit FancyBox for more information, examples and the FancyBox Support Forum. Please consider a DONATION for continued development of the FancyBox project.
Recommended:
- For increased performance, simply install and activate the plugin Use Google Libraries to load jQuery from Googles CDN.
Translators
- Dutch * Author: R.A. van Hagen, for version 1.3.4.9
- Polish * Author: Kamil Szymański, for version: 1.3.4.9
- Romanian * Author: Web Geek Sciense (version 1.3.4.9)
- Spanish * Author: David Pérez, for version: 1.3.4.9
Installation Instructions
WordPress
Quick installation: Install now !
… OR …
Search for “easy fancybox” and install with that slick Plugins > Add New back-end page.
… OR …
Follow these steps:
-
Download archive.
-
Upload the zip file via the Plugins > Add New > Upload page … OR … unpack and upload with your favourite FTP client to the /plugins/ folder.
-
Activate the plugin on the Plug-ins page.
Done! By default, any images that are linked to directly (not to a WordPress page) from within your posts and pages, should now be opening in a FancyBox overlay 
Not happy with the default settings? Check out the new options under Settings > Media.
WordPress MU / WordPress 3+ in Multi Site mode
Same as above but do a Network Activate to activate FancyBox image overlays on each site on your network. No database tables are created or manipulated and no activation hook needs to be run for it to function with default settings. The plugin can also work from the /mu-plugins/ folder where it runs quietly in the background without bothering any blog owner with new options pages or the need for special knowledge about FancyBox. Just upload the complete package content to /mu-plugins/ and move the file fancybox.php from the new /mu-plugins/easy-fancybox/ to /mu-plugins/.
Frequently Asked Questions
BASIC
What’s FancyBox?
Basically, it is a fancy way of presenting images, movies, portable documents and inline content on your website. For example, if you have scaled-down images in your posts which are linked to the original large version, instead of opening them on a blank page, FancyBox opens those in a smooth overlay. Visit FancyBox for more information and examples.
Which version of FancyBox does this plugin use?
The same version as this plugin has. I aim to keep close pace to FancyBox upgrades and always move to the latest and greates version. Please, let me know if I’m lagging behind and missed an upgrade!
Where is the settings page?
There is no new settings page but there are a few options you can change. You will find a new FancyBox section on Settings > Media. To see the default, check out the example under Screenshots …
Help! It does not work…
Please follow the trouble shooting steps on Other Notes to determine the cause. If that fails, ask for support on the Easy FancyBox WordPress forum or go to the development site
ADVANCED
Will a WordPress generated gallery be displayed in a FancyBox overlay?
Yes, but only if you used the option Link thumbnails to: Image File when inserting the gallery! The gallery quicktag/shortcode should look something like [gallery link="file"].
Can I make a slideshow from my gallery?
Yes. There is an Advanced option called “Gallery Auto-rotation” for that.
Can I exclude images or other links from auto-attribution?
Yes. All links with class nofancybox that would normally get auto-enabled, will be excluded from opening in a FancyBox overlay.
<a href="url/to/fullimg.jpg" class="nofancybox"><img src="url/to/thumbnail.jpg" /></a>Will a NextGen gallery be displayed in a FancyBox overlay ?
It can be. Switch OFF the FancyBox Auto-gallery feature, then set the NextGen option “JavaScript Thumbnail effect” to “Custom” and fill the code line field with
class="fancybox" rel="%GALLERY_NAME%"Can I use ONE thumbnail to open a complete gallery ?
It can be done manually (using the internal WordPress gallery feature, or not) or in combination with NextGen Gallery.
Manual
A. Open your post for editing in HTML mode and insert the first image thumbnail in your post content (linking to the images file, not page) to serve as the gallery thumbnail.
B. Place the following code to start a hidden div containing all the other images that should only be visible in FancyBox:
<div class="fancybox-hidden">C. Right after that starting on a new line, insert all other images you want to show in your gallery. You can even use the WordPress internal gallery feature with the shortcode [gallery link="file"]. NOTE: if the gallery thumbnail is attached to the post, it will be show a second time when flipping through the gallery in FancyBox. If you do not want that, use an image that is not attached to the post as gallery thumbail.
D. Close the hidden div with the following code on a new line:
</div>With NextGEN Gallery
You can choose between two shortcodes to show a gallery that (1) limits images per gallery using the shortcode [nggallery id=x] or (2) per tag name (accross galleries; you need to set tag name manually => more work but more control) using the shortcode [nggtags gallery=YourTagName,AnotherTagName].
General steps:
A. Place the shortcode of your choice in your page/post content.
B. Configure NextGen on Gallery > Options > Gallery settings to at least have the following options set like this:
- Number of images per page: 1
- Integrate slideshow: unchecked (optional but advised: use auto-rotation in the FancyBox settings instead)
- Show first: Thumbnails
- Show ImageBrowser: unchecked
- Add hidden images: checked
C. Optional: install Custom CSS and add a new CSS rule to hide the page browsing links below the gallery thumbnail:
.ngg-navigation {
display:none;
}Can I display web pages or HTML files in a FancyBox overlay?
Yes. Place a link with either class="fancybox-iframe" or class="fancybox iframe" (notice the space instead of the hyphen) to any web page or .htm(l) file in your content.
NOTE: The difference between these two classes (‘-’ or space) is in size of the overlay window. Try it out and use the one that works best for you
Can I show PDF files in a FancyBox overlay?
Yes. Just place a link with the URL ending in .pdf to your Portable Document file in the page content.
If you do’nt have Auto-detect checked under PDF on Settings > Media admin page, you will need to add class="fancybox-pdf" (to force pdf content recognition) to the link to enable FancyBox for it.
Can I play SWF files in a FancyBox overlay?
Yes. Just place a link with the URL ending in .swf to your Flash file in the page content.
If you do’nt have Auto-detect checked under SWF on Settings > Media admin page, you will need to add either class="fancybox" or class="fancybox-swf" (to force swf content recognition) to the link to enable FancyBox for it.
How do I show content with different sizes?
FancyBox tries to detect the size of the conten automatically but if it can not find a size, it will default to the settings for that particular content type as set on the Settings > Media page. You can manually override this by defining the width and height wrapped in curly brases in the class attribute of the link itself. For example, a Flash movie with different size:
<a class="fancybox-swf {width:1024,height:675}" href="link-to-your-swf"></a>Can I play YouTube, Dailymotion and Vimeo movies in a FancyBox overlay?
Yes. Just let the plugin auto-detect and auto-enable it for you!
Place the Share URL (the full Page URL, the Short URL or even with the HD option) to the YouTube/Vimeo/Dailymotion page in your content. If you have disabled Auto-detection, give the link a class attribute like class="fancybox-youtube" for Youtube, class="fancybox-vimeo" for Vimeo and class="fancybox-dailymotion" for Dailymotion, to manually enable FancyBox for it.
Both YouTube and Vimeo movies can be made to play immediately after opening by adding the paramer autoplay=1 to the URL. For example, a short-url YouTube link that should play in HD mode, have the full screen button and auto-start on open, would look like:
<a href="http://youtu.be/N_tONWXYviM?hd=1&fs=1&autoplay=1">text or thumbnail</a>I want that ‘Show in full-screen’ button on my YouTube movies
Append &fs=1 to your YouTube share URL.
The flash movie in the overlay shows BELOW some other flash content that is on the same page!
Make sure the OTHER flash content as a wmode set, preferably to ‘opaque’ or else ‘transparent’ but not ‘window’ or missing. For example, if your embedded object looks something like:
<object type="application/x-shockwave-flash" width="200" height="300" data="...url...">
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="movie" value="...url..." />
</object>just add <param name="wmode" value="opaque" /> among the other parameters. Or if you are using an embed like:
<object width="640" height="385">
<param name="movie" value="...url..."></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="...url..." type="application/x-shockwave-flash" width="640" height="385" allowscriptaccess="always" allowfullscreen="true" wmode="window"></embed>
</object>just change that wmode="window" to wmode="opaque" or add the tag if it is missing.
Can I display INLINE content in a FancyBox overlay ?
Yes. Wrap the inline content in
<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" style="width:460px;height:380px;">
...inline content here...
</div></div>Then place a FancyBox link anywhere else in the post/page content to the inline content. Something like
<a href="#fancyboxID-1" class="fancybox">Read my inline content</a>NOTE: The wrapping divs ID must be unique and it must correspond with the links HREF with a # in front of it. When using the above example for more FancyBox inline content (hidden div + opening link) combinations on one page, give the second one the ID fancyboxID-2 and so on…
Can I make an image or hidden content to pop up in FancyBox on page load?
Yes. A link that has the ID fancybox-auto (Note: there can be only ONE link like that on a page!) will be triggered automatically on page load.
Use the instructions above for inline content but this time give the link also id="fancybox-auto" (leave the class too) and remove the anchor text to hide it. Now the hidden div content will pop up automatically when a visitor opens the page.
Same can be done with an image, flash movie, PDF or iframe link! But please remember there can be only one item using the ID fancybox-auto per page…
Can I make a menu item open in a FancyBox overlay ?
Yes. But it depends on you theme what you need to do to make it work. If you are on WordPress 3+ and your theme supports the new internal Custom Menu feature or if you are using a custom menu in a sidebar widget, it’s easy:
- Go to Settings > Media and enable FancyBox iFrame support.
- Go to Appearance > Menus and open the little tab “Screen Options” in the top-right corner.
- Enable the option “CSS Classes” under Advanced menu proterties.
- Now give the menu item you want to open in a FancyBox iframe the class
fancybox-iframe.
If you are on an older version of WordPress or if you cannot use WP’s Menus, you will need to do some heavy theme hacking to get it to work. Basically, what you need to achieve is that the menu item you want opened in a lightbox overlay, should get a class=”fancybox-iframe” tag.
Is Easy FancyBox multi-site compatible?
Yes. Designed to work with Network Activate and does not require manual activation on each site in your network. You can even install it in mu-plugins: upload the complete /easy-fancybox/ directory to /wp-content/mu-plugins/ and move the file easy-fancybox.php one dir up.
Changelog
Really? Ok then… Read the full Easy FancyBox changelog
Download
Latest version: Download Easy FancyBox 1.3.4.9 [zip]
Downloaded 102865 times.
Nederlands
English
Français
470 Comments
Hi,
I’am trying to use your plugin to show our YouTube chennel, using this code:
Visita el canal de video en YouTube de la UN
(The channel is accesibe..
http://www.youtube.com/user/UnidadNeurocirugia?feature=mhee#p/u)
But nothing is showed
The post URL is:
http://www.neurorgs.net/noticias/canal-en-youtube-de-la-unidad-de-neurocirugia
Thanks a lot¡¡
Thanks a lot¡¡
Hi Jesus, if you want to open a Youtube User Page (different than a movie page) in FancyBox, then
you need to use the class “fancybox-iframe” for that linkyou’re out of luck: Apparently, a user channel is not allowed in a frame.If you want to open just that one movie in FancyBox, then use the Share URL to that movie (different than the user page)… In your case that would be http://youtu.be/GGpq-q1RUp4
Thanks Ravan,
The youtube movies in fancybox works properly (i’ve been used yet..).
Dommage…
Thanks a lot
Jesús
Hi Ravanh
Following my youtube channel, I ve tried to link directly (without fancybox) and it shows me the popup window of fancybox…
To see this…check
http://www.neurorgs.net/noticias/canal-youtube-de-la-unidad-de-neurocirugia
The youtube image link to this:
“http://www.youtube.com/user/UnidadNeurocirugia?feature=mhee#p/u”
and I put a simple link to the same address…
Both open a fancybox popup …
This is normal?
thanks
Jesus
Hi Jesus, this happens because the Auto-detect feature for Youtube links is active. The plugin recognises the youtube url and tries to open the link in a lightbox overlay.
You need to switch off the Auto-detect option in the Youtube section to prevent this. You can leave the Short-url auto detection switched on of you need it. That will not influence the channel links…
Thanks Ravan
Any plans to include an onClosed setting available?
Hi Jason, what would you like to do on ‘onClosed’? Would you like to be able to insert in some custom javascript at that point?
This looks like this could work wonderfully for my page. If you go to it (linked in my name), and open one of the pictures, you’ll see that the issue arises when you try to go to other images and when you try to close it.
If you go to another image it changes the current image’s dimensions to the new image’s dimensions without changing the image. Then when you go to close it (by ESC or by the X) it makes the image taller and taller each time you try to close it… and never closes.
Any ideas how to fix this?
Hi Jayson, this is a typical problem that arises when the jQuery library gets loaded twice.
In your case, it happens on the line
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>in your MailChimp subscription form widget. Remove that line and it should all work well.Awesome. Thanks!
Genius plugin!
I’m really pleased that I didn’t just opt for a lightbox or highslide. I’ve used it on NextGen galleries and also an everpresent link to a How to find the store. At the moment I am linking out to an HTML page for the content with nofollow, but is there a way that I could link to inline content?
Thanks.
Hi Nathan, sure you can show inline content with Easy FancyBox. See “Can I display INLINE content in a FancyBox overlay ?” near the end of the FAQ’s on this page or on http://wordpress.org/extend/plugins/easy-fancybox/faq/
Hi Ravan,
I’m planning to install wp-super-cache plugin in my site (neurorgs.net)
I would like to know if there are any conflict or problem regarding this wp-super-cache plugin and your plugin??
Thanks a lot
Jesus Ortega
neurorgs.net
Hi Jesus, WP Super Cache and Easy FancyBox work just fine together
Hello,
Can you please tell me how to make the black – caption line,underneath FancyBox images smaller width wise?
I have sucesffully installed FancyBox and it works well; however the caption line is way too long. How do I shorten the width?
Is there a way to keep the original size of the image? Once it’s open is it possible to have it clickable for instance so that it displays in its original (much larger) size?
Hi hz, in the current version of this plugin, FancyBox auto-scales images to fit in the browser viewport. I will take the possibility to show the image full size without rescaling as a feature request for the next version (under heavy development) but in the mean time, you could achieve something like it by inserting your images in an alternative way. Insteda of just creating a link (with or without thumbnail) to the image file, create a link to inline content. This allows for greater control of what is seen in the FancyBox window:
<a href="#uniqueInlineID" class="fancybox">...link text or thumbnail image here...</a><div class="fancybox-hidden">
<div id="uniqueInlineID" style="width: 600px; height:800px;">
<img src="h ttp://link.to/full_image.jpg" width="600" height="800" />
</div>
</div>
But be aware that visitors with small screens will run into problems when the image div is wider than the screen… Alternatively, you could put a medium sizes image in the hidden inline div and wrap it in a link to the full image but be sure to give that link
class="nofancybox"to prevent it form opening in another FancyBox overlay.[MARKED AS SPAM BY ANTISPAM BEE | Server IP]
For many months now I’ve been using this plugin to allow my readers to view full-screen galleries of photos and YouTube videos. It was the perfect solution because it would allow readers to scroll through photos and YouTube videos without having to relaunch the overlay window. For the YouTube videos, I’d use code like this:
[youtube_video]91iIckLgqEo[/youtube_video]This allowed the YouTube video to be embedded on the page as well as appear in the page’s gallery as someone scrolled through the media using the overlay’s navigation arrows.
However, with the plugin update that was just posted, the navigation arrows no longer appear over YouTube videos. Is there a way this feature can be added back. It was awesome to be able to rel=”gallery” my YouTube videos and have them flow in sequence with the images on a page’s gallery.
Does this make sense? What do you think?
Hi Dan, I responded by e-mail too but this might interest others too so:
Hope that helps
I seem to have compatibility issues with uBillboard. Any know fixes for this?
Tony, I have no knowledge of uBillboard. What’s the incompatibility exactly? What does or does not happen? Maybe if you have a link for me to a live example running both plugins, I can say more about it…
If I activate uBillboard and the Easy Fancy Box simultanously I get the following error message where uBillboard is displayed “960 320 100 50 true false false true” but the Easy Fancy Box seems to work fine.
I only need it to be compatible with the uBillboard on the homepage. Is there a solution for this?
Testing url: http://bhrmedia.com/clients/Augen/test/
Terrific support mate.
Hi Tony, yes I see it… I’m not familiar with uBillboard but I’ll send you an e-mail to do some more testing. Maybe we can learn something here
Hi there, I seem to be having a problem getting fancybox to work. It looks fantastic, and I would love to get this to work for my landing page.
I’ve included a link straight from your example document below my gallery, and added a hidden inline div when you click on the camera icon. I can’t get either to work. Any ideas?
Hi Christopher, you’re not using my plugin…
I’m using Easy FancyBox on a site and it’s working well, so thanks for the excellent plugin!
I have one question. I’m seeing tons of hits in my server log for /wp-content/plugins/easy-fancybox/easy-fancybox.css.php. Would this be normal in the operation of the plugin or am I dealing with a bug or bad guys probing for vulnerabilities?
Hi Doug, the requests for easy-fancybox.css.php happen on each normal page request while the response will never be ‘not-modified so no need to serve it again’ … so that can result in relatively high numbers. But if you have the impression that number is higher than the total of normal page requests, you might want to look further.
Normal requests should have ?ver=1.3.4 appended, but nothing else. If you notice other GET or POST variables, it might indicate hacking attempts. In that case, I’ll be very interested in seeing them.
You can copy/paste me a small snippet/excerpt with some of these requests form the access log via the form on the contact page if you want me to take a look.
It looks like they are mostly all the normal requests you described. I do see an occasional hit for something like:
/wp-content/plugins/easy-fancybox/fancybox/\'+d.href+\'But that could just be an occasional glitch at the js level. I haven’t seen very many of them and I think they were all IE 6.
Oh, some extra info: the next version (currently in development) will have better response management for the css.php file. Normal response should be ‘not-modified’ unless the browser has nothing in cache or the plugin was updated… It will improve page load speed and reduce server activity. The access log shoot benefit too
Hi Ravan,
I’ve found a bug on your plug-in
with this kind of URL http://www.youtube.com/watch?v=0C_DQxpX-Kw
your code doesn’t recognize the “_” and the “-” char …and return a not functioning URL like this
http://www.youtube.com/embed/0C?version=3&_DQxpX-Kw&feature=related
This is the modified code
...
'default' => 'function(selectedArray, selectedIndex, selectedOpts) { selectedOpts.href = selectedArray[selectedIndex].href.replace(new RegExp(\'youtu.be\', \'i\'), \'www.youtube.com/embed\').replace(new RegExp(\'watch\\\?v=([a-z0-9\_\-]+)(&|\\\?)?(.*)\', \'i\'), \'embed/$1?version=3&$3\') }'
)
...
Luca
Hi Luca, thanks for reporting. The bug is known and is dealt with in the development version.
Meanwhile, for those that can not wait nor want to mess with code, the solution is to use the Youtube Short URL…
I am having a hell of a time tracking down what the problem is with this. I read through all your help on the various sites and can’t quite seem to put my finger on it. If you don’t mind, could you take a quick peak and let me know what you see as to what the problem is. The template I am using might be part of the problem. I looked for dead tags too, just couldn’t seem to find it.
Here is a direct link to where I am having a problem.
http://www.theexpeditionaryengineer.com/2011/08/06/connecting-to-an-enterprise-spatial-database-server/
I successfully used your plugin on this site:
http://tours.howleronline.com/our-services/leisure-travel/cac-tours/
When I compared the two, just couldn’t quite seem to understand what made 1 work and the other not.
Thanks for the help.
Hi John, it’s definitely the theme. It seems to have a link to its own jquery library hard-coded in header.php (instead of including it as a dependency for other scripts with wp_enqueue_script as it’s supposed to) and it also seems to be missing a wp-footer() call in footer.php… You might want to consider contacting the theme devs or switching to another theme.
Thanks RavanH. I didn’t notice those problems before. I’ll work on them over the next few days and see what I get corrected and up and running.
Hi,
this is really a great plugin ! Everything is working great with NextGen gallery
I try to have my one title including “alt” and “title” but can’t !
I try to add something like that :
‘titleFormat’: function(title, currentArray, currentIndex,
currentOpts) {
var output = ”;
var alt = currentOpts.orig.attr(‘alt’);
var title = currentOpts.orig.attr(‘title’);
var longdesc = currentOpts.orig.attr(‘longdesc’);
if (alt) { output = ” + alt + ”; }
if (title) { output += ” + title + ”; }
if (longdesc) { output += ” + longdesc + ”; }
return output;
}
I have read this somewhere but can’t manage it for my own site
any help ?
thanks for all
Salut Arnaud,
I’m not clear on what you’re trying to say here. Are you talking about http://www.concertsenboite.fr/2011/07/09/the-two-2/ for example? There you have the first thumbnail code:
<a href="http://www.concertsenboite.fr/wp-content/gallery/the-two-pavillon-de-grignan-istres-09-07-11/The Two - Pavillon de Grignan - Istres -09-07-11 10.jpg" title="The Two - Pavillon de Grignan - Istres -09-07-11" class="fancybox" rel="set_161" >
<img title="The Two - Pavillon de Grignan - Istres -09-07-11" alt="The Two - Pavillon de Grignan - Istres -09-07-11" src="http://www.concertsenboite.fr/wp-content/gallery/the-two-pavillon-de-grignan-istres-09-07-11/thumbs/thumbs_The Two - Pavillon de Grignan - Istres -09-07-11 10.jpg" width="98" height="75" />
</a>
with both the link title and img alt attributes set to “The Two – Pavillon de Grignan – Istres -09-07-11″. When clicked, it shows the large image in FancyBox with the expected title “The Two – Pavillon de Grignan – Istres -09-07-11″ …
Is that not what you want?
Hi Ravanh,
Thanks fir your quick answer.
At this time, “title” and “alt” are the same cause I’m at the test stage. : “alt” will be different when everything will work.
When I click on a thumbnail I would love having :
first the big image with fancy box effect – it works : GREAT
the title outside the picture – it works : GREAT
above the title : the “alt” area (it would even been perfect if it can be on mouseover on the picture but it seems difficult according to various reading)
If you can help me it will be really great. it seems I have to make my code with
‘titleFormat’ and a few CSS but I can’t understand how to use them
Arnaud
Sounds like you are looking for a very customized behaviour from FancyBox. You might be able to get it to work with my plugin (see suggestions below) but if you want complete control over what/where/when/how FancyBox will do on your site, you will probably be better off integrating the raw script files in your theme. For downloading them, go to http://fancybox.net and study the examples given there. For more help on using and customizing the raw FancyBox script, go to http://groups.google.com/group/fancybox (I’ll be there too but JFK is the most active and helpful member).
If you prefer to keep using FancyBox via my (or another) plugin, then you might be able to get close to what you want with the following output (don’t know if you can achieve this with NextGEN) as an example.
<a href="..." class="fancybox"><img src="...thumbnail_url..." title="YOUR MOUSE HOVER OVER THUMBNAIL TITLE" alt="YOUR TITLE SAME AS FROM TITLE ATTIBUTE<br />YOUR LONG DESCRIPTION TITLE" /></a>Note: the titleFromAlt needs to be set to true in FancyBox and NO title attribute on the link. There is no need for auto-detection of images (saves some processor time on each page load) and you can use html tags like
<br />to create new lines or other markup in the titles…Alternatively, you might take a completely different route: include the full images inline, wrapped in a div with id=”fancybox-hidden” and call them via the inline method. That way, you can have your hover title on the full images opened in FancyBox… Here is an example:
<a href="#unique_id_1"><img src="...thumbnail1_url..." title="YOUR MOUSE HOVER OVER THUMBNAIL TITLE" alt="YOUR TITLE AS YOU WANT IT BELOW THE IMAGE" /></a><a href="#unique_id_2"><img src="...thumbnail2_url..." title="YOUR MOUSE HOVER OVER THUMBNAIL TITLE" alt="YOUR TITLE AS YOU WANT IT BELOW THE IMAGE" /></a>
<div class="fancybox-hidden">
<div id="unique_id_1"><img src="...full_image1_url..." title="YOUR LONG DESCRIPTION TITLE ON HOVER OVER LARGE IMAGE" /></div>
<div id="unique_id_2"><img src="...full_image2_url..." title="YOUR LONG DESCRIPTION TITLE ON HOVER OVER LARGE IMAGE" /></div>
</div>
Hope you get the basic idea… Downsides: it’s a lot of work per post and all full images get loaded on each page load even if they are not opened.
I want to change the fancybox-iframe width and height for a specific page i’m loading and the
<a href="xxxx" rel="nofollow"></a>doesn’t work. I know i can change it to whatever i want to in the settings, but i need to have separate dimensions on separate iframes.Help please? Thank you.
Hi Rubens, you’re in luck. The latest version now includes the (still undocumented) metadata.js extension which means you can set up custom parameters like this:
<a href="..." rel="nofollow" class="fancybox-iframe{width:200,height:300}">...</a>…
this does not work bro… i tried it. I already have the jquery.metadata.js extension. Should i wait for the metadata.js extension or what do you mean ? … Thanks for answering so fast.
Looking at your pages source code, the first thing you need to do is get rid of that second time the main jQuery library gets loaded. It’s in your themes footer and loads the jQuery library that is included in your theme package. It’s a ‘bad’ theme in the sense that it does not respect the proper wp_enqueue_script() method for inclusion of scripts. For the rest, I think, I’m not understanding you clearly. Do you have a URL to a page where you are trying to implement this iframe link? It might help if we are both talking about the same thing…
the page is http://hand-craft.ro/our_story… and down at the bottom i have a link “(Targoviste Branch)”. I used the fancybox-iframe class and I wanted to get the dimensions of the page i’m linking to with the {width and height} but didn’t manage to. So i changed the iframe sizes in Settings>Media. How can i get {width and height} to work so i don’t have to change the sizes in Settings>Media?
You really need to get rid of that second jquery library in the theme footer. Without it, the jquery.metadata.js should work just fine. If you need help with that, you can hire me
yeah… it works by removing the theme’s jquery in footer but as a result, my theme’s slider in articles doesn’t work anymore and i’m stuck with no sliders. Find a way to edit your metadata.js so that it’ll work
… i know you can !! 
) you must !
I can assure you, there is nothing wrong with the jquery.metadata.js included in the plugin. It’s the latest official version. Your theme uses the older jQuery library 1.4.2 but WordPress includes jQuery version 1.6.1 so maybe the slider script should be updated? What slider are you actually talking about? As far as I can tell, the one on your front page works just fine with jQuery 1.6.1 …
The slider in posts(ex: hand-craft.ro/2011/08/card-11/) will stop working and will remain as a single image if i remove the jquery you suggested. How can i update the slider’s jquery library ?
Hi Rubens, apparently the Nivo Slider does not work with the latest version of the jQuery library that is included with WordPress. A quick solution can be to replace the /wp-includes/js/jquery/jquery.js file with the one from your theme /wp-content/themes/genova/js/jquery.js … FancyBox should be able to work with that older version too.
Remember that after you do a WP core upgrade, you will have to do this again.
I changed the wordpress jquery with the theme’s jquery and it still doesn’t work. The custom width;height for fancybox only works when i remove the jquery.js script from the footer, but it still freezes the nivo slider in each post after that. I don’t know what to do…
Sorry, I’m not being clear enough I think… http://hand-craft.ro/wp-includes/js/jquery/jquery.js and http://hand-craft.ro/wp-content/themes/genova/js/jquery.js are still different versions.
Via FTP, You need to delete /wp-includes/js/jquery/jquery.js and then move the one from /wp-content/themes/genova/js/jquery.js to /wp-includes/js/jquery/. Then open your themes footer.php and remove the line that has something like this:
<script type="text/javascript" src="'<?php ... ?>'/js/jquery.js"></script>That way, you’ll be only using ONE instance of the (older) jQuery library.
Alternatively, you might consider upgrading the Nivo Slider script in your theme. You can get a much newer version on http://nivo.dev7studios.com/
I tried that… and i tried other things too that’s why when you just looked at it now you saw something else. Look at it NOW, i did everything you said. I moved the theme’s jquery into /wp-includes/js/jquery/ , i deleted the theme’s jquery (themes/genova/js/jquery.js), i deleted the jquery script line from footer.php… and the nivo slider is frozen.
maybe i should try getting the newer nivo slider… i was just looking into that…
Looking at http:http://hand-craft.ro/wp-includes/js/jquery/jquery.js now, the slider works fine… Maybe you need to refresh the page bypassing your browser cache?
wow…hahaah… it was the cache
). Thank you so much, bro! You’re awesome! Thanks for answering my messages so soon! All the best to you!
Hi,
Easy Fancybox currently doesn’t work with the plugin Better wordpress Minify. I have added jquery.fancybox to the “Scripts to be minified and then printed separately” section. It makes the image load as a file instead of go to the bottom of the page. Can you please tell me what to add as an exception?
Example: http://www.putdispenserhere.com/ipv6-tunnel-setup-guide/
Many thanks
Hi Bob, as described in the Other Notes section (under Known Issues) you need to exclude all files from this plugin. They are already packed and apparently minifying that, will cause problems. So do not minify:
/wp-content/plugins/easy-fancybox/easy-fancybox.css.php
/wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.4.pack.js
/wp-content/plugins/easy-fancybox/fancybox/jquery.easing-1.3.pack.js
/wp-content/plugins/easy-fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js
/wp-content/plugins/easy-fancybox/jquery.metadata.pack.js
Hi RavanH,
The new version of the plugin adds compatibility now. I was referring to this plugin: http://wordpress.org/extend/plugins/bwp-minify/
I wasn’t referring to WordPress Minify
Thanks,
Bob
Hi,
I’m using Easy Fancybox throughout a site I’m building and it works excellent in all occasions except one. I’ve added the class=”fancybox-iframe” to an <a> that’s being generated by the jQuery T-Coundown plugin and when clicked that link will not open in an iframe. Any idea?
Site URL: http://www.qnacreatives.com/floodNew
The link I’m referring to is the “Watch Now” button in the top right corner of the page. Thanks!
Hi Ernie, that’s because that link is created by
jQuery(document).ready()so it’s done after the jQuery FancyBox routine is called. Hence there is no FancyBox attached to that link. If you can, remove thejQuery(document).ready()wrapper like so:BEFORE:
<script language="javascript" type="text/javascript">jQuery(document).ready(function() {
jQuery('#countdowntimer-4-dashboard').countDown({
... [snipped] ...
});
});
</script>
AFTER:
<script language="javascript" type="text/javascript">jQuery('#countdowntimer-4-dashboard').countDown({
... [snipped] ...
});
</script>
(basically just remove the first and the last line)
RAVAN!!! I can’t thank you enough, that worked great. Thanks again for your awesome plug-in and thanks for your time.
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
< ?php wp_footer(); ?>.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…
Hi RavanH,
You are right on, I added the function call and it works perfectly. Funny thing I had the same problem with 2 different themes.
Thanks you very much!!
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?
I’m actually not sure if its conflicting or not but when I have fancybox enabled, my Ajax Calendar of Events (http://wordpress.org/extend/plugins/ajax-event-calendar/)
pop up modal window does not work. So I’m not sure what the problem is. Any idea of what i can do?
Do you have a link to a calendar page where I can see the issue live?
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.4visions.nl/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!
Here is what it’s supposed to look like with the calendar modal open.
http://s.wordpress.org/extend/plugins/ajax-event-calendar/screenshot-13.png
and here is a test blog post I setup to replicate my site in progress
http://edentest.vinhdesigns.com/2011/08/27/sdfsafd/
(fancybox works fine, but when you click on the event side bar button (blue) it does not pop up in an ajax modal.
Let me know what you find out, thanks.
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
Do .JPEG (not .jpg) files no longer work with Easy Fancybox v1.3.4.9?
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…Thanks for this plugin. I’m having a problem working out why it opens the image in 2 modes. i.e. 2 instances of the image open rather than just 1. Example here – http://ma.rcus.co.uk/2011/09/11/we-should-be-on-the-internet/. Is there a setting that would stop this double-open event happening?
Many thanks
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.
Many thanks. I found where to remove prettyphoto in header.php. All working now.
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
Okay, sounds reasonable. I’m not a coder, but wouldn’t it be better to load an external JS file?
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
So the work outweighs the benefits, which would be negligible at best. Thanks for the lesson!
Ah sorry I’m clearly not able to make code work! Can you please delete these comments? I could really use some support though my email is [hidden for privacy, admin] perhaps I could send you the code on email. Thank you so much. My page in question is at: http://northerncomputer.ca/services/managed-hosted-solutions/digital-signage/how-digital-signage-works/
Hi Drew, I’m seeing a maintenance page on that URL… Shall I wait for the site to come back from maintenance mode or do I need a login to see the page? You can contact me via http://4visions.nl/en/contact/ if you want.
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.
thank you!
thank you!
this plugin rocks
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.
Hi Dan, loop mode is not available in the plugin yet. It is planned for the next release.
[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…
Thank you very much Ravan
The support is outstanding !
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…
sorry, the comment form did not allow me to enter code accurately, but you had the link.
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:
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
I am not able to scroll on an ipad view viewing a pdf.
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 pageFirst page contains link to second page:
<a href="page2.html" rel="nofollow">Second pageIf 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?
Hi JJ,
I do not think that is possible. You can load a new page in the same fancybox, but not a fancybox within a fancybox… Or maybe you’d better ask on the main FancyBox forum: http://groups.google.com/group/fancybox/
Thanks RavanH,
So, How I can load new page in same fancybox?, that would be the solution that I was looking for.
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.4visions.nl/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 – is there a way to specify scrollbars for the iframe option?
Im looking specifically to set
Everything else worked great.
Thanks.
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…
I am facing trouble in showing the pdf in the fancy box. its appearing very weired. When i click the pdf it pop ups with special characters. i am unable to solve it
http://enchantedcollar.com/teaching-worksheets/finance/
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.
Wow! Thanks a lot, now it works!
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
Can’t reply to your reply to my reply so I’m replying here :-p
Great advice on the transparency, thank you again!
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