WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery Optimizer
[resolved] youtube (6 posts)

  1. stefsegers
    Member
    Posted 1 year ago #

    Hi guys,

    I am trying to place a youtube video on my page with a fancybox link.
    When I add the class="myfancybox" like the gallery items I get only a beach ball but no pup up with my youtube video.

    I know that it's possible but can't seem to find out how.

    Also I emaild mark about it since I bought a licence of the plugin but there's no reply at all :(

    I do hope anybody can help me out here?

    http://wordpress.org/extend/plugins/nextgen-gallery-optimizer/

  2. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Stefan,

    Thanks for downloading NextGEN Gallery Optimizer Premium!

    Apologies for the delay, I've been away with limited Internet access.

    Although Fancybox is technically able to display YouTube videos, both Optimizer and NextGEN Gallery itself are not designed for this purpose out-of-the-box. However, I've been testing your source code (re: site link from your email), and I've managed to come up with a solution for you.

    Firstly, you're going to need to disable the optional Rocket Loader service provided by CloudFlare which is currently active on your site (it should be under Performance Settings in your CloudFlare admin). It's rewriting your scripts and causing jQuery to break.

    Secondly, you'll need to add the class="myfancybox" to each video link anchor tag as you mentioned you'd tried above eg...<a class="myfancybox" href=

    Thirdly, I've pieced together a custom Fancybox invocation script for Optimizer that will look for your YouTube links and load the appropriate video inside the lightbox. To install this, you'll need to open wp-content/plugins/nextgen-gallery-optimizer-premium/nextgen-optimizer-premium-scripts-and-styles.php and replace the "fancybox inline js" section (at the top) with the following...

    /**********************************************************************
    * fancybox inline js
    **********************************************************************/
    
    function nggop_fancybox_inline_js() { ?>
    <!-- [nextgen gallery optimizer premium v<?php echo NGGOP_VERSION; ?>] This page must contain a nextgen shortcode...else we wouldn't be serving its scripts and styles -->
    <script type="text/javascript">jQuery.noConflict();jQuery(document).ready(function(){jQuery("a.myfancybox").click(function(){jQuery.fancybox({'hideOnContentClick': false, 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', 'width': 640, 'height': 390, 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 'type': 'swf', 'swf': {'wmode': 'transparent', 'allowfullscreen': 'true'} }); return false; }); }); var timer; jQuery(window).resize(function() { clearTimeout(timer); timer = setTimeout(jQuery.fancybox.browser_resize, 500); });</script>
    <?php
    }

    Hope this helps!

    Cheers,
    Mark.

    PS. I'm not currently seeing any NextGEN scripts on your homepage (re: your email), so it would seem Optimizer is taking care of these correctly. It's possible you may have been viewing a cached version of the page served by CloudFlare, which has since been updated.

  3. stefsegers
    Member
    Posted 1 year ago #

    Hi Mark,

    This looks really great and that you for that code. It works great on my video page.
    Only one problem found on these pages
    http://www.trouwshoot.nl/fotoalbum/exclusieve-digitaal-fotoalbum/
    http://www.trouwshoot.nl/fotoalbum/traditioneel-fotoalbum/
    http://www.trouwshoot.nl/fotoalbum/basic-digitaal-fotoalbum/

    For some reason it doesn't work over here.
    Maybe the fancybox script isn't loaded on that page at all?

  4. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Stefan,

    I've been looking through the source code of your three other pages, and you seem to be hard-coding images stored in the WordPress uploads directory (wp-content/uploads) in your posts. Optimizer is specifically designed to work with NextGEN Gallery, and will only load Fancybox's scripts and styles if it finds a NextGEN shortcode in a post/page...

    That said, if you'd rather keep your current arrangement, it is possible to customize Optimizer to conditionally load Fancybox where you'd like. Also, as you're using both regular images and video on each page, we'll also need to combine both the original invocation code, and my mod above in each page. You can then differentiate between the two by changing your links to use <a class="myfancyboxvideo" href= for your videos, and keep <a class="myfancybox" href= for the images. You'll also need to link up your images to the larger version for them to display in the lightbox. Here we go...

    Once again, simply replace the "fancybox inline js" section at the top of wp-content/plugins/nextgen-gallery-optimizer-premium/nextgen-optimizer-premium-scripts-and-styles.php with the following. This time we'll add two functions, one to conditionally load the necessary scripts on all WordPress "Pages" as your site appears to require, and the second to open both images and videos inside the Fancybox lightbox.

    /********************************************************************************
    * optimizer premium custom function...load fancybox on all wordpress pages
    ********************************************************************************/
    
    function nggop_load_fancybox_on_all_pages() {
    
     	if (!is_admin()) {
     		if (is_page()) {
    
    		global $post;
    		global $nggop_options;
    
    		if (have_posts()) {
    			while (have_posts()) {
    				the_post();
    
    					if (isset($nggop_options['fancybox']) && ($nggop_options['fancybox'] == true)) {
    
    						// see scripts-and-styles.php for functions
    						add_action('wp_enqueue_scripts', 'nggop_load_jquery', 1000);
    						add_action('wp_enqueue_scripts', 'nggop_load_fancybox_scripts', 1000);
    						add_action('wp_print_styles', 'nggop_load_fancybox_styles', 1000);
    						add_action('wp_head','nggop_fancybox_inline_js', 1000);
    
    					}
    
    					add_action('wp_print_styles', 'nggop_load_nextgen_styles', 1000); // see scripts-and-styles.php for function
    
    				}
    			}
    		}
    	}
    }
    add_action( 'wp', 'nggop_load_fancybox_on_all_pages' );
    
    /********************************************************************************
    * optimizer premium fancybox inline js...customized to load both images & youtube videos
    ********************************************************************************/
    
    function nggop_fancybox_inline_js() { ?>
    
    <!-- [nextgen gallery optimizer premium v<?php echo NGGOP_VERSION; ?>] This page must contain a nextgen shortcode...else we wouldn't be serving its scripts and styles -->
    <script type='text/javascript'>jQuery.noConflict(); jQuery(document).ready(function() { jQuery('a.myfancybox').fancybox({ 'zoomSpeedIn':500, 'zoomSpeedOut':500, 'overlayShow':true, 'overlayOpacity':0.3 }); }); var timer; jQuery(window).resize(function() { clearTimeout(timer); timer = setTimeout(jQuery.fancybox.browser_resize, 500); });</script>
    <script type="text/javascript">jQuery.noConflict();jQuery(document).ready(function(){jQuery("a.myfancyboxvideo").click(function(){jQuery.fancybox({'hideOnContentClick': false, 'autoScale': false, 'transitionIn': 'none', 'transitionOut': 'none', 'width': 640, 'height': 390, 'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'), 'type': 'swf', 'swf': {'wmode': 'transparent', 'allowfullscreen': 'true'} }); return false; }); }); var timer; jQuery(window).resize(function() { clearTimeout(timer); timer = setTimeout(jQuery.fancybox.browser_resize, 500); });</script>
    
    <?php
    }

    Hope this helps!

    Cheers,
    Mark.

  5. stefsegers
    Member
    Posted 1 year ago #

    Hi Mark, thanks for the great update of your plugin. Maybe it's an idea to make to update final in a new version?

    It looks like it's working :)

    Keep up the good work and thanks again.

  6. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    Hey Stefan,

    No worries. Great to hear this video/image mod is working well for you! Since it's a pretty extreme custom modification with hardcoded elements, I don't think it'll make it into Optimizer's core...but it's great to have explored what's possible.

    All the best,
    Mark.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic