Product:

Wonder Portfolio Grid Gallery

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

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,
		"category" => "video"
	),
	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,
		"category" => "video"
	),
	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,
		"category" => "image"
	),
	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,
		"category" => "video"
	),
	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",
		"category" => "image"
	)
);
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, Advanced Options, add the following text to the Data Options input 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:

The available keys are as follows: