Mobile-friendly Multimedia Storytelling Library – zuck.js

Category: Javascript , Recommended | February 15, 2021
Views Total:2,105 views
Official Page:Go to website
Last Update:February 15, 2021


Mobile-friendly Multimedia Storytelling Library – zuck.js


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 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: "",
    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", '', 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': {
    'fromnow': 'from now', 
    'yesterday': 'yesterday', 
    'tomorrow': 'tomorrow', 

Callback functions.

callbacks:  {
  'onOpen': function(storyId, callback) { // on open story viewer
  'onView': function(storyId) { // on view story
  'onEnd': function(storyId, callback) { // on end story
  'onClose': function(storyId, callback) { // on close story viewer
  'onNextItem': function(storyId, nextStoryId, callback) { // on next item of story


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


  • Fix modal touch bug


  • Bugfix

You Might Be Interested In:

One thought on “Mobile-friendly Multimedia Storytelling Library – zuck.js

  1. Brain Johnson

    I can see you added the stories manually. How can I add the stories from values stored in mysql database. So that my website users can add stories on their own. please help me


Leave a Reply