Mobile-friendly Multimedia Storytelling Library – zuck.js

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();
  },
},

Changelog:

v1.6.0 (02/15/2021)

• Fix touch event

v1.5.6 (01/10/2020)

• Fix touch event

v1.5.5 (01/10/2020)

• Fix quick swipe

10/14/2019

• Fix modal touch bug

08/19/2018

• Bugfix