Meteor Slides
[resolved] Using Lightbox Plus video feature with Meteor Slides? (4 posts)

  1. drewmanchu
    Posted 2 years ago #

    I'm curious if anyone knows if it is possible to utilize Lightbox Plus' ability to embed a youtube video into a lightbox with a Meteor Slides slideshow? I'm thinking it would have something to do with altering the class selector to class="lbpModal" but I'm not really sure how or where.

    Here is a link to the live build site: narrativeviewpictures.com/wordpress/why-choose-us

    I'd like the Meteor Slides slideshow (which are linked to youtube videos) to open in a lightbox plus window. Similar to the images just below the meteor slides gallery at the top. Is this even possible, or am I just dreaming?

    I'm not really much of a coder, just trying to do our web building to save some $. With that in mind, please try to keep the response at a novice coder's level.


  2. Josh Leuze
    Plugin Author

    Posted 2 years ago #

    Hi, it is possible to do this with Lightbox Plus, but I don't have a good example to point you to.

    The trick is that you have to use a custom slideshow template. When I did this, I needed just one slide link to load in a lightbox with a video. So I had a conditional check in the template that looked for the slide link URL of the video and on that slide it loaded different markup with a class for the lightbox.

    That bit looks like this, I specified the "lightbox" class in the Lightbox Plus settings:

    <?php // Adds slide image with video Slide URL link
    if ( get_post_meta( $post->ID, "slide_url_value", $single = true ) == "http://jleuze.com/video/" ): ?>
    	<a class="lightbox" href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'featured-slide' ); ?></a>
    <?php // Adds slide image with regular Slide URL link
    elseif ( get_post_meta( $post->ID, "slide_url_value", $single = true ) != "" ): ?>
    	<a href="<?php echo get_post_meta( $post->ID, "slide_url_value", $single = true ); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail( 'featured-slide' ); ?></a>
    <?php // Adds slide image without Slide URL link
    else: ?>
    	<?php the_post_thumbnail( 'featured-slide' ); ?>
    <?php endif; ?>

    The other issue you've got to deal with is that if you link to a page on your site like that in a lightbox instead of just an image, it will load the whole page in the lightbox. You only want it to load the video, so you need to make custom page template that only loads the video, nothing else.

    I didn't want this page template showing up as an option for the client, so I didn't give it a title so that it could be selected. I created a video page with the slug "video". and then I created a template file called "page-video.php" that is loaded just for that page. The code for that template file is very basic:

    <div id="video">
    	<iframe src="http://player.vimeo.com/video/16270730" width="700" height="393" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </div><!-- #video -->

    I hope that helps!

  3. vladdione
    Posted 2 years ago #

    Hi, I tried following the steps above.
    Here's the slideshow: http://mbdinsight.ro/en/
    The second slide links here: http://mbdinsight.ro/en/avideo/

    Created a template for this page so it only loads the video and used the Lightbox Plus Colorbox plugin to specify the Lightbox applies to this page(only it seems this doesn't work).

    And replaced the PHP code in meteor-slideshow.php with the one you provided.

    It doesn't "load" the Lightbox, it just re-directs to the video page.

    How can I make the video come-up in the lightbox? Thank you!

  4. Josh Leuze
    Plugin Author

    Posted 2 years ago #

    Hey, you got this to work linking right to a YouTube video, that's pretty cool!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic