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!
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!
Hey, you got this to work linking right to a YouTube video, that’s pretty cool!
