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

Ravan, thanks for your quick reply! I haven’t had a chance to test all of it but I think I understand. I’m having a larger issue with a theme on another site. I am a developer and can read a little php but not a lot. If it’s not taking a lot of your time. Can you help me interpret the statements from the theme and help me understand what setting might work around these errors and/or how I need to hand code a class that would not break the theme? (and I assume the stylesheet would need to add this class?)

from http://sfsthetik.com/test-photo/

“Warning: array_key_exists() [function.array-key-exists]: The first argument should be either a string or an integer in /home/content/42/8975542/html/sfsthetik/wp-content/plugins/jetpack/modules/photon.php on line 183 ”

thank you very much!

Mark

Hi Mark, to get rid of that warning you need to disable the Photon module in the Jetpack plugin or adjust your PHP error reporting settings. This can be achieved in several ways (depending on other server settings) but you might want to start with setting the display_errors flag to OFF at runtime. Paste this in your wp-config.php just after where ABSPATH is defined:

@ini_set('log_errors','On');
@ini_set('display_errors','Off');
@ini_set('error_log', ABSPATH.'/my-private-error.log');

(change the error log file name to something that will not be guessed by anyone to keep it away from prying eyes, or better change the path to a directory that is not publicly accessible)

Hello Ravan,
h
Thank very much! That worked of course. Some follow up;

-I must not be much of a developer – I can’t remember how in Unix to set the path to another directory/
-This raises the question of what is causing the error, if you know, or I found in looking, there is no clear way how to disable any of the Jetpack modules. Would deleting photon.php be all there is.. or when you activate it is there more to it, is code written to the the theme, etc.? Are there are other reasons I might want to disable it since I have unlimited bandwidth on my server, if it’s causing an error?
-In other words, is it possible to take advantage of Photon CDN, deal with whatever the error is without significant problems and still be okay/

You have been so helpful! There are friends who are looking for the right lightbox/colobox/fancybox and I will send them to you 🙂

Best Regards,

Mark
–

Hi Mark,

I can’t remember how in Unix to set the path to another directory

You can use absolute paths starting with a ‘/’ like ‘/var/log/php5.log’ or relative paths that start with ‘./’ meaning same dir or ‘../’ meaning one dir up, like ‘../log/php5.log’

there is no clear way how to disable any of the Jetpack modules

Go to the Jetpack > Jetpack admin page where you see all the modules. Find the Photon module and click ‘Learn more’ and now you will see a new button ‘Deactivate appear right beside the first button. It’s confusing, I know: Just ignore the learn more text and look next to the Learn more button.

The error is a known issue (or at least it should be known) and discussed on http://wordpress.org/support/topic/photon-failure-messages-in-header-and-post among other places. You might find a fix in that thread if you do not want to wait for a new plugin release 🙂

Kind regards,
Allard

By the way, if you’re interested in boosting performance further than just some images via CDN, there are several roads you can take. My first advice would be to install APC (Opcode cache) on your server, add a caching plugin like WP Super Cache (easier) or W3 Total Cache (more options but very complicated) to WordPress and then you might want to take a look at external CDN services. There it is the Cloudflare service with also a WordPress plugin for it although I do not know if you really need any plugin. Or a payed CDN service like the one by Amazon or others… in combination with the CDN options provided by WP Super Cache or W3TC, this can make a very powerful combination. Good for your visitors and good for search engines 🙂

Replies:

To Allard: what was strange on one wp install was that until I deactivated Jetpack and re-activated it… neither Photon or the deactivate button showed up on the Jetpack screen – now that’s strange and one reason I couldn’t find it. Once I did that it was back. Pretty weird. The pathing convention all came back to me thanks to your help and Ravan’s too. Thank you very much!

Ravan: I am using the Cloudfare free service on another server, or maybe it’s all free, that’s part of their thing they’re non-profit? I’ll have to check it out. I don’t know if I have the tech chops to navigate Amazon S3.. I gave it a try and unless it’s gotten way simpler it’s probably not for me. I’m also concerned about price since business has dropped off for me in recent years.

But I will check out Opcode and the other options though, thanks for the tip! And thanks again for all of your help!

Best Regards,

Mark

Hi again folks,

A couple of additional questions:

I’ve seen in other implementations more advanced gallery menu features – I think. I’d like more than just the “>” and to use next >” as I’ve seen and with a “close” button showing on all images if possible.

This was actually one of the reasons I chose EFB over others, at least that’s what I thought I saw implemented elsewhere unless I’m mistaken, but I don’t see in Media>Settings or in the forum how to do it. Any clues?

Many thanks!

Mark

Hi Mark, I’m afraid I do not understand what you are asking… Maybe a live sample page to show the issue would help?

By Post Author

Ravan,

I’m sorry I was not being clear.

http://sfsthetik.com/inventing-abstraction-1910-1925-through-april-15-2013-at-moma/

Currently with Easy Fancy Box I’m only getting the ” ” symbols for forward and back when there are more than one image in a post… so, a gallery of images.

I also do not see a “close” (in text) rather than just the “x” as I thought I’ve seen in other implementations unless, they were not Easy Fancy Box.

I would like to see “” as I thought I had seen, if at all possible, but I have not seen in either the settings, or the forum.

That link will help you see I’m only getting the “” with a rollover. I’d like the before mentioned, and always visible, not just with a rollover…. if this is possible.

Thank you Ravan.

Mark

Hi Mark, this is the standard behaviour and look of FancyBox. Other lightboxes will look different. Maybe you have seen prettyPhoto, Colorbox or Lightbox2 before? To make the arrows always show, you can add some CSS rules to a text widget for example (or use Jetpack’s Custom CSS module):


<style type="text/css">
#fancybox-left-ico {
left: 20px;
}
#fancybox-right-ico {
right: 20px;
left: auto;
}
</style>

By Post Author

Or maybe this is better since the arrows will otherwise always be in front of the images:

<style type="text/css">
#fancybox-left:hover span,
#fancybox-left-ico {
left: -15px;
}
#fancybox-right:hover span,
#fancybox-right-ico {
right: -15px;
left: auto;
}
</style>

By Post Author

Hey Buddy
I am dying to get this working on a site but I am having the same issue as the people above with the mobile devices.

I like your trick of detecting pixels, but devices like the iphone 5 have a lot of pixels… so wouldn’t it not work on them?

I am also failing to get it set up because the developer version doesnt’ seem to be working….

Hi Ravan,

Yes it seems I do have it confused with other lightboxes, then. My apologies, but thanks again for your help.

I do want to continue using Easy Fancybox. I’m not 100 percent clear on your reply concerning CSS. Does your answer and the code suggest that I can create an icon that can be used in the CSS? I assume in your example the name of the icon would be fancybox-right-ico, (and left,) and would be gif or png, and would need to be located where?

last question, thanks again!

Mark

I’m trying to center align several thumbnails in Easy-Fancybox but cannot figure out how to do it. A single thumbnail works fine, but if I try to have two or more thumbnails on the same line, it only works if its left aligned. Please help!

Hi Christine, thumbnails are managed by WordPress, not my plugin. FancyBox only kicks in when a link to a full size image is clicked…

If you want to center two thumbnails, try this: Write a three words (or even just letters) on a new paragraph line and then place the thumbnails in between these words without aligning (neither center nor left nor right but choose ‘none’) and then place your cursor on any word in the paragraph and hit the Center button that is used to center align paragraph text. The three words including the thumbnails should now be centered. Next step is to carefully remove the words (you can leave spaces) from in between and next to the thumbnails. Then save 🙂

I’m trying to display inline content and it’s not working. In Chrome it simply displays the full page in the lightbox window, which you cannot close. In IE9 it displays “The requested content cannot be loaded. Please try again later.” in a lightbox window. This happens even if I copy verbatim the code example on this page. See http://ourwaterways.org/test2 . I have used elsewhere for vimeo videos and it is working correctly…just not the inline div piece. Any ideas? Thanks.

Hi Brad, when targeting inline content, you need to use href="#fancyboxID-1" instead of href="http://reconnectingtoourwaterways.org/test2/#fancyboxID-1" (this would indicate iframe content) plus there is some outbound link tracking code there that might be interfering… When you change the link to #ID instead of a full URL, that outbound click tracking code might disappear also.

The URL is just the anchor, not the full URL. However, you are right on the link tracking….I turned off google analytics and it’s working fine. Do you know of any way I can use analytics and still have it work?

Great, that plugin works perfect. And thank you for not only making a great plugin but providing the best support I’ve ever come across.

You’re welcome. Good to hear you’re sorted and thank YOU for your kind donation via PayPal! 🙂

By Post Author

I’m trying out this plugin with PDF content and I’m running into a problem. I have the PDF section turned on in the Media Settings, and I made sure I’m using the full URL with “.pdf” in the content. When I test out the page link, the fancy box window pops up large enough to show the PDF content, but I get a “This Plug-in is disabled” message in Firefox. I click on “Manage Plugins”, turn on all disabled plugins, yet the problem persists. Is there a setting I’m missing?

Hi David, the WordPress plugin does not control the PDF browser plugin. Nor can it fix any issues with it. Your PDF plugin might have a problem or you might be running into many of the issues related with PDF embedding because there is not one standard way of doing it. You could try this page http://demo.status301.net/easy-fancybox-sandbox/pdf-embeds/ and if there is one method that works for you there, then get the latest development version of the plugin and try to copy that method on your own site 🙂

Hi Ravan. I just tried it in Safari and did not have the plug-in issue. So I must have a problem in Firefox. I discovered that the PDF does come up in the window but then a user can download it on their own.

That presents a new problem in my test: I’m try to set up preview PDFs in a commerce site for purchasing downloads so I want it to be view-only. Is there a way to prevent PDFs from being downloaded the pop-up or is that an impossibility due to the URL being used to put the image up on the site?

Nice ease of use on this plug-in by the way.

If you really want to prevent downloads and only offer it as a preview, I would try this: Get a Google account if you do not already have one and upload the PDF to Google Drive, open it, and choose Share. Then hit Share and set it to ‘Anyone with the link’. Then, in the ‘file’ menu select ‘Don’t let viewers download’. Next, choose in the ‘file’ menu ‘Embed this pdf-file’. You will now get an iframe embed code from which you extract the ‘src’ URL and use that in the link on your site. Give that link a class=”fancybox-iframe” attribute and enable (and configure) the iFrame option on Settings > Media.

Still, visitors can download individual pages as JPG but at least they will be of lower quality (compressed for speed) than the original… Otherwise, I do not see any way to prevent users to track the file URL and simply download the original PDF.

Am using the plugin and have some pages that bring up hidden inline content in the lightbox. I’d like some of the content to come up with the “Close X” button, and some content to come up without the “Close X” button. Also, when it comes up without the “Close X” button, I don’t want them to be able to exit the window (right now, if you hit the “esc” button, it closes the popup). Is there anyway to do this?

Thanks,

Robert

Hi Robert, something like on http://demo.status301.net/easy-fancybox-sandbox/? These options are currently added in the development version. You can install it if you like but be aware it might have some bugs… In any case, these options are global, meaning you’ll disable the X icon and ESC key strokes for all fancybox content. If you need it only for some content, then you can do it (keeping the current stable version) like this example link:
<a class="fancybox-inline {showCloseButton:false,hideOnOverlayClick:false,enableEscapeButton:false}" id="fancybox-auto" href="#popup" rel="nofollow"></a>

The code you posted looks like what I need, but when I tried it it doesn’t work. Is there some option I need to have on?

Robert, do you have a link to your site so I can take a look? You can use the contact form if you don’t want to share publicly 🙂

I have a test site up at:

realskinsolutions.com/staging4/skin-care-products

The “add to bag” buttons are the original buttons, the “Test” link to each is my attempt at adding your code.

Well… tested on all my own sites. Downgrading can be done via FTP the same way as upgrading, or by uninstalling and then reinstalling the stable version via the WP back-end…

Ok, up on my site. I checked the box to turn off the esc key, that works. Now I just need a way to take away the “X” on the one popup (I want it to show on any other popups on the site). Can I get it to not show on the one linked to the “Test” button?

Actually, just realized I didn’t have the “Include the Metadata jQuery extension script to allow passing custom parameters via link class.” box checked. Checked that and all works.

Thanks for the help, great plugin.

Sorry, forgot to mention that needs to be checked… Great you figured it out and got it working 🙂

The official release will be as soon as I have finished a major update to the options page (just looks not function) but as I’m very busy at the moment I cannot give you an ETA…

By Post Author

Glad to hear. I noticed there are some options for Border radius and opacity into the Appearance section. Will those be in the new version?

Also, was wondering if there is any way to control where the popup shows on the screen? I have some content that I don’t want to be covered, so if there was a way to shift the popup to the left or right, that would solve my issue. Any way to do that?

Forgot to mention, while I’m at it, it would be nice to control the distance from the top and bottom of the screen as well (margins maybe?).

Robert, a quick folow-up on your margin request: you might try enabling the metadata option and then giving a link that opens in FancyBox the following extra class (separate with a space from other class names, include the curlies) to define a 100px margin:

{margin:100}

But note that you’ll have to do that for every link…

Hi Robert,

Positioning off-center 100 pixels to the left might be possible by adding this rule to your themes stylesheet:

#fancybox-wrap {
margin-left: -100px;
}

But be careful with that because setting that value too high (px or %) might just push the content (partially or completely) out of the viewport on smaller screens… I’ll consider this as an option in a future release 😉

Setting a margin is not implemented but I’ll consider your question as a feature request. Hopefully I’ll have some time to get it into the upcoming version 🙂

Hello again Ravan and friends,
I wish I could remember why I chose to deactivate Easy Fancybox and try another plugin but now I’m wishing I hadn’t done that. It is called Lightbox Gallery. For some reason now, after deactivating Lightbox Gallery and reactivating Easy Fancybox, the plugin no longer seems to work on my installation ( http://sfsthetik.com ) Try here: http://sfsthetik.com/new-work-the-art-and-cognitive-neuroscience-of-studio-artists-algorithmic-brushes/

The only thing I’ve been able to see is that Lightbox Gallery does put “lightbox” in the rel field of the advanced image area, but I’ve taken that out in several instances, and a click still takes me to a plain jpeg on a blank browser page.

Any thoughts?

Thanks,

Mark

Hi Mark, there are two things interfering with FancyBox on your example page:

1. The image URL is appended with ?resize=499%2C680 which breaks the auto-detection. You can fix this by manually setting a class="fancybox" or by installing the 1.5 development version from http://downloads.wordpress.org/plugin/easy-fancybox.zip
2. Something (another plugin probably) is setting an onclick event on external and media links to do click tracking. This too prevents FancyBox from fireing… You’ll need to switch to another plugin that still allows external/media link tracking like Google Analyticator.

Hope you can work with these suggestions 🙂

Yes, I can :). I both installed the development version, very nice! and I at least temporarily deactivated Google Analyticator – I’m not even sure yet what it’s doing for the site analytics.

What I’m curious about is that both before and now I have needed to resize the image to fit the format of the theme to 499 or 500 px. Actually in some cases with multiple images what I’d prefer to do is have the image as a thumbnail; but I haven’t recalled seeing in the image UI where I’m allowed to create an thumbnail that would trigger Easy Fancybox;
– although that is in the media>Settings for Easy Fancybox and maybe I’m just not using the settings properly for it,
-or, maybe you need to be using a gallery for thumbnails, or both?

Anyway for now, I am back in business with Easy Fancybox, which is very good news!

Mark

I at least temporarily deactivated Google Analyticator

I was not aware that Google Analyticator appends external and media links with an onclick event. There might be an option in its settings to deactivate this behaviour… I use the same plugin myself on many sites and usually have “Outbound link tracking” and “Event tracking” enabled and “Download extensions to track” usually something like zip,pdf,mp3… But never jpg…

but I haven’t recalled seeing in the image UI where I’m allowed to create an thumbnail that would trigger Easy Fancybox;

When inserting a thumbnail, make sure you choose “Link to: File” (instead of attachment page) and FancyBox will automatically bind itself to the link.

I have needed to resize the image to fit the format of the theme to 499 or 500 px

If you want 500px to be the max width of any image on your site, you can define that on Settings > Media at the “Large size” option. Then during uploads you will see a new option (provided by the Easy FancyBox dev version) that says “Scale images to match the large size selected in image options (… × …).” — where the dots will show what you have defined on Settings > Media > Large size — which you can check before you choose a file to upload/insert. This will make WordPress scale the images automatically on import 🙂

I want to be sure we’re on the same page on you’re reply, both on thumbnails and image sizes.

I’m not sure where you’re suggesting I set the thumbnail when you say “inserting a thumbnail,” just to be sure..

Also, regarding image size, to be clear, yes the image size in the page must be restricted to 500 pixels, but I don’t at all want it restricted to that in Easy Fancybox for a single image or gallery – in fact that’s a major feature; that the user would be allowed to see the image at a larger size than the theme normally allows by clicking and seeing it in EFB.. so I assume your advice still stands regarding the settings concerning size…

Thanks so much!

Mark

image size in the page must be restricted to 500 pixels, but I don’t at all want it restricted to that in Easy Fancybox for a single image or gallery

Ah, OK. Then do NOT check that option “Scale images to match the large size selected in image options” during upload… And when inserting an image into your page content, choose Size: Large to get that 500px wide version in your page content and choose Link to: File to make the original size version open in FancyBox. When you want to insert a gallery using the large versions instead of the thumbnails, use the shortcode [gallery link=file size=large columns=1]

Hi Ravan,

Sorry for the delay in getting back to you on this.. thought I could solve it but I keep going round and round:

First, I’ve downloaded and am using the development version of EFB, thanks. I’m a bit confused by some of the remarks and many of the settings, so bear with me and thanks for your patience.

Yes, I’ve changed the first Easy FancyBox settings in Settings>Media changing the large size to 500 pixels, assuming I’m reading and interpreting correctly that this only relates to inserting it into the post, and may have been a partial step in solving the problem (see above comments.) The theme format allows for a maximum width of 500 pixels. Before Easy FancyBox, I would insert and manually scale the image by shift-clicking the image in the graphic view of WordPress editor. This has always been annoying – there doesn’t appear any other way short of manually rescaling the image which I don’t want, without doing the math or having a calculator open to get the image to scale proportionately. Among other things, this is why you wrote above that you’ve seen in the code that the images were coded with scaled heights and widths, which at least at some version, was breaking the plugin (or something.)

To keep this from going on any longer, whatever I’m doing is NOT preventing me from having to manually scale the image.. when I insert it, it still inserts it at full size, AND it is still NOT doing what I wanted.. to have the Easy FancyBox window show the image at the largest possible size. What it’s doing is showing it at 500 pixels! So boy, do i have this messed up or what!

If you can help, I owe you!

see
http://sfsthetik.com/photo-through-a-window/

Regards,

Mark

Hi Mark, are you using Jetpack? Could you disable the module called Photon for a minute and check your site again? Somehow, that module seems to not only replace the inserted 500px versions but also the links… I don’t know how this is happening (I use Jetpack with Photon enabled on many sites but have not seen this behavior before) but I suspect disabling that module will solve the issue.

By Post Author

Replying to below (there was no button)
Yes! Deactivating Photon resolved the issue for now.

Although I’m sold on cdn’s I was a bit skeptical about using Photon just imagining adding a layer of complexity to (possibly) change image names, etc. Let us know about changes, fixes, etc.

Thanks as always,
Mark

Although I’m sold on cdn’s I was a bit skeptical about using Photon just imagining adding a layer of complexity to (possibly) change image names, etc. Let us know about changes, fixes, etc.

Like I said, I have not seen Photon behave this way before so do not expect a fix coming from me. I have no idea why that is happening on your site.

when I insert the images into a post I still have to manually resize the image to 500px

Did you follow my suggestion to define this 500px limit for either the medium or large size on Settings > Media? If so, WordPress should create a re-sized version automatically right after uploading and you should choose that version (medium or large, whatever you decided) when inserting the image into your post. If WordPress is not doing that, it might indicate some problem with your installation or maybe the theme is doing something out of the ordinary. Maybe even related to the issue with Photon you are experiencing…

By Post Author

p.s. – fyi, thought I would mention, with Photon off, still regardless of the settings when I insert the images into a post I still have to manually resize the image to 500px. That’s ok with me, the issue with fancybox has been resolved for now!

Mark

Hi Ravan,

Yes, at this point it’s safe to say there is indeed some problem going on. Although it must be said that aside from this issue there’s not been a problem with the installation or the theme, and the theme developers (Themezilla) sell a lot of really good themes to users and developers.

To answer your question, yes, I did follow your suggestion to check the box in settings>Media that is supposed to resize the image not for ultimate display in fancybox, but for placement in the page. Which in my installation, is not happening even though I’ve checked and rechecked those settings.

Somewhere else I can’t find now, there’s another setting or settings for thumbnail, medium and large sizes for the image that I can see once I’ve chosen the images and uploaded them and before I click to insert them. It’s a pulldown menu of 3 choices and I can’t change them and can’t find the settings.

Whatever is going on, when I go to Appearance>Easy Fancybox in my installation, the admin page there is now blank, which must indicate some problem:
http://sfsthetik.com/wp-admin/themes.php?page=easy-fancybox

I don’t know if you have settings for image sizes there or not. I’ve checked and rechecked and it’s not the theme. I can’t find anywhere else in WordPress at the moment where those settings are. I’ve been searching for a light-color-fancy-box solution for almost a year that works. I like Easy Fancybox more than the others and you folks are awesome about support. I appreciate the time you’ve devoted to this.

Mark

To answer your question, yes, I did follow your suggestion to check the box in settings>Media that is supposed to resize the image not for ultimate display in fancybox, but for placement in the page. Which in my installation, is not happening even though I’ve checked and rechecked those settings.

To be very clear: on Settings > Media you see “Image sizes” at the top. There you can limit “Medium size” and “Large size” values. You should not have to check any checkbox. These settings are not part of my plugin but of the WordPress core. If WordPress is not creating various image size versions during upload, there is something going wrong (or it might be intended) which you can debug by switching off all plugins and moving to the default Twenty Twelve theme. Then try uploading and inserting an image to see if you have the option to insert a Medium size version. If still not the case, your server might be using an older PHP version without the GD image resizing libraries isntalled.

Whatever is going on, when I go to Appearance>Easy Fancybox in my installation, the admin page there is now blank, which must indicate some problem:
http://sfsthetik.com/wp-admin/themes.php?page=easy-fancybox

No, that blank page is not an indication of anything wrong… it’s supposed to be blank. Or alt least for now: It’s currently under development (you have the development version installed) but nothing is visible yet but it will house FancyBox settings in the next release. The options are still under the FancyBox section on Settings > Media.

By Post Author

As you can see by looking at the code, those settings are again forcing the image to be resized and scaled to those settings. Part of the confusion on my part is/was that it seems to be a two part process: scaling/resizing for insert in the page, which has to be 500 px max, then, scaling to a larger size or not scaling it at all for display in the box.

if you wanted a login let me know.

Thanks for the plugin.

I’m trying to do inline text inside a Page:

...inline content here...

&lta href="#fancyboxID-1" rel="nofollow">Read my inline content&lt/a>

I copy pasted the above and when I save and try it out, a fancy box appears but with the full page.

I looked in the source code and my url #fancyboxID-1 is changed to http://mywebsite.com/#fancyboxID-1.

Any idea what I can do to fix this?

have a look: http://lamsocialclub.com/about/team

click on my photo: Giovanni Dubois

Thank you!

Giovanni

Hi Giovanni, it’s a known conflict with Google Analytics for WordPress by Yoast which seems to prepend these hrefs with their full URL. I don’t know if there is an option in that plugins settings to switch that behaviour off. Yyou could ask the plugin dev Joost de Valk and if there is, please tell me so I can put it in the FAQ’s. But if there isn’t, you’ll need to switch to another Analytics plugin like Google Analyticator…

A big thank you for your great plugin!
Just one question. Is it possible, when the user clicks on the thumbnail to show the Full Size image with FancyBox and not a shrink version of it?

I don’t want the image to fit in the browser window. I want to show the full size.

Is this possible?

thanks in advance

Hi there, I am trying to use fancybox on a site that also uses the post tiles plugin. The idea is that when you click on the post tile it opens the post in fancybox rather than taking you to the post page. I’m not sure if this is possible or where the instruction would have to come from. Do you think this would be possible?

Hi Andy, I have no idea about the tiles plugin but for displaying posts inside a FancyBox, you’ll need to enable iFrame mode and link to these posts using class=’fancybox-iframe’. This means you’ll need to do some serious theme editing. To get this class attributed to the links on your site you’ll probably have to edit some theme template files like index.php, home.php, archive.php, category.php and maybe others. And to get rid of the usual header, sidebar and footer around your posts when showing inside fancybox, you’ll have to edit single.php…

Hi Sridhar, the conflict seems related to the jquery.animate-enhanced from wp supersized and the jquery.easing used in my plugin. Is there an option to disable inclusion of this script in wp supersized? If not, try tweaking the transition effects in the FancyBox settings. Start with Fade which should disable inclusion of jquery.easing…

I set Transition In and Out to Fade.

Now the image appears in the fancybox for a second and disappears.

Tried various other combinations like setting them to None, toggling “Show the overlay around content opened in FancyBox.”, “Transparency fade during elastic transition.” but still no dice.

I will post in WP Supersized forum regarding disabling jquery.animate-enhanced.

Link added to the Plugin Conflicts section under Other Notes. Thanks for sharing!

By Post Author

Hello i need to have a lightbox on a image that exists in one of my pages. This image is added through the html editor in wordpress..

The code is like this :

I have searched the web all around with no luck at all in finding a simple lightbox to work. I dont know if its my theme fault or not.

Can you please explain how to make your FancyBox plugin work for this situation?

Many Thanks!

Hi Jimmy, it seems WordPress ate your code (if you’d like to share code, maybe the plugin support forum on http://wordpress.org/support/plugin/easy-fancybox is a better place) but looking at your site, I notice two things:
1. You are using a theme from Elegent Themes which are notoriously incompatible with FancyBox plugins because they have their own FancyBox version hard-coded in.
2. I see no link to your Youtube movie on your site. You should create a link, not paste the Youtube URL plain because WordPress will convert that to an embedded movie.

Thanks for the reply!

I gave up on getting it to work when I found that reference about Elegant Themes when I saw they are incompatible with FancyBox plugins because they have their own FancyBox version hard-coded in.

Thanks for taking a look!

Strangely enough It works if I set Easy FancyBox to open any YouTube links on any page when they are opened. I didn’t need the video to do that on this page 🙂

You could, of course, use the Elegant Themes own youtube/vimeo class=”et_video_lightbox” for those links and you don’t need my plugin at all…

Thanks for a great plugin. It’s exactly what I was looking for.

However, I am running into an issue. Upon first-time page load, the external website (iframe) opens perfectly in lightbox overlay. However, when it’s closed and if I try to reopen by clicking the hyperlink in the page, it just seems to keep running in an infinite loop without reopening. What am I doing wrong?

Here’s the link of code I am using in my post:

Click Here to View the Opportunity

Thanks for your help.

Hi scriptcoder, you’d need to create a link to that Youtube page and give it a class="fancybox-youtube" attribute.

Hi Ravan,

Need help in showing hidden content in lightbox.

We have placed this code in a text widget: http://pastebin.com/uKsxG63s

at http://obharath.com/demos/htl/

When either the video thumb link or the text link “watch our 1 minute overview video” below is clicked, nothing is happening.

Console shows: “NetworkError: 500 Internal Server Error – http://obharath.com/demos/htl/wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4”

Please advise.

Hi Sridhar, your dynamic stylesheet ( …wp-content/plugins/easy-fancybox/easy-fancybox.css.php?ver=1.3.4 ) seems to suffer a internal server error. Do you have access to error log files and if so, what related error do you see there?

Hello everyone and thank you for this plugin that i find very usefull.

Sorry for my english hope you understand

For a project i am working on, i create a fancybox with a custom registration form (who work with another plugin) . When you confirm the form, it bring you to a new page confirmation but what i want is to use ajax to be redirect to this confirmation page directly in the fancybox with no reloading process.

Is it possible? my experience with ajax and javscript is not top level 😉

Thank you very much

Hi Richard, It all depends on that other plugin that does the registration form… Which one is that?

Hi Raven and thanks for quick reply i use the plugin wp-client;) i hope someone can help me on this. I can give give code by mail

I’m not familiar with that plugin. Sorry. Do they have a support forum where you can ask?

They have a support but no forum . I Ask theM but i must wait and i dont think it Will be one of their priority to solve this particulare issue. I must find a solution for my own client

Hey there, great plugin! I am just having a conflict with NextGen.

At first it was fine, I just disabled the Nextgen effect and it worked all great. But then the arrows dissapeared and I have been testing all I can to get it back to working.

I saw the tip to disable the auto option in fancybox and add the custom code to nextgen, but that did not change anything.

Any help will be much appreciated.

HI There 🙂

Is it possible to have a iframe popup from another iframe popup using ( class=”fancybox iframe”

Its like I have popup page that should lead me to contact form popup page, but it works only on the first page that gets popup …. the other link that should lead to poping up contact page is not reacting … any ideas?

Thanks in Advance 🙂

Hi Sasha, there is only one FancyBox frame at a time possible. You can load different content in sequence into the same frame but not two frames at the same time…

Leave a Reply to RavanHCancel reply

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

%d bloggers like this: