SliderVilla.com is having more than 12 premium slider plugins for WordPress. Apart from other awesome features, one can also add a video slide with lightbox effect to show the video in lightbox. In this tutorial, you will learn how to add a video slide with lightbox effect in SliderVilla sliders like Pointelle, Thumbel, Akkord, Glam, Pinwheel and many others. This tutorial is valid for all SliderVilla slider plugins.
Settings Page Changes
First of all, you need to enable Lightbox effect on slider’s settings page. For this tutorial, I am taking Pointelle Slider to showcase this feature.
Enable Lightbox Effect
Go to the Pointelle Slider settings page ==> Basic tab ==> Miscellaneous section ==> Check the box “Use PrettyPhoto (Lightbox) for Slide Images”. Save changes.
Add Video Slide
For the Lightbox effect, you need to show a static image inside the slider and when the visitor will click on that image or slide title, it should open and play the video in Lightbox. First of all we need to add a slide to the slider. You can add a new regular post, custom post type, image from media library etc. as a video slide. For example, I am adding a regular post to the Pointelle Slider.
- Open the post in edit window on dashboard. Scroll down to the Pointelle Slider post meta box. Check the box “Add this post/page to the slider” and select “Pointelle Slider” or any other slider from the box beside this option.
- The slider can fetch slide image from featured image of that post, by scanning the content of the post or you can also specify the image URL (internal or external) in the Post Meta box field “Custom Thumbnail Image (url)”.
- Its time to add YouTube or any other video URL. In the same post meta box, enter the video URL in the field “Slide Link URL”.
Update the post.
If you have embedded the slider somewhere on your site’s front-end, the new slide will open in Lightbox. It is important to note that other slides in that slider will also open in Lightbox. If you want to have a dedicated slider with video and images with Lightbox effect, I would suggest to use multiple settings feature and create new setting set for this purpose. You can apply the settings set using shortcode, template tag and widget. For example, to have the default slider with default settings set, use the shortcode [pointelleslider] but to apply settings set 2, you need to write the shortcode as [pointelleslider set=”2″]