Mobile-friendly Multimedia Storytelling Library – zuck.js

Datetime:2017-04-20 06:26:27         Topic: JavaScript          Share        Original >>
Here to See The Original Article!!!

Demo Download

Author: ramon82
Views Total: 15
Official Page: Go to website
Last Update: April 19, 2017
License: MIT

Preview:

Description:

zuck.js is a robust JavaScript library that helps you share photos, videos and text with your friends in a fashion way. Similar to the Facebook Stories, Facebook Messenger Day, WhatsApp status, Instagram stories and Snapchat stories.

Install it via NPM:

# NPM
$ npm install zuck.js

How to use it:

Load the core stylesheet a skin CSS of your choice in the head of the Html document.

<!-- core stylesheet -->
<link rel="stylesheet" href="zuck.css">
<!-- skins -->
<link rel="stylesheet" href="skins/snapgram.css">
<link rel="stylesheet" href="skins/vemdezap.css">
<link rel="stylesheet" href="skins/facesnap.css">
<link rel="stylesheet" href="skins/snapssenger.css">

Load the minified version of the zuck.js at the end of the document.

<script src="zuck.min.js"></script>

Create a container element to hold your stories timeline.

<div id="stories"></div>

Initialize the library and add your own stories as this:

var stories = new Zuck({

  id: 'stories', 
  stories: [{
    id: "story-ID",
    photo: "story.jpg",
    name: "name",
    link: "https://www.google.com",
    lastUpdated: 1492303299037,
    items: [
      buildItem("name-1", "photo", 3, "1.jpg:large", "1:small", '', false, 1492303299037),
      buildItem("name-2", "photo", 3, "2.jpg:large", "2.jpg:small", 'https://www.google.com', false, 1492303299037),
      buildItem("name-3", "video", 0, "3.mp4", "3.jpg:small", '', false, 1492303299037)
    ]
  }]

});

More configuration options with default values.

'skin': 'snapgram',
'avatars': true,
'stories': [],
'backButton': true,
'backNative': false,
'autoFullScreen': false,
'openEffect': true,
'list': false,
'localStorage': true,
'language': {
  'unmute': 'Touch to unmute',
  'keyboardTip': 'Press space to see next',
  'visitLink': 'Visit link',
  'time': {
    'ago':'ago', 
    'hour':'hour', 
    'hours':'hours', 
    'minute':'minute', 
    'minutes':'minutes', 
    'fromnow': 'from now', 
    'seconds':'seconds', 
    'yesterday': 'yesterday', 
    'tomorrow': 'tomorrow', 
    'days':'days'
  }
}

Callback functions.

callbacks:  {
  'onOpen': function(storyId, callback) { // on open story viewer
      callback();
  },

  'onView': function(storyId) { // on view story

  },

  'onEnd': function(storyId, callback) { // on end story
      callback();
  },

  'onClose': function(storyId, callback) { // on close story viewer
      callback();
  },

  'onNextItem': function(storyId, nextStoryId, callback) { // on next item of story
      callback();
  },
},







New

Put your ads here, just $200 per month.