Requires WordPress Version: 2.7 or higher
Compatible up to: 3.2.1
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
- 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 3+ in Multi Site mode
Same as above but do a Network Activate to activate FancyBox image overlays on each site on your network.
WordPress MU
The plugin works best from the /mu-plugins/ folder where it runs quietly in the background without bothering any blog owner with new options 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 blanc 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 …
TROUBLE SHOOTING
Help! It does not work…
If, after activation, your images do not open in a FancyBox overlay, there are several possible reasons. Some are easily solved, others are more difficult. Follow these basic checks to make sure everything is in place:
- Make sure that thumbnail images are linked directly to their larger counterpart, not to a dynamic WordPress page that includes the larger image. This means when you insert an image in your posts or pages, you need to select
File URLat the Link option instead ofPage URL. You’ll have to manually edit your old posts if you have always inserted images withPage URLbefore, FancyBox cannot do this for you. - Make sure you have all the needed media and their Auto-detect options activated on your Settings > Media admin page. If you are using images in other formats that JPG, GIF or PNG, you need to add the extensions to the Auto-detect field for Images. Please note: The image file names must actaully end with that extension! This means that if you have an image file that (for example) has no extension (does not end with .jpg or any other) even if is in JPEG compressed format, the FancyBox will not be able to detect is as an image. You will need to manually give those links the class
fancyboxto trigger FancyBox. - Make sure your theme is capable of placing the needed javascript and css in the page header. Open any page on your site and view the source code by right-clicking on an empty section and selecting ‘View source…’ (or similar) to see the page source. There you will need to check of there are any references to javascript files like
jquery.fancybox-x.x.x.pack.js?ver=x.x.xin the<head>section. There should also be aeasy-fancybox.css.php?ver=x.x.xand some javascript that starts with<!-- Easy FancyBox 1.3.4.9 using FancyBox 1.3.4 - RavanH (http://4visions.nl/en/wordpress-plugins/easy-fancybox/) -->… If it’s not there, your theme is really out of date. Consider switching to a new theme fast! - Check if your theme wraps post/page content in a div with class
hentry. If it doesn’t, you might need to edit the optionSection(s)on Settings > Media to reflect the class (or ID) name of the div that holds post/page content.
If you still do not get to see your images in FancyBox, ask 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 any gallery overlay scripts in NextGen and either use the FancyBox Auto-detect feature (turned ON by default for jpg, gif and png files) or 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: add a new CSS rule to your theme stylesheet 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. These are actually a special case of SWF files. The URL for these movies do not end in .swf so the FancyBox script will not be able to auto-detect the Flash content. This can be forced with class="fancybox-youtube", class="fancybox-swf" or alternatively class="fancybox-iframe". The difference between the three is mainly in size of the overlay window. Just choose the one that works best for you or… Just let the plugin auto-detect and auto-enable it for you!
For YouTube, place the Share URL (the plain Page URL, the Short URL or even with the HD option) to the YouTube page in your content. Add &fs=1 to the URL so show the ‘Full screen’ button. If you have disabled Auto-detection, use it with class="fancybox-youtube" to manually enable FancyBox for it. (Note: For shortened YouTube URLs, the class does not work. Auto auto-detection needs to be enabled seperately.)
For Vimeo, just place a link to the Vimeo page in your content. If you have disabled Auto-detection, use it with class="fancybox-vimeo" to manually enable FancyBox for it.
Both YouTube and Vimeo movies can be made to auto-start when they are opened 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/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">
...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 71899 times.
350 Reacties
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?
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.
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…