WordPress.org

Support

Support » Plugins and Hacks » [Resolved] [Plugin: Easy FancyBox] Multiple sizes of iframes / swfs in one page solution!

[Resolved] [Plugin: Easy FancyBox] Multiple sizes of iframes / swfs in one page solution!

  • Hi,
    I found a simple fix of how to place multiple iframes / swfs with diffrent sizes on the same page.
    just wrap the .fancybox(…) function with an .each() function. example:

    The (wrong) way that used in Easy FancyBox 1.3.4.9

    /* SWF */
    $('a.fancybox-swf, area.fancybox-swf').fancybox(
    	$.extend(
    		{},
    		fb_opts,
    		{
    			'type' : 'swf',
    			'width' : 200,
    			'height' : 200,
    			'padding' : 0,
    			'autoScale' : false,
    			'titleShow' : false,
    			'titlePosition' : 'float',
    			'titleFromAlt' : false,
    			'swf' : {
    				'wmode':'opaque',
    				'allowfullscreen':true
    			}
    		}
    	)
    );

    The Fix (notice the new .each() function):

    $('a.fancybox-swf, area.fancybox-swf').each(function() {
    	$(this).fancybox(
    		$.extend(
    			{},
    			fb_opts,
    			{
    				'type' : 'swf',
    				'width' : 200,
    				'height' : 200,
    				'padding' : 0,
    				'autoScale' : false,
    				'titleShow' : false,
    				'titlePosition' : 'float',
    				'titleFromAlt' : false,
    				'swf' : {
    					'wmode':'opaque',
    					'allowfullscreen':true
    				}
    			}
    		)
    	);
    });

    The same could be fixed with any type of fancybox. (iframe, swf, youtube…)

    I hope you will add this fix in the next version.
    Thanks alot!

    http://wordpress.org/extend/plugins/easy-fancybox/

Viewing 15 replies - 1 through 15 (of 30 total)
  • Plugin Author RavanH

    @ravanh

    Hi Elron, thanks for sharing your solution/fix for this issue. I will consider it for the next release.

    Do you know if/how this would affect performance on pages with many fancybox links?

    No, i dont know but here’s an example of how i use it in my client site.
    It works fine on all the browsers. (even ie7+)

    Your plugin is great!
    Many thanks.

    Im very, very new to wordpress and I have been having real problems with multiple swf files on one page. The solution above looks like one I have been looking for but for the life of me, I cannot find where to find the script above, within my wordpress easy-fancybox install.

    Any help with file names as to where place/edit the above, would be very much appreciated.

    Thanks in advance.

    Hey dazfaz,
    I recommend just add the script manuelly into the Header.php of your theme. You can use my code (add to to a jquery wrapping script), and all thats left for you to do is use the links of the SWF like this:

    <a class="fancybox-swf {width:195,height:205}" href="your-swf-file.swf">Click me to open the SWF!</a>

    You can set the width and height of your choice.

    Good luck!

    (Btw, my example link is broken. Here’s the new link to the example)

    Hi Elron,

    Thanks for getting back to me. I followed your instructions (as well as I understand that is) and I copied your code into the header.php, right at the top of my theme. It then returned:

    PHP Parse error: syntax error, unexpected ‘(‘, expecting T_VARIABLE or ‘$’ in X:\XXX\XXX\wwwroot\XXX\wp-content\themes\absolum\header.php on line 6

    on line 6 we have:

    $(‘a.fancybox-swf, area.fancybox-swf’).each(function() {

    Any help would be appreciated.

    Dazfaz

    Take note that the code I wrote is written in Javascript,
    so you need to wrap it with jQuery script. It’s not PHP.

    <script type="text/javascript">
    // as the page loads, call these scripts
    jQuery(document).ready(function($) {
    
    	// Place the code here...
    
    });
    </script>

    Place this code before </head>

    Thanks for all your help Elron.

    I have put:

    <script type="text/javascript">
    // as the page loads, call these scripts
    	jQuery(document).ready(function($) {
    
    		$('a.fancybox-swf, area.fancybox-swf').each(function() {
    			$(this).fancybox(
    				$.extend(
    					{},
    					fb_opts,
    					{
    						'type' : 'swf',
    						'width' : 200,
    						'height' : 200,
    						'padding' : 0,
    						'autoScale' : false,
    						'titleShow' : false,
    						'titlePosition' : 'float',
    						'titleFromAlt' : false,
    						'swf' : {
    							'wmode':'opaque',
    							'allowfullscreen':true
    						}
    					}
    				)
    			);
    		});
    
    	});
    </script>

    Just before the </head> tag but its still not working.

    Any further help would be appreciated

    Plugin Author RavanH

    @ravanh

    Hi dazfaz,

    Elron’s fix has been implemented in the development version: http://downloads.wordpress.org/plugin/easy-fancybox.zip

    Uninstall the current version from your WP installation and then install this one by uploading the zip via the WP plugin installer 🙂

    Thanks Ravan i appreciate that. 🙂

    Hi Elron,

    Thanks for all your help.

    Hi RavenH,

    I have followed your instructions but now the windows that open appear to be reverting to the default window size of 560×340, even it I set fancybox-swf {width:456,height:60}, for example, within the “Advanced Link Settings–>CSS Class”.

    Thanks in advance.

    RavenH,

    Do you have any suggestions on what the problem might be and if there is a solution?

    Thanks again.

    RavenH,

    I have had to revert back to version 1.3.4.9 as the version 1.3.4.10 messed up all the iframe settings and didnt work with multiple swf files either.

    First of all, I reccomend you reinstall the plugin and try again.
    If it still does’nt work then tell us.

    Hi Elron,

    If you read up I did actually do this, uni-stalled the previous version then installed the fancy-box plugin that Raven so kindly gave a download too.

    As you will read further up again, this then caused any swf related widow to open at the default size of 560×340 ignoring any fancybox-swf CSS sizes that I passed e.g. fancybox-swf {width:456,height:60}.

    I then looked at any iframe’s that I had on other pages and these too were opening at the default size of 560×340 and again ignoring fancybox-iframe {width:400,height:60}.

    So I then reverted back to the version that was, at the least, working for the correct iframes sized windows.

    Thanks for all your help with this matter.

    Plugin Author RavanH

    @ravanh

    dazfaz, do you have a link to a site with the dev version installed where you can see the issue occurring? Or a link to your SWF file and the embed code that you are using in your post/page so I can try tor reproduce the issue…

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘[Resolved] [Plugin: Easy FancyBox] Multiple sizes of iframes / swfs in one page solution!’ is closed to new replies.