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″]
To enable auto update for SliderVilla slider WordPress plugins, you need to enter the License Key of purchased slider plugin. Here is how you can get the License Key and how to update the same on your WordPress dashboard.
License Key for SliderVilla Sliders
Login to “My Downloads” page using membership access details that you received after the purchase. Here you can see the License Key for each purchased product. Copy the key from there.
You can also get the License Key from the download link of purchased product available in the receipt email that you had received after successful purchase. Here is how to retrieve the license key from download link.
There are 2 links available in the receipt email, one with duid and other with ouid in the URL. The license key is available in the link with duid mentioned in the URL. The long string of characters in the URL after duid= is the license key of the purchased product. See the below image to know where to find the license key in receipt email.
Enter the License Key on plugin’s dashboard
On your site’s WordPress dashboard, open the sub-page “License” under Slider Plugin’s menu. Paste the License Key copied from “My Downloads” page. Save the changes.
This is a one-time process only. Now you can update the installed slider plugin using automatic update option of WordPress from either Plugins page or Update page of WordPress.
You should have FTP access to your site’s folder in oredr to create your own styles.
In this example, we are creating different stylesheets for Pointelle Slider Plugin. You can similarly create custom stylesheet for other SliderVilla slider plugins.
Go to wp-content => plugins => pointelle-slider folder => css => skins
Create a new folder with a name say… ‘custom’. Copy the content of ‘sample’ folder into ‘custom’ folder. Now go to custom folder => > style.css file. Open it with Notepad or Notepad++ or the editor you use to edit CSS files, add and modify/remove your own CSS rules. Save the CSS file. Upload the complete custom folder to the server, inside the skins folder.
Now on the Pointelle Slider settings page => go to ‘Miscellaneous’ settings => You would get value as ‘custom’ in dropdown for the setting ‘Pointelle Slider Styles to Use on Other than Post/Pages’. Select ‘csutom’ and save the settings.
As well, on Post/Page edit panel, you would get an option saying ‘Stylesheet to use if slider is displayed on this Post/Page ‘ under ‘Pointelle Slider’ custom meta box. Select the value as ‘custom’ and save the post/page.
You can create any number of style folders as ‘custom’ and name them whatever you want.
On the Edit Post/Page/Media image panel under Slider Meta Box fields, you would get an input field named ‘Slide Link URL’, you can input whatever URL you want the slide to link to in this field. Save the entry.
On the Edit Post/Page/Media image panel under Slider Meta Box fields, you would get an checkbox named ‘Do not link this slide to any page(url)’, you can uncheck the box to choose not to link the slide to any url. Save the entry.
Go to Pointelle Slider ‘Settings’ => Miscellaneous settings => Show Promotionals on Admin Page => and select ‘No’ for the settings. Save the settings.
On the ‘Settings’ admin panel of the Slider, at the top you would see ‘Create New Settings Set’ button. Click the button, you would be asked to confirm that you need to create a new settings set
Once you create a new settings set, you would still be served the current settings. You can access and modify the new settings using the settings link on the right sidebar named ‘Setting Panels’.
Before modifying the settings, do check on which settings panel you currently are. You can check this using the title of the Settings page.
- Screenshot of ‘Create New Settings Set’ button on Slider => Settings Panel
- Screenshot of Settings Panel Navigation on the right of Slider => Settings menu
Go to Edit Media thru Media => Library and open the image in edit mode. You would get an option to add the media image to the Pointelle Slider, you can assign the link URL to which the slide will link and you can also choose not to link a particular image to any URL.
Screenshot demonstrating how to add Media Library Image to SliderVilla Slider