WordPress.org

Forums

Easy FancyBox
[resolved] Easy FancyBox not showing YouTube videos (29 posts)

  1. mikdog
    Member
    Posted 3 years ago #

    I have Easy FancyBox working well site-wide. However, I cannot get the videos (at the bottom of the page) to play in a lightbox.

    http://www.mikescottanimation.com/work

    I know the plugin works as clicking on the YouTube link here brings up the video in a frame:

    http://www.mikescottanimation.com/2011/fedde-le-grand-remixed-my-video

    Any ideas? Thanks, great plugin btw.

  2. mikdog
    Member
    Posted 3 years ago #

    Anybody?

  3. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    First, you need to activate the Youtube option under Settings > Media > FancyBox ...

    Another problem might be the prettyPhoto script that is included in your theme and running on the same site. Either deactivate it or if you use it for images, disable the Images option in the FancyBox settings. Running both lightbox scripts for the same media is asking for trouble ;)

  4. mikdog
    Member
    Posted 3 years ago #

    Hi RavanH.

    Thanks for the reply.

    When I activate the YouTube option (have played with a number of the YouTube settings) then clicking on the YouTube thumbnail does nothing, and also seems to disable the script so that image galleries can't be opened. Disabling the YouTube option takes the user straight through to the YouTube page when clicked.

    Have disabled PrettyPhoto ... I only have Easy Fancybox running site-wide as far as I can tell. I don't understand why this wouldn't work?

  5. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    As far as I can tell, the Youtube option is still not active on your site and on http://www.mikescottanimation.com/work I still see the prettyPhoto script running...

    No way for me to debug without Youtube enabled in FancyBox.

  6. mikdog
    Member
    Posted 3 years ago #

    Hmm...thanks for letting me know. I'll have to figure out how to deactivate PrettyPhoto more.

    I've enabled the YouTube auto-link pick-up in Easy FancyBox now.

    Thanks again.

  7. mikdog
    Member
    Posted 3 years ago #

    Hi, any luck? Have even renamed the 'jquery.prettyPhoto.js' file in my theme's includes folder to 'old_jquery.prettyPhoto.js' but still no luck.

    Here is my portfolio.js page:

    http://pastebin.com/s4JVLzeA

  8. mikdog
    Member
    Posted 3 years ago #

    Hi,

    Man, been fiddling with no such luck. I somehow think the PrettyPhoto script is disabled, but the way the portfolio module works, Canvas may automatically be putting 'prettyphoto' links around the youtube video code or something. What do you think? Is Easy FancyBox not picking up the links? It picks up regular links in a post, say, and works. But not in this portfolio page. Any help / advice you have would be great, thanks.

  9. mikdog
    Member
    Posted 3 years ago #

    Hi, apparently this syntax error comes up when clicking on the portfolio item:

    http://cl.ly/201v1W0w0r1a2Y1c3f1t

    Any use?

    Thanks,

    Mike

  10. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Yes, was just looking at that same error in my debug terminal output. It seems jQuery / FancyBox seems to trip over the square brackets in the rel attribute. Thinking it is to be seen as regular expression or something...

    It does not matter if youtube auto-detection us used or if you stricklty use class="fancybox-youtube" so I'm not sure where the error actually occurs. Will do some testing with square brackets in rel attributes.

    In the mean time, is there any way for you to NOT use rel attributes on those youtube links? The image links are fine with the rel attributes, just not the youtube ones...

  11. mikdog
    Member
    Posted 3 years ago #

    Hi RavanH,

    I have asked on the Canvas forums about this:

    http://forum.woothemes.com/topic.php?id=50421&replies=5#post-231365

    If you can't view this (I think you need a username and password) please let me know and I'll email you some details. If its worth your while you might like to have a look inside my wordpress installation. I'm not quite sure how I'd not use rel attributes for the link. Here's the input fields I have available for the video embed on the portfolio page:

    http://www.bruandboegie.co.za/random/inputfields.jpg

  12. mikdog
    Member
    Posted 3 years ago #

    Hi,

    Interestingly I installed the OrangeBox plugin and it picks up the videos. Its running on my page at the moment.

    So, any way to get Easy FancyBox to pick up those links? I'd MUCH rather have Easy Fancybox working site-wide instead of a bevvy of lightbox plugins, each of which only slightly work for some things and not for others.

    Thanks,

    Mike

  13. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    It seems I cannot access the Woothemes forums but as I understand it, you do not have much control (like rel attributes) over how the theme inserts the links in the end.

    Although FancyBox does pick up the Youtube links, as soon as one gets clicked, it (or jQuery) trips over those square brackets in the rel attributes. I'll be doing some tests soon on my own site to see if I can find out more and if there is a way to get around it. Can I contact you if I need more info?

    When I find a fix, it will be in the next release. Up till then you might want to stick to Orangebox for displaying the youtube movies...

  14. mikdog
    Member
    Posted 3 years ago #

    Yeah, sure, please contact me. I've been trying to get this fixed for days on end. Its really the only thing keeping me from getting my site fully-functional. OrangeBox works OK, but it doesn't auto-pick up a lot of stuff like my galleries in single posts, and having both FancyBox and OrangeBox running at the same time brings up two image galleries in the portfolio module, so I'd REALLY like to get Easy FancyBox working with my videos too.

    Here's hoping for an update soon! I'll have FancyBox running with the YouTube clicks going through the YouTube page for now.

    Ta,

    Mike

  15. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Did some tests and was able to reproduce the issue. As far as I can tell now, it's not something that is limited to my plugin but related to the main FancyBox script. It happens using both the new 1.6.1 and the old 1.4 jQuery libraries. I have not tested with older FancyBox versions.

    To get other input, I've posted on the FancyBox forum: http://groups.google.com/group/fancybox/browse_thread/thread/31c51cf1cd4c0592

    Thanks Mike, for reporting this issue :)

    Hope to learn more soon...
    Allard

  16. mikdog
    Member
    Posted 3 years ago #

    Hey Allard,

    Thanks for the report back. Please let me know if you turn up anything.

    Patiently awaiting any news.

    Thanks,

    Mike

  17. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Mike, could you please test a patched version of the fancybox script file for me?

    Download http://plugins.svn.wordpress.org/easy-fancybox/trunk/fancybox/jquery.fancybox-1.3.4.pack.js (right click > Save as...) and overwrite your current /wp-content/plugins/easy-fancybox/fancybox/jquery.fancybox-1.3.4.pack.js file with it.

    Let me know the result :)

  18. mikdog
    Member
    Posted 3 years ago #

    Hey thanks will try this now.

    I JUST got it working by doing this, as pointed out on the canvas forums:

    --

    Hi Mike,
    I've read the thread over at WP.org and noticed the developer is trying to fix this issue.
    At the mean time, you can edit includes/theme-functions.php and change:
    // Set rel on anchor to show lightbox
    $rel = 'rel="lightbox['. $id .']"';
    to
    // Set rel on anchor to show lightbox
    $rel = '';
    Cheers,
    Tiago

    --

    Will try the new file now,

    Thanks,

    Mike

  19. mikdog
    Member
    Posted 3 years ago #

    Yep, new script seems to work well!

    Thanks again!!! That's awesomeness.

  20. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Excellent!

    You can keep using the patched file. It will be in the next release too.

    Thanks for reporting this issue and testing the patch. :)

  21. mikdog
    Member
    Posted 3 years ago #

    Hi,

    So, not all too well in the land.

    How do I disable Easy FancyBox ONLY in the portfolio section?

    In the portfolio section now the categories don't work:

    http://www.mikescottanimation.com/work

    And as you can see there are far too many thumbnails in the single post for the portfolio:

    http://www.mikescottanimation.com/portfolio-items/2007-2-bru-boegie-comics

    I think I may just have PrettyPhoto on the portfolio page and Easy FancyBox everywhere else. Possible?

  22. mikdog
    Member
    Posted 3 years ago #

    I should probably add, the category issue was probably prevalent in the old version of the script too, I just didn't test it until now. Same with the single page portfolio view.

    If you think you know the answer to how to get it working that'd be great, otherwise not to worry, I think you've already spent quite a bit of time on this and I'm very grateful. If, however, you know how I'd disable easy fancybox on a particular page (this case, portfolio) that would be super.

    Thanks again for all your help,

    Mike

  23. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    If you disable Easy FancyBox completely, do the categories in the portfolio work correctly then?

  24. mikdog
    Member
    Posted 3 years ago #

    Hi RavanH,

    Thanks for the reply.

    Have disabled Easy Fancybox completely but not working.

    Normally, with PrettyPhoto enabled its supposed to work like this:

    http://www.thekiffness.com/portfolio

    (interestingly, LightBox Plus is also installed on this kiffness site but doesn't seem to conflict from a user pov I think)

    I think the categories sorting may be a function of PrettyPhoto. So, with it disabled perhaps its not able to function correctly. I haven't really changed too much code with the portfolio stuff, just commented out 3 lines I think as per Woo's suggestions to disable it, but I'll try uncommenting them and see if things work.

  25. mikdog
    Member
    Posted 3 years ago #

    Re-enabling this line of code:

    wp_register_script( 'prettyPhoto', get_template_directory_uri() . '/includes/js/jquery.prettyPhoto.js', array( 'jquery' ) );

    In my canvas/includes/theme-js.php file got the categories working again.

  26. mikdog
    Member
    Posted 3 years ago #

    Also, re-enabling that line of code seems to have sorted out the single page post.

    I've probably got errors happening like crazy in the background, but it seems to work ok for now.

    Thanks,

    Mike

  27. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Strange. The function that actually controls the portfolio categories is in http://www.mikescottanimation.com/wp-content/themes/canvas/includes/js/portfolio.js ... maybe that one is not icluded when prettyPhoto is not included? You can check that by looking at the last parameter of the wp_register_script call that handles the portfolio.js inclusion. It probably says something like array('prettyPhoto','jquery'). I suspect you can remove prettyPhoto completely (improves page speed, if you're not using it at all on the site) this way:

    Comment out the prettyPhoto inclusion line again and remove that 'prettyPhoto', (but leave 'jquery', or replace it with that) from the portfolio.js dependencies set on that last parameter in the portfolio.js inclusion line. Then edit the file canvas/includes/js/portfolio.js so that prettyPhoto function $("a[rel^='lightbox']").prettyPhoto(); is not used anymore. Which, I see, has already been done :)

    The suggestion above is not strictly necessary, it should just remove one of the many js libraries from loading on each page request...

    Anyway, good to hear it works :)

  28. mikdog
    Member
    Posted 3 years ago #

    Phew!

    It took me reading and re-reading your post about 20 times, slower each time, to figure out what it meant (I'm not a coder in the least sense.)

    Finally figured out what you meant though by means of trial and error, and hey hey hey it works! I commented out that line that I re-enabled a post or two back, and deleted 'prettyphoto' from this last part:

    wp_register_script( 'portfolio', get_template_directory_uri() . '/includes/js/portfolio.js', array( 'jquery', 'prettyphoto', 'jCarousel', 'widgetSlider' ) );

    (At least I think that's what you meant).

    Works well. Thanks man, for all the help. So far so good. Seeing the light at the end of the tunnel, hopefully. Going to post this update on the Canvas forums.

  29. RavanH
    Member
    Plugin Author

    Posted 3 years ago #

    Mike, that is exactly what I meant :) sorry for the confusing explanation and my congrats on your success in spite of that: great work!

    One more suggestion: you might try to look for a line in any of the theme's functions.php files (I notice there are more that that usual 1 in the theme root dir) where it says something like

    wp_enqueue_style('prettyPhoto', get_template_directory_uri() . '/includes/css/prettyPhoto.css');

    This line takes care of inclusion of the prettyPhoto stylesheet which (I suspect) you don't need any more too. Just to save you some more bandwidth ;)

    Good luck!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic