SocialStory.js

Instagram style stories for your website
with a simple JavaScript plugin

Demo Buy $4.99 & Download

Full unlocked Javascript, CSS & HTML source code for one developer to use on unlimited websites (commercial and non-commercial) & free updates.

The Setup

In the HTML document head include the SocialStory CSS and Javascript files:

<link rel="stylesheet" href="socialstory/socialstory.css">
<script type="text/javascript" src="socialstory/socialstory.js"></script>

Add the storytime div tag to your HTML body:

<div id="storytime"></div>

Add the plugin code to your page before the closing body tag:

	<script>
		var myPlaylist = [];

		var socialStory = new Story({
			playlist: myPlaylist
		});

	</script>

How to Use

Create a playlist in the variable as shown below. It can have as many videos as you need.

		var myPlaylist = [
		{
			"title": "Social Story",
			"date": "2 hours ago",
			"url": "media/IMG_4627.mov",
			"icon": "media/small-icon.jpg"
		},
		{
			"title": "Social Story",
			"date": "1 day ago",
			"url": "media/IMG_4628.mov",
			"icon": "media/small-icon.jpg"
		},
		{
			"title": "Social Story",
			"date": "1 day ago",
			"url": "media/IMG_4629.mov",
			"icon": "media/small-icon.jpg"
		}
		];

Trigger the story modal window using the JavaScript code below:

socialStory.launch()

Example


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>SocialStory.js</title>
    <link rel="stylesheet" href="socialstory/socialstory.css">
    <script type="text/javascript" src="socialstory/socialstory.js"></script>
  </head>
  <body>
      <button type="button" onclick="socialStory.launch();">Launch Social Story</button>

      <div id="storytime"></div>

      <script>
		var myPlaylist = [
		{
			"title": "Social Story",
			"date": "2 hours ago",
			"url": "media/IMG_4627.mov",
			"icon": "media/small-icon.jpg"
		},
		{
			"title": "Social Story",
			"date": "1 day ago",
			"url": "media/IMG_4628.mov",
			"icon": "media/small-icon.jpg"
		},
		{
			"title": "Social Story",
			"date": "1 day ago",
			"url": "media/IMG_4629.mov",
			"icon": "media/small-icon.jpg"
		}
		];

		var socialStory = new Story({
			playlist: myPlaylist
		});

	  </script>
  </body>
</html>

The End.

created by @iamtk