The WordPress plugin Easy FancyBox was created to fulfil some wishes:
- Simplicity — Other Fancybox plugins come with complete lists of options and overcomplicated settings. Some of which don’t even work…
- FancyBox 1.3.1 — Looking for de newest option to display the image title in an overlay, this turned out to be impossible with other plugins because they all use older versions of the FancyBox script.
- Multi-site compatible — and finally the plugin had to be compatible with WPMU 2.9+ and WP3.0+ in Multi Site mode. Preferably also from within the /mu-plugins/ directory.
And soon the plugin was born…
Automatic FancyBox 1.3.1 on all image links wíth mouseweel script to scroll through galleries, titlePosition ‘over’ and ‘elastic’ transitie effect. No other choice. No fuss.
But then there came some questions trickling in. Whether it really wasn’t possible to adjust some small setting or two. Placing the title below the image like it used to be?
Mmm…
Well, al-right then. A few basic options can’t hurt. But I’m sticking to my goal about a no-fuss plugin. So no new options page. No complicated stuff.
Luckily (since WP2.7) there is the new Settings API with its functions add_settings_section(), add_settings_field() and register_setting() making it relatively simple to add new options to existing admin pages.
So, now here is the new version 1.3.1.2 🙂 . With a small script improvement but also the possibility to adjust a small number of settings. You can find them at the bottom of the admin page Settings > Media under the new heading FancyBox:
- Title Position — ‘Overlay’ (default) to show the title text overlaying the image. ‘Inside’ to show the text below the image in the white border. And ‘Outside’ to place the text outside the image in its own frame. This last option seems to be problematic with some themes CSS so it might not be displayed correctly on your site.
- Transition In — ‘Elastic’ (default) to make the image grow from thumbnail to full size. ‘Fade In’ to make it fade from invisible to visible. And ‘None’ to disable transition effects.
- Transition Out — ‘Elastic’ (default) make the image shrink from full to thumbnail size. ‘Fade Out’ to fade from visible to invisible. And ‘None’ to disable transition effects.
But listen… IF I get around to it, I’ve got a few more settings in mind to add to these but I’m NOT going to make it complicated.
I refuse to! 😉
15 Comments
Hi, and thanks for the excellent pluggin. I have installed easy fancybox pluggin, it is perfect for what i needed, but I got one problem though. Do you know how to change the width and height of the iframe to avoid showing the scroll. Thanks again and I hope you could help me to solve this issue.
On your WordPress admin page Settings > Media you will find the option to change width and height values for iFrames in FancyBox. You can use percentages for fluid dimensions or hard values (without % sign) for fixed dimensions.
Hi, thank you for the pluggin! I’ve some trouble with the use of Fancybox. I was searching for days and haven’t found a solution so i found Fancybox. At my homepage you see the title of my blogpost, when you click on the title you will get to the content on a new page. But instead of going to a new page, i want to show the content in a pop-up. Is it possible to do this with Fancybox or something else? I hope you can help me.
Hi Soraya, yes you can show web pages inside fancybox but what you want to do might take a little work. You’ll have to edit some theme files (and you’ll need to be familiar with HTML, PHP and WordPress template functions for this!):
1. Your home page template which might be called index.php or home.php (depends on your theme) needs to be adapted a little so that all these title links will have a
class="fancybox-iframe"attribute. Then activate the iFrame option in FancyBox.After this easy first step it should already be working. But the posts inside the FancyBox frame will not only show their content but all that normally surrounds it like header sidebar(s) and footer, is there too. You probably do not want that so you’ll need to take a second step. Or rather a giant leap…
2. your posts template which usually is called single.php will have to be heavily modified so that the usual header, menu, sidebar and footer are no longer included (you’ll have to replace it with your own stripped down HTML and inclusion the themes stylesheet or you’ll end up with an invalid, truncated source and no styling) so that it looks good inside the FancyBox frame.
Hope that helps 🙂
Hello again, thank you for the quick response!I thought this was the solution, because it sounds very easy but i tried to set class=”fancybox-iframe” after all the title items between the section, but there’s still no fancybox . I also tried this option from
http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html Do you know another way to get it fixed. Have a nice day!
Soraya, I did’n mean to make it sound easy. It’s not. And it all depends on the theme.
Which theme are you using? Do you have a link to the site you are trying this so I can see how far you got?
An example for step 1 when using the popular Twenty Eleven theme: change the following part in content.php on line 15 from
<h2 class="entry-title"><a href="<?php the_permalink(); ?>" ...to
<h2 class="entry-title"><a class="fancybox-iframe" href="<?php the_permalink(); ?>" ...Hope that clears it up some more.
Hi, the theme i’m using is Snapshot version 1.2.2. at http://www.sofiori.nl/ . This theme haven’t got a file with content.php. I think the trouble is with the loop at the homepage. The file loop.php shows some navigation like this:
<a href="”>
Thank you!
Oh the code isn’t visible. Here it is (hope it will work this time):
<a href="”>
<?php else : posts_nav_link(' ', __('Previous Page', 'snapshot'), __('Next Page', 'snapshot')); echo '’; endif;?>
Sorry, the WP comment system eats most code… But looking at your site source code I see lightbox.js, postbox.js, thickbox.js and fancybox.js (twice?) all on the same page. I fear you’ll be running into many issues before getting it to work across all browsers equally trustworthy.
Hi! Thank you for the perfect pluggin. I really love it. Unfortunately I don´t know how to manage the “rel-attribute”. I have multiple galleries on my site but I don´t want to show all pictures in one lightbox. So I disabled the “Auto-gallery” and tried to use “rel”, but it doesn´t work. What do I have to do?
Hi Tina, you cannot add rel attributes to links in a WordPress gallery. See http://status301.net/wordpress-plugins/easy-fancybox/comment-page-7/#comment-1590 for how to configure Easy FancyBox to deal with your case 🙂
The current easing for a PDF is basically fade in/fade out. Do you plan to ever update easing options? I am looking for something like a horizontal flip. I realize you don’t want to make things complicated, but it looks like you have done some work on easing for inline content… just wondering if you might do the same for PDF content?
Hi chilegirl120, easing options are actively disabled for certain media types (like PDF) because they cause issues on certain browsers. Only fade works stable across browsers and platforms as far as I know. So I’ll have to dissapoint you: easing options are not going to come to PDF. Sorry.
Hello there,
I noticed that my titles are not showing up in the photo gallery.
I tried all options in the settings – Title Inside, Outside, Over, nothing shows up.
I’m using Fancybox version 3.0.12 and WordPress 4.9.8.
How do I show up the title on the bottom of the images?
Hi Elena, this is caused by a change that happened a while back in WordPress version 3.5. There are a few plugins out there that “fix” it (meaning: revert to the old behavior) like https://wordpress.org/plugins/restore-image-title/. It should make titles appear in the light box again. Alternatively, you may use the Alt field in combination with the option “Allow title from Alt” enabled on Settings>Media, but it might mean you’d have to edit all images manually…