WordPress.org

Ready to get started?Download WordPress

Forums

Easy FancyBox
[resolved] Multiple sizes of iframes / swfs in one page solution! (31 posts)

  1. Elron
    Member
    Posted 1 year ago #

    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/

  2. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  3. Elron
    Member
    Posted 1 year ago #

    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.

  4. dazfaz
    Member
    Posted 1 year ago #

    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.

  5. Elron
    Member
    Posted 1 year ago #

    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)

  6. dazfaz
    Member
    Posted 1 year ago #

    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

  7. Elron
    Member
    Posted 1 year ago #

    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>

  8. dazfaz
    Member
    Posted 1 year ago #

    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

  9. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    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 :)

  10. Elron
    Member
    Posted 1 year ago #

    Thanks Ravan i appreciate that. :)

  11. dazfaz
    Member
    Posted 1 year ago #

    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 560x340, even it I set fancybox-swf {width:456,height:60}, for example, within the "Advanced Link Settings-->CSS Class".

    Thanks in advance.

  12. dazfaz
    Member
    Posted 1 year ago #

    RavenH,

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

    Thanks again.

  13. dazfaz
    Member
    Posted 1 year ago #

    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.

  14. Elron
    Member
    Posted 1 year ago #

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

  15. dazfaz
    Member
    Posted 1 year ago #

    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 560x340 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 560x340 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.

  16. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    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...

  17. dazfaz
    Member
    Posted 1 year ago #

    Hi RavenH,

    I have created a page that has 2 swf linked files and this can be found:

    http://www.cogencymedia.co.uk/DesignDevelopmentMarketing/index.php/swf-test-page/

    Thanks again for all your help as it really is very much appreciated.

    DazFaz

  18. ber66
    Member
    Posted 1 year ago #

    i tried to use this plugin, but the same effect of dimension problem happened to me.
    I use both versions. After reinstal to v.1.3.4.10 it seem to ignore dimensions i put in page code. In v.1.3.4.9 was including only first dimensions in well known problem. :( I see there v.1.3.4.10 isn't yet official

  19. dazfaz
    Member
    Posted 1 year ago #

    Hi Ber66,

    I have given up trying to use either version for the time being and just embedded the swf objects into the page. Not the best solution but at least visitors to my site can actually see something.

  20. dazfaz
    Member
    Posted 1 year ago #

    And just as a foot note, I noticed at the top of the post its states [resolved] but it hasn't been for me. But Im sure the guys who created the plugin will come up with a solution soon enough.

  21. ber66
    Member
    Posted 1 year ago #

    I hoping for that too, cos there's no much of a choice. I'm directly looking for simple plugin or way to play a lot of size-different swf's in some kind of lightbox. And i can't find nothing like that :(

  22. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Hi dazfaz, could you put that test page back up again? I have offline for a while so I missed the opportunity to take a look at it... Thanks!

  23. dazfaz
    Member
    Posted 1 year ago #

    Hi RavenH,

    This has now been put back online as requested.
    http://www.cogencymedia.co.uk/DesignDevelopmentMarketing/index.php/swf-test-page/

    Thanks for all your help with this. For the time being I have embedded the swf files into an actual page on my main site, until a solution can be found.

    Thanks

  24. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    You have class="fancybox swf{width:120,height:300}" but you need to have class="fancybox-swf {width:120,height:300}" (notice the hyphen in fancybox-swf and the space before the first curly)

  25. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Oh, and please clear .SWF and .ASP from the auto-detection field under the Images section because that is strictly for images!

  26. dazfaz
    Member
    Posted 1 year ago #

    Hi RavenH,

    Thanks for the pointers and I have updated the page inline with your tips. The problem now is, well, take a look for yourself.

    Thanks

  27. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    You're still not doing it right:

    (notice the hyphen in fancybox-swf and the space before the first curly)

    So use

    fancybox-swf {width:120,height:300}

    instead of

    fancybox-swf{width:120,height:300}

    Do you see the difference?

  28. dazfaz
    Member
    Posted 1 year ago #

    Hi RavanH,

    Yep, I can see the difference and I have updated the page accordingly.

    At least now the swf files are appearing in the overlay but Im still having the sizing issue.

    Thanks

  29. RavanH
    Member
    Plugin Author

    Posted 1 year ago #

    Yes, the current stable version has a know issue with the metadata extension. All instances of the same media type will take the size of the first one that has metadata set. In your case this means the second one that has {width:300,height:120} still uses the size of the first one which has {width:120,height:300}.

    This is fixed in the development version which has not been marked stable yet but should work none the less. Get it from http://wordpress.org/extend/plugins/easy-fancybox/developers/ (download zip, unpack and upload via FTP) but you'll have to disable the fancybox2 plugin that you are running alongside there. The two cannot live together.

  30. dazfaz
    Member
    Posted 1 year ago #

    Hi RavenH,

    I have disabled the Fancybox2 plugin but I am already running Version 1.3.4.9 which I believe is the link you supplied. Still a resizing issue Im afraid.

    Thanks

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic