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.
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!
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!
- The topic ‘Using Lightbox Plus video feature with Meteor Slides?’ is closed to new replies.