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

Last updated on

Product:

Wonder Carousel Version 18.8 or above

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

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(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2015/06/wordpress-portfolio-video.jpg",
		"link" => "https://www.youtube.com/embed/pChmieCDWpo",
		"title" => "Big Buck Bunny - YouTube",
		"description" => "This is a YouTube video",
		"alt" => "YouTube video",
		"lightbox" => 1
	),
	array(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Elephant_Dreams_954.jpg",
		"link" => "https://player.vimeo.com/video/1132937?title=0&byline=0&portrait=0",
		"title" => "Big Buck Bunny - Vimeo",
		"lightbox" => 1
	),
	array(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Wilderness_1024-300x225.jpg",
		"link" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Wilderness_1024.jpg",
		"title" => "Wilderness",
		"lightbox" => 1
	),
	array(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Big_Buck_Bunny_2_1024-300x225.jpg",
		"link" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/BigBuckBunny_1.mp4",
		"title" => "Big Buck Bunny",
		"lightbox" => 1
	),
	array(
		"thumbnail" => "https://www.wonderplugin.com/wp-content/uploads/2013/12/Desert_1024-300x225.jpg",
		"link" => "https://www.wonderplugin.com",
		"title" => "Desert",
		"lightbox" => 0,
		"linktarget" => "_blank"
	)
);
echo json_encode($playlist);
?>

There are five items in the list. The first four items will open the specified link in a lightbox on clicking. The last item will open the link in a new tab on clicking.

Step 2 - Connect Wonder Carousel to the web service

In the plugin, step 3, Options tab, Advanced Options, add the following text to the Data Options input box:

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

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

A demo is as following:

The available keys are as follows:

Key Description
thumbnail thumbnail image 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