How to load image and video list from a JSON web service in WordPress Slider

Last updated on

Product:

Wonder Slider 13.1 or above

This tutorial will show you how to load image and video list from a JSON service in the plugin Wonder Slider.

Step 1: Setup a JSON web service

In this tutorial, we will use PHP to create the JSON web service

In the web service, you need to create an array of images and videos, then use json_encode to output the result to client side. A demo is as following:

<?php
// The play list can be dynamically created from database or whatever you like.
$playlist = array(
	array(
		"image" => "https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-dog3.jpeg",
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-dog3.jpeg",
		"title" => "Image with Link",
		"description" => "Visit <a href='https://www.wonderplugin.com/wordpress-gridgallery/'>Wonder Grid Gallery</a> for more information",
		"alt" => "YouTube video",
		"link" => "https://www.wonderplugin.com/wordpress-gridgallery/",
		"linktarget" => "_blank"
	),
	array(
		"image" => "https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-kitten.jpeg",
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-kitten.jpeg",
		"title" => "Image Lightbox",
		"description" => "Visit <a href='https://www.wonderplugin.com/wordpress-gridgallery/'>Wonder Grid Gallery</a> for more information",
		"alt" => "YouTube video",
		"link" => "https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-dog3.jpeg",
		"lightbox" => 1
	),
	array(
		"video" => "https://www.youtube.com/watch?v=pChmieCDWpo",
		"image" => "https://www.wonderplugin.com/wp-content/uploads/2015/06/wordpress-portfolio-video.jpg",
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2015/06/wordpress-portfolio-video.jpg",
		"title" => "Play Video in Lightbox",
		"description" => "Visit <a href='https://www.wonderplugin.com/wordpress-gridgallery/'>Wonder Grid Gallery</a> for more information",
		"alt" => "YouTube video",
		"lightbox" => 1,
		"lightboxwidth" => 960,
		"lightboxheight" => 540
	),
	array(
		"video" => "https://www.youtube.com/watch?v=c9-gOVGjHvQ",
		"image" => "https://www.wonderplugin.com/wp-content/uploads/2020/07/wordpress-carousel-youtube.jpg",
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2020/07/wordpress-carousel-youtube.jpg",
		"title" => "Play Video Inline",
		"description" => "Visit <a href='https://www.wonderplugin.com/wordpress-carousel/'>Wonder Carousel</a> for more information",
		"alt" => "YouTube video",
		"lightbox" => 0
	)
);
echo json_encode($playlist);
?>

There are four items in the list. The first item adds an image with link, the second items opens an image in the lightbox popup, the third item opens a YouTube video in a lightbox popup, the fourth item plays a YouTube video inline.

Step 2 - Connect Wonder Slider to the web service

In the plugin, create or edit a slider, in step 3, Options tab, add the following text to the Advanced Options box:

data-remote="https://www.wonderplugin.com/slider-jsonservice.php"

Please note, due to cross-domain issue, the domain of the web service must be the same as the slider.

A demo is as following:

The available keys are as follows:

Key Description
image image URL
thumbnail thumbnail image URL
video video URL
title title of the item
description description of the item
alt alt attribute of the thumbnail image. If the key is not specified, the plugin will use the title as the alt attribute.
link the link on clicking the thumbnail
linktarget target of the link
lightbox whether to open the link in lightbox popup
lightboxwidth width of the lightbox
lightboxheight height of the lightbox