How to load image and video list from a json web service in WonderPlugin Portfolio plugin

Product:

WonderPlugin Portfolio Grid Gallery

This tutorial will show you how to load image and video list from a json service in the plugin WonderPlugin Portfolio.

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",
		"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 WonderPlugin Portfolio to the web service

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

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

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

A demo is as following: