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

Hello. Please help me. I use easy fancybox in comination with nextgen gallery everything work fine except image wont resize on a smaller screen.

Image 1200×800 wont resize to fit screen in a smaller window.

Also viewing the site on an iphone, the image in fancybox becomes very small.

See my site here: http://wp.lagrafica.se/photography/?album=1&gallery=7

I am comfortable with javascript, can this be changed?

Thanks for a nice plugin!
//Niklas

Hi Niklas, in which browser do you get this? When viewing your site in Opera 11, Chrome (latest) and Firefox 4, the images get scaled down just fine… But there does seem to be some problem because your theme, DeepFocus, loads the FancyBox 1.2.6 library. This interferes with the newer version 1.3.4 used in my plugin and results in unexpected behaviour. You need to either remove the one used by your theme or disable my plugin…

Hi! Thanks a million for the awesome plugin!

I am pulling up some web pages in iframes as well as a couple of youtube videos using fancybox. They box however is not centered.

Is there any way to center the lightbox?

Thanks again!

Hi Pat, the overlay frame should be centering automatically. Maybe there is some CSS on your site interfering?

I am not understanding how to put the images in a gallery so that my navigation arrows show up. I put the images in a widget/text http://xavierfleming.com and they come up one at a time when clicked. What exactly do I need to do to put them in a gallery? Thanks

Hi Bianca, the easiest would be to go to Settings > Media and set the Auto-gallery option to “One gallery for all”.

Alternatives with more control are: (1) manually give image links that you want to group together corresponding rel attributes (2) add any section, like your sidebar, that includes image links for which you want to create separate galleries in the Sections field.

Hi.

Firstly, love the plug-in.

Am having a problem with it tho…

http://www.davejohnsondesign.co.uk/2009/08/dips-purple-cows-and-big-moos

Have a look at the link above – I’m trying to get the ‘Fancy Box’ effect to work when the image is clicked on this page – but when I click on the image it opens in a new page, and then the Fancy Box effect works when the image is clicked in this new page.

At first I thought it might be a plug-in conflict, but I still get the same problem when I deactivate all other plug-ins.

Any suggestion on how I can get this to work?

Many thanks

Hi Dave, it’s not a plugin conflict, it’s the link… you are linking the image to another (auto-generated WP) page. You need to link the image directly to its larger version. When inserting the image in your post, there is an option to change the “Link to” URL. Choose “File” instead of “Post” there.

Hello,

I am developing a website and the plugin seemed to work just fine. Then I got a new client machine with Win7 Enterprise SP1 and IE8 x64. Then the entire WordPress site hang when loading. . When I use my old machine which is XP 32 bits with IE8 then it load but is slow. Upograding to IE9 on both and everything flies again. Using FF4 on the 64 bits also hangs on loading. Disable the plugin and all is fast again

http://213.46.9.236/main

Any glues ?

Ha Marcel, what plugin are you talking about? PDF? Flash? In both cases, you might have issues with a 32bit plugin on a 64bit system.

For Flash there is a 64bit bèta version available on Adobe Labs http://labs.adobe.com/downloads/flashplayer10_square.html but the PDF plugin is still only in 32bit 🙁 … searching on Google for 64bit and acrobat reader might get you some tips on getting it stable…

Installed easyfancybox plugin intending to use the iframe feature to display webpages. Set up evreything correctly put a test link on a post and everything worked fine for about 3 or 4 times of clickig on the link to this post after that though it quit displaying the iframe and wouldn’t work anymore. I have it set to auto trigger first iframe link so it would display automatically on page load. Am Using WP 3.1.2, IE 8 and latest version of plugin. You can see the post page here the link is at the top of the page: http://bargainmans.com/survival-food.html
Thanks for any assistance.

I had the class on the link set up like this: class=”fancybox iframe”. I just now changed it to this: class=”fancybox-iframe” and it started working again. Well at least it’s working now.

Yep, that’s exactly the way to go. Class “fancybox” is reserved for images and inline content but “fancybox-iframe” is the class to use when controlling iFrames in FancyBox.

Hi Desta, FancyBox will show whatever image you LINK to and ignores what you use as thumbnail image or link text. So yes, these two can be completely different images. Example:

<a href="http://the.url.to/another-image.jpg"><img src="http://the.url.to/thumbnail.jpg" /></a>

Hello,
Is there a way to have my contact form pop up when clicked on instead of going to a new page with this plug in?
Thanks

Hi, your theme Minicard already includes FancyBox. It’s an older version (1.2.1) which gets loaded on top of the one included in my plugin. Loading FancyBox twice is never a good idea and will cause unexpected results or — as in your case — will break FancyBox completely.

Sadly, the theme Minicard has its FancyBox javascript hardcoded in header.php (it does not use the official WP convention of including script and stylesheet files) so there is no way for my plugin to prevent this double loading of scripts… Do you have access to the theme template files? If so, and if you want to use my plugin to display PDF’s (as the integrated version cannot do) you need to remove all related FancyBox references from header.php:

<link rel="stylesheet" href="/js/jquery.fancybox/jquery.fancybox.css" type="text/css" media="screen" />

and the part from

<script type="text/javascript" src="/js/jquery.fancybox/jquery.easing.1.3.js"></script>

all the way down to

/* ]]> */
</script>

(just before </head>)

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 link you’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

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…

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.

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 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

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:

… it seems the new iframe embed code provided by YouTube stacks the video above the layer with the navigation arrows. This does not happen with Vimeo or Dailymotion iframe embed code. The Youtube movies are still added in the gallery but navigation to prev/next can only be done with left/right keys on your keyboard.

I don’t think I can fix the issue because it is the external script from Youtube that does this, I suspect. If you have the option to move to Vimeo or Dailymotion, that would solve it immediately. Or display a little text as title (for example) that tells visitors they can use the keyboard arrow keys to navigate to the next movie…

Alternatively, you can wait for the Pro version coming one or two weeks which will include among some other advanced features, the option to place the prev/next arrows outside of the content window or in the bottom corners….

Hope that helps 🙂

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?

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.

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>
&lt/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 :D… 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…

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,

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 the jQuery(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)

Leave a Reply to Jayson WhelpleyCancel reply

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

%d bloggers like this: