Easy FancyBox for WordPress

Easy FancyBox

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

Description

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

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

GDPR / EU Privacy

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

FEATURES

Supported media and content types:

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

Also supports:

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

Additional features:

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

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

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

Get support on the WordPress forum.

Visit FancyBox for more information and examples.

PRO FEATURES

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

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

KNOWN ISSUES

See a list of known plugin and theme conflicts here

Contribute

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

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

Frequently Asked Questions

Help! It does not work…

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

What’s FancyBox?

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

Which version of FancyBox does this plugin use?

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

I installed the plugin. What now?

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

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

Where is the settings page?

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

Will a WordPress gallery be displayed in a FancyBox overlay?

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

.

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

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

Can I make a slideshow from my gallery?

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

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

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

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

Can NextGEN Gallery work with Easy FancyBox?

Yes, follow the instructions here.

Can I use ONE thumbnail to open a complete gallery?

Yes, follow the instructions here.

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

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

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

Is Easy FancyBox multi-site compatible?

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

Easy FancyBox

1164 Comments

Hi there,

I’m using a child theme customised from Elegant Themes. I can’t seem to get auto-rotation to work.

I wondered if there was a conflict somewhere. Grateful of any help.

Cheers!

Hi Mark, Elegant themes usually have FancyBox already integrated, and the scripts are ‘hard-coded’. This means that adding FancyBox via a plugin will in (this case) not replace the one in the theme. The result is all kinds of weird behaviour and conflicts. Sorry.

Here is someone with similar issues on another Elegant child theme: http://wordpress.org/support/topic/plugin-easy-fancybox-video-links-not-loading … And possible solutions.

HELLO!

Great plugin. I am using it on pdf-files and it works great.

Is it possible to adjust settings in the viewer? My pdf is a folder in landscape format and when it pops up, it adjusts the width to 100%.

I am not a big fan of scrolling. I would like it to zoom to pagelevel and show the whole thing instead?

Hi Marie,

This is a PDF browser plugin issue. In most browsers (except Chrome) this will likely be the official Adobe plugin, which can be controlled by some parameters. When you are using the PDF option in Easy FancyBox, these parameters will be #toolbar=1&navpanes=0&nameddest=self&page=1&view=FitH,0&zoom=80,0,0 but you can create your own by going to Settings > Media and disabling FAncyBox for PDF and enabling it for iFrame. Next go to the PDF link itself and give it a class="fancybox-iframe" attribute and then append the URL with your own parameters. Start with the ones above then, adjust the view (FitH or FitW) and zoom parameters.

Hope you can make it work for you 🙂

HI Ravan 🙂

Thanks for the tip – My pdf files already look a lot better when opening in an iFrame.

I feel a little silly – but I dont actually know how to append the URL with my own parameters in WP? I tried google of course, but all the different answers just got me more confused.

Do I need some sort of plugin?

Again…thank you for the quick reply:-)

//Marie

Hi Marie, here is an example:
<a href="http://yoursit.es/path/to-your.pdf#toolbar=1&navpanes=0&nameddest=self&page=1&view=FitW,0&zoom=60,0,0" class="fancybox-iframe">...</a>
Hope that helps 🙂

Hey buddy, I’m using a script to stretch my background, since CSS’ing it is performing really poorly with videos on top.

However, the script need to load the 1.8.1 jquery, and loading jquery “again” kind of breaks the functionality of this plugin.

I’m using: http://srobbin.com/jquery-plugins/backstretch/

I’m not sure on how to correct this, but by de-activating FancyBox I can get the background to work, so is the problem with FancyBox or with the script?
Or with the fact that I need to call the jquery twice? (For some reason)

Cheers,
André

Hi v0ice, the problem is caused by loading the two jQuery libraries on top of each other. Normally I would not do this but in this case I would simply replace the jQuery (1.7) library that is included in your WordPress installation with the 1.8.1 version. Then you can get rid of the manual call to the 1.8.1 library. You will not have to worry about the coming WordPress 3.5 release because that will include jQuery 1.8.2 just skip any in-between update like 3.4.3 if that should come before 3.5 😉

Hey mate, I actually tried replacing the WP-jquery with both 1.8.1 and 1.8.2, but none of them got both of the scripts working together.

It seems like the “backstretch-script” needs to have the call right before the actual script line.

And if I remove the wordpress-jquery and only have the call before the script, your plugin won’t work.. the dilemma!..

Do you have a link to your site so I can take a look? If you don’t like to share it publicly, you can use the form on the Contact page 🙂

OK, I see you have replaced the WP library with 1.8.1 (good) but you still include the jQuery library a second time just above the backstretch script in the footer. If you remove that inclusion line
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
it should work 🙂

By Post Author

Ah yes… that’s because the current jQuery is running in NoConflict mode. Could you try replacing the $.backstretch with jQuery.backstretch in that line in the footer?

By Post Author

Love your plugin!! I must be doing something wrong though. On my site, the png images pop up perfectly while I’m logged in as the admin, but once I log out and click on the same images, they do not pop up. Instead they appear below the footer. I know it has to be something simple. Any help would be most appreciated

Is effect usually appears when the stylesheet is not loaded. In your case, because the request parameter ?v=1.3.4 is missing. This might be caused by a security plugin that tries to hide version numbers… If you do not want to disable that plugin, or cannot disable this behaviour or exclude a particular stylesheet from being stripped, you could install the latest development version of Easy FancyBox.

Hi RavanH, I struggle to switch off the NGG viewer.

I added “class=”fancybox” rel=”%GALLERY_NAME%”” a the custom JavaScript Thumbnail Effect. And I also switched off the auto-gallery option as described in your FAQ. Still the standard viewer appears first, than, after closing this one, the fancybox viewer is accessable…??

What am I missing??

Hi Tim, FancyBox looks at the link title attribute first. If there is none, and if the option to allow Title from Alt is enabled, then it will take the thumbnail image alt attribute. You can control these attributes for manually inserted thumnails and links but not for WordPress generated galleries.

Forcing the alt text over the title attribute text for the FancyBox title is planned for a future release of the plugin…

Thanks for the quick response. It’s good to hear that it’s planned for a future release. The alt text is valuable for SEO and it doesn’t appear to be visible currently for WP generated galleries.

Hi, RavanH!

Easy FancyBox is great! Love it! I’ve used it on a number of sites without any problem. However, I seem to be having an issue now with the popup NOT showing up on load of the Homepage of a newly redesigned site, even with my using basically the exact same code as in the old site where it works just fine. Otherwise, Easy FancyBox works everywhere else I use it on the redesigned site. the temporary URL of which is:

http://fanfairefoundation.org/newsite2/

The old site where the popup works beautifully on page load is:

http://fanfairefoundation.org

And here’s the code in question:

<div class="fancybox-hidden">
<div id="fancyboxID-1">
<div class="font-14px" style="font-family: arial;text-align: center">
<a href="http://facebook.com/fanfairefoundation" rel="nofollow"><img class="aligncenter" title="Like us on Facebook" src="http://fanfairefoundation.org/images/fblike2.png" alt="" width="330" height="141" /></a>
...
</div>
</div>
<a href="#fancyboxID-1" class="fancybox"> </a>
</div>

I’m using the latest version of both WordPress (3.4.2) and Headway Themes (3.3).
The old site uses older versions of both WP (3.04) and Headway (1.66).

Your help will be greatly appreciated. Thanks for this wonderful plugin!

Gloria

Hi Gloria, your code is just fine and I see no FancyBox or jQuery related errors occurring on your new site. However, I see another error popping up in console:
GET http://www.google.com/uds/?file=ads&v=3&packages=search&async=2 jsapi:21
google.(anonymous function).d jsapi:21
(anonymous function) jsapi:28
(anonymous function) jsapi:18
google.(anonymous function).B.(anonymous function).Pe default+en.I.js:359
google.(anonymous function).H default+en.I.js:434
(anonymous function) /newsite2/:267
S jsapi:21

I suspect you need to find out where this error is coming from and fix that…

Hi Harel,

There is a possibility to switch off FancyBox and use a new window for small screen devices but you will have to do three things:
1. install the current development version from http://downloads.wordpress.org/plugin/easy-fancybox.zip (download zip, extract and upload via ftp)
2. put a text widget in your footer/sidebar with the content
<script type="text/javascript">
if(window.screen.width < 500 || window.screen.height < 500) {
jQuery(document).off('ready', easy_fancybox_handler);
}
</script>
3. edit all links that normally use FancyBox to (also) have a target="_blank" attribute to make them open in a new tab when fancybox is off…

Hope that helps 🙂

Thanks RavanH for your kind and prompt reply. I’m glad to know my code is fine. I have no idea where the error that pops up in console is coming from, but I’ll surely try to find out. Thanks again for a great plugin!

Hi again RavanH!

Just wondering which console you’re referring to re: the google.com jsapi:21 error indicated in your reply. I suspect it has something to do with the Google Custom Search Box which I embedded on my site. I tried looking for the error using Firebug and Google Chrome’s Element Inspector but didn’t find what you saw in console. Please advise. Thanks again.

– Gloria
.

Hi Gloria, it is in the Chrome (in fact Chromium, but that is nearly the same) Element Inspector that I see that error. Open the Console tab and reload the page to see it appear…

By the way, you are right, I don’t see that error in Firefox Web Developer Toolbar console… Strange. I’ll have a look at it with Opera + Dragonfly which has always served me the best because you can edit the source and apply changes live 😉

OK, strike all those remarks and go to your Settings > Media admin page. Select “Link with ID fancybox-auto” at “Open on page load”…

Just one last question… does a web page have to have the .htm(l) extension for it to show up in an Easy FancyBox lightbox? I ask because a WordPress permalink (i.e., without the .html extension doesn’t seem to work), or am I just missing something? Many Thanks again!

No, any URL should work… And although class=”fancybox iframe” will work, I advise you to use class=”fancybox-iframe” (notice the hyphen) for full control over frame size.

PDF links you can give class=”fancybox-pdf” or class=”fancybox-iframe” depending on your preference but if you choose the last option, then you’ll need to disable the PDF feature on your Settings > Media admin page.

By Post Author

Require no of total images to be displayed in slideshow or atleast which images are we seeing something like 5/7 image we are on checking now. Can it be possible to display that some where.

Hi Brijesh, this is in the current implementation of FancyBox in this WordPress plugin not possible. You’ll need to build FancyBox into your theme manually to get this kind of control. Or add something like “Image 3/10: …” to the title of each image manually, but I understand this is kind of hard to maintain when you change or add to your galleries a lot over time.

Hi Peter, at this point, only the title will be used when inserting WordPress galleries. If you want more control over the title that is displayed in FancyBox, you’ll need to insert each thumbnail separately into your post and use the caption text as Alt text…

Hi, thanks for the plugin! Does exactly what I need it to.

At the moment, I’m adding the fancybox-iframe class to each link that I need to open in an iframe. I’m using the width/height parameters, and the links are all within tables.

Probably a bit of a newbie question, but is there a way to add the class to the main stylesheet so I don’t need to add them all manually? Something like

table a { fancybox iframe {width:1024,height:675} }

Pretty sure that won’t work, but I would really appreciate it if you could point or hint me in the direction!

Thanks a million

Hi Andrew, you can set the default size of the FancyBox iframe on your Settings > Media admin page. The only problem with the current stable version is that as soon as you set a different size though the metadata method {width:1024,height:675} then all other instances of fancybox-iframe on that same page will take this same custom size… If you are running into this problem, try to install the latest development version. Download from Other versions on http://wordpress.org/extend/plugins/easy-fancybox/developers/ and overwrite your current version via FTP.

Easy Fancybox deosn’t word on my search page. What schuold I do, on all another pages this plugin works very well. Somebody has an idea? Thx!

Hi Ben, my tests so far have not revealed any problems so it should be safe. If you do run into anything, do not hesitate to let me know 🙂

Hi,

after update to WP 3.5 and updating easy fancybox and some other plugins, too, the easy fancybox is reduced to 0x0 px, so I can’t see the image anymore:
http://www.frankfurt-salsafestival.com/workshop-plan

On my other page, we had the same issue and changed it temporarily to fanceboy – not so nice, but it works:
http://www.salsa-trips.com/magazine

We tried to change settings etc., but can’t find out, why the images doesn’t load with proper size. Can you please give advice on what to do?

Thank you

Hi Salsa-Trips, it’s probably a conflict with the WP Supersized plugin which inserts another version of the jQuery Easing extension. Could you try setting the Easing effects in the FancyBox settings to Swing to see if that changes the issue?

I said “Easing effects in the FancyBox settings” but that should be “Transition effects…” sorry.

The centering by FancyBox is based on body width obtained from DOM by the script. It seems that the WP Supersized plugin plays with these values to achieve the background effect. The result is that FancyBox does not know where to place the box for it to be centered… I’m afraid I cannot fix that.

hm, that sounds really strange to me, because until yesterday both worked well for months. Also acitvating “Elastic”, the fancybox is centered, but the image is shrinked to 0x0 px. Changing the value with browser tools, we can see that the image is there. I’m no IT expert, but to me it looks, like s. th. in the specific code of “Elastic” is interpreting the image size in a wrong manner – just since the last update. Before it worked.

Then it was the update to WP Supersized that changed things becuase Easy FancyBox did not get new script files… As far as I can see, they are using a new version of the easing script which might somehow cause incompatibilities.

Testing a bit more (editing out script files at will) I found that the by WP Supersized included jquery.animate-enhanced.min.js is causing the jump to the left. Is there any option in WP Supersized that would prevent inclusion of the Animate Enhanced jQuery extension?

Hi,

After updating to WP 3.5, I got a similar 0x0 px problem and the centering problem. I managed to adjust the CSS to make it serviceable, but another problem seems to have cropped up: the “Close” button doesn’t work for me any more. If you click the “Feedback” button here: http://www.seiu32bj.org/ , it’ll bring up a gravity form inside a fancy box. But clicking the “close” button no longer does anything. Any advice on how to fix it?

Thanks!

Hi David, please do not let WP Minify inlcude the already compressed FancyBox script files. As I understand it, there is a possiblitly to exclude the files: 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 and wp-content/plugins/easy-fancybox/jquery.metadata.js

I went to the Settings>WP Minify page. On that page is a text box labeled “JavaScript files to exclude from minify (line delimited).” That’s where I added the files that RavanH listed.

Analyzing this topic further, I found out that easy fancy box prevents the jQuery Accordion Menu (and one custom plug-in) from closing in IE and Firefox. In Chrome it works. Activating Fancybox instead easy fancybox, it works, too.

So to me it looks like easy fancybox causes the bug, because deactivating Supersized doesn’t solve that neither. It depends on easy fancybox, only.

However, it would be great to find a solution. Once it works, easy fancybox is by far the better plug-in.

http://www.Frankfurt-SalsaFestival.com (with easy fancybox and Supersized)
http://www.Salsa-Trips.com (with fancybox and Supersized)

It’s hard to debug because I did not get any related errors in console when visiting your site before…

However, it would be nice to find out what is going wrong. Could I ask you to quickly test the latest development version? The FancyBox scripts are the same but there is a different implementation in the page source. It might just work out better, or at least give some meaningful errors to work with. If you do want to try it, please let me know when so I can take a quick look before you switch back to the other FancyBox plugin.

In any case, thanks for keeping me posted on these issues 🙂

Download the zip, then uninstall the current version of Easy FancyBox from the site and then use the WordPress admin installer to upload and install the zip file… You should then see it appear as Easy FancyBox version 1.3.4.10devX. Activate it and let me know 🙂

Hi Ravan,
I tried the Dev. version, too, but either the accordion menu doesn’t close with the stable version or the image opens in a new window, but not in the fancybox. I even deactivated Supersized for the time being.
With FancyBox I don’t face these issues.
So I uploaded an old version of easy FancyBox from my backup DEC, 29th and this works, too
Would be great if you can fix these bugs 🙂
THX

Salsa, if you can set up a test site reproducing the issue, I can take a closer look… But there is no way I can say something meaningful by guessing. There seemed to be a lot going on at the same time with multiple conflicts. Hard to debug so maybe it is easier to stick with the other FancyBox plugin?

By Post Author

Hi,
Great plugin! But I have one problem.

Scripting Guard [ details ] The Plugin Codestyling Localization was forced to protect its own page rendering process against incidents !
PHP runtime error reporting detected !
Reason: some executed PHP code is not written proper | Originator: unknown (probably by Theme or Plugin)
Below listed error reports has been traced and removed during page creation:
NOTICE Error: [8] Undefined index: id /……../wp-content/plugins/easy-fancybox/easy-fancybox.php on line 351

Is there any way to fix that?

Hello there!

First of all compliments for the plugin. I have 1 question/problem though. I am using your plugin with NGG gallery. When I open last image in a gallery in fancybox and hit next button it pulls images from another gallery instead of going to the first image in gallery or disabling next button. Any idea about solution?

Thank you for your time!
Marin

Yes, it seems I had a typo there -.-
Thank you for the help and immediate responose, probably saved me a lot of debuging time. :o)

Cheers and keep up good work!

Hi Mohammad, yes there is. You need to do 2 things:
1. install the latest development version from http://downloads.wordpress.org/plugin/easy-fancybox.zip
2. put the following code in a sidebar widget or in your themes footer.php:

<script type="text/javascript">
if(window.screen.width < 500 || window.screen.height < 500) {
jQuery(document).off('ready gform_post_render', easy_fancybox_handler);
}
</script>

Change the numbers 500 for a different max screen size.

Hi,
Thanks, I’ve tried adjusting the footer as you suggest but it isn’t make the necessary changes. Any Ideas?

Sincerely

Hello

I want to integrate fancybox in my theme. I mean i want to change fancybox directory.
I tried but i couldun’t

It happend like this:
http://www.websitename.com/wp-content/plugins/home/cpanel_user/public_html/wp-content/themes/theme_name/framework/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4

I think i should change this part in the plugin:
if(!stristr(plugins_url(”, __FILE__),’/easy-fancybox’)) define( ‘FANCYBOX_SUBDIR’, ‘/easy-fancybox’ ); else define( ‘FANCYBOX_SUBDIR’, ” );

How to change this part?
Can you help me?
Thank you.

Hi technoesh, I think you’d be better off integrating FancyBox into your theme directly than trying to merge a plugin and a theme together that way… That’s bound to give you more trouble than advantages. Find the bare FancyBox files on http://fancybox.net or go for the new version with limited licence (payed for commercial sites!) on http://fancyapps.com

Hi Ravan,
Thank you for your help and the great plug-in. I really prefer easy fancybox far above alternatives. Wired process, but I found the plug-in with a javascript error, which causes all the conflicts. Deactivating that, easy fancybox works great again (but not the dev. version, because it doesn’t open my magazine…). Only open topic is the shift to the left top, while WP Supersized is activated. I’ll ask them about it.
THX,
Rico

OK, I see now. Instead of using class=”fancybox iframe” try the recommended class=”fancybox-iframe” for these kind of links… You can then use the iFrame options on Settings > Media to control the behaviour.

Hi Ravan,

easy fancybox looks great and preferable to me over the alternatives. I haven’t seen anything here or at fancyapps yet, about how to, instead of using the filename, to include if wanted a much longer line of text with the image as I’ve seen examples of in some implementations. In the Media>Settings of the plugin it seems to allow for use of the alt tag text, “Allow title from thumbnail alt tag” if I understand that right, assuming that the main image on the page is the thumbnail? Can you help me use the plugin to display more text?

Regards,

Mark

Hi Mark, I’m not exactly sure what you would like to see but titles in FancyBox works like this: First it will look for a Title attribute set for the LINK to the image. This is independent of what kind of thumbnail image or anchor text is used. Only if it does not find that LINK title attribute, it will look for an Alt attribute for the thumbnail IMG tag. But only if you have that “Allow title from thumbnail alt tag” option checked.

Usually, the Alt attribute is best suited for longer descriptions and the WordPress image dialog even allows for HTML inside it so you can create bold or even linked text in the title 🙂

I have found that tags work in both the Title and the Alt attributes in your Fancy Box. However, when I put them in the Alt attribute, they don’t do line breaks on the mouseover…it shows an ugly “” in the mouseover. Are there some other options here for a longer descriptions….like using the media description?

Hi Judy, put the longer description in the link title and a short one in the image alt. The alt text should then be used for mouse-over by your browser, while FancyBox will take the link title long version…

Leave a Reply to RavanH Cancel reply

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

%d