[Resolved] Easy FancyBox limiting SWF dimensions to 700 in Chrome
I am having some SWF dimension issues with my WordPress site in Chrome.
I am using a combination of Easy Fancybox, NextGEN Gallery, NextGEN Custom Fields (to add custom links) and Kimili Flash Embed (to add SWF content to individual pages – not sure if it is necessary but can’t figure out how to do it without it).
It works like a charm in Firefox and Safari but in Chrome it seems to limit the size of the FancyBox overlay to 700x700pxls. I’ve tried everything and am not sure where the break is exactly. If you view the page http://www.ewolfe.net/wpsite/flash in Chrome and click on any of the items in the 2nd row you will see how it cuts them off.
Hi, there are two things playing here:
1. You are using class=”fancybox” which is only for images and inline content but you are linking to pages. Use
2. Fancybox has no way to (reliably) detect the size of iframe content and all frames will be using the default size, which in some cases will clip off large content. If you want to control the frame size on a per-link basis, you need to:
– install the development version of Easy FancyBox and activate the Metadata option; then
– modify the class for each link that needs different size like for example
But I guess if you’r using NextGEN, there is no way to individually adapt the class?
Thanks for the reply!
What’s happening is that I am using NextGEN Custom Fields to make the thumbnail link to a page that has a Kimili Flash Embed tag in it to call up the swf. The tag (below) has the height and width attributes which work fine in all browsers except Chrome. Chrome reads them but clips either dimension to 700px for some reason.
[kml_flashembed publishmethod=”static” fversion=”9.0.0″ useexpressinstall=”true” movie=”http://www.ewolfe.net/portfolio/flash/aspen360_ew2.swf” width=”760″ height=”240″ targetclass=”flashmovie” play=”true” quality=”best” scale=”exactfit” wmode=”direct”]
Chrome reads them but does not pass them from the one page (inside an iframe) over to FancyBox on another page (the parent frame). With good reason because that would strictly speaking be a security vulnerability.
Without this info, FancyBox cannot find a proper size to adapt itself to like it does with images. So it falls back to its default sizes.
Like I said, make these links open in iFrame mode (using class fancybox-iframe) and you should be able to control that default size.
Would it not be easier to link direcly to the swf files and let FancyBox handle the embedding? No need for separate pages with any embed shortcode then.
Let’s take the first one of the second row, for example. Paste the following code on a test page.
<a href="http://www.ewolfe.net/wpsite/wp-content/uploads/2012/05/doughnation.swf" title="Virtual city UI to choose donation recipients for BreadVault"><img title="doughnation" alt="doughnation" src="http://www.ewolfe.net/wpsite/wp-content/gallery/flash/thumbs/thumbs_doughnation.jpg" width="200" height="145" /></a>
Here you see that the link goes straight to the flash file instead of to a page where that file is embedded. You’ll still have to configure an appropriate default size for Flash on your Settings > Media admin page though…
Test that and if it works, configure NextGEN to link to the files directly instead of the embed pages.
I did try to link directly to the file in NextGEN and it works (check the DoughNation example on http://www.ewolfe.net/wpsite/flash) but I still don’t know how to get it to honor the dimensions. Basically, I am not sure how to apply the fancybox-iframe class.
The page that loads the NextGEN gallery for that page simple has “[nggallery id=7]” and the actual gallery page where I populate the gallery simply has the path to the swf (http://www.ewolfe.net/wpsite/wp-content/uploads/2012/05/doughnation.swf).
Where do I apply the class?
Sorry this is getting a bit confusing. I suppose you followed the NextGEN instructions on http://wordpress.org/extend/plugins/easy-fancybox/faq/ under Will a NextGen gallery be displayed in a FancyBox overlay ? … Well, those instructions are for normal cases where a NextGEN gallery shows images. In your case, you are using NextGEN for something else.
You’ll need to adapt that code given there appropriately. And what you need to change, depends on the approach you’re going to take.
If you want to stick with linking to these pages where the flash file is embedded, then remove the ‘rel’ from that code and change the class like so:
But if you want to take the more direct approach of linking to the flash files directly, then just undo all the steps and remove all code. Then start linking them all to their flash files like you did with the 4th one…
I would take the second approach because there, the flash file will adapt to the frame size and you’ll not need to worry about clipping.
I appreciate you taking your time to help me here. I am clearly just enough of a noobie to be a danger to myself and to WordPress in general.
I still don’t quite understand.
You mentioned that if I wanted to continue to link to the page where the swf is embedded that I should remove the ‘rel’ from the code and change the class. What exactly do you mean by that? Where would I find that code?
I tried linking directly to the swf but it doesn’t detect the size. What do you mean remove ALL of the code.
Thanks for your patience.
Don’t worry. We all try and learn 😉
What I’m trying to explain is that you do not need so many plugins to get the result you want. Only Easy FancyBox, an image that will serve as thumbnail and an SWF file…
1. Go to Settings > Media and change the Thumbnail size there to Width 200 and Height 145 (corresponding with the thumbnail sizes you are using now or whatever other size you like, you’ll only have to do this once)
2. On that same page under the FancyBox settings activate SWF (you’ve already done that) and scroll down to the SWF section and give it the default size you need your movies to play in.
The steps to insert a movie:
1. Open a (new) page for editing and use the Add Media button to upload the SWF file to your media library. But instead of inserting the file into the page after uploading, just select Link to: Media file on the bottom/right and copy the file location that you see there.
2. Then upload the image (original size does not matter, there will be a thumbnail created automatically) that you want to use as thumbnail and give it these settings:
– Title: (a short title you want)
– Caption: (the description you want to show below the thumbnail)
– Align: left
– Link to: Custom URL and then paste the swf file location you copied before in the field below it
– Size: Thumbnail
And then hit Insert.
You should end up with something like http://demo.status301.net/easy-fancybox-sandbox/pop-flash-fizz/
All this does not involve any other plugins. And disabling plugins that you do not use will benefit the speed of your site 🙂
I like the idea of eliminating unnecessary plugs but I really live the NexGEN gallery plugin. My site pretty much revolves around it. That is a bummer. The whole point of doing my site in WP was to make it easy to upload new work and manage the galleries (since it’s a portfolio site). Do you think that is the part that is giving me grief? It works great in other browsers and works fine in Chrome except for the clipping of swf files.
I am wondering if there is just a conflict with JS script callouts. I know at one point I tried the Use Google Libraries plugin and suddenly (in Chrome) the swf files, in addition to clipping, would not close when clicking on the close button or outside the image, nor would it advance when clicking on the next and back arrows. Disabling the plugin fixed it immediately. Weird, huh?
Also, with the method you suggested, where would I specify the dimensions?
Yes, weird… In any case, using many plugins together usually causes some level of conflict. It’s only natural. But if NextGEN is important on your site, by all means keep it activated 🙂
Also, with the method you suggested, where would I specify the dimensions?
The SWF dimensions can be set under the SWF section on Settings > Media (if you have enabled the SWF option) and be sure to select the auto-detect swf links option.
at this time but you need to remove that…
I already had the Settings > Media SWF option set to auto-detect but it isn’t working.
1. On regular galleries (the non-flash ones) I lost the next and previous arrows.
Switch the auto-gallery option under the Image & Inline content to “All”.
2. The links on the flash gallery opened the swfs into a blank page (not the lightbox).
Did you change the links to point the the .swf files directly instead of to the worpress pages where you embedded them?
- The topic ‘[Resolved] Easy FancyBox limiting SWF dimensions to 700 in Chrome’ is closed to new replies.