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

  • Resolved Elron

    (@elron)


    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.

    dazfaz

    (@dazfaz)

    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.

    Elron

    (@elron)

    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)

    dazfaz

    (@dazfaz)

    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

    Elron

    (@elron)

    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>

    dazfaz

    (@dazfaz)

    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 🙂

    Elron

    (@elron)

    Thanks Ravan i appreciate that. 🙂

    dazfaz

    (@dazfaz)

    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.

    dazfaz

    (@dazfaz)

    RavenH,

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

    Thanks again.

    dazfaz

    (@dazfaz)

    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.

    Elron

    (@elron)

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

    dazfaz

    (@dazfaz)

    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 ‘[Plugin: Easy FancyBox] Multiple sizes of iframes / swfs in one page solution!’ is closed to new replies.