JavaScript Library That Allows You To Add Multimedia Storytelling Stories Everywhere | zuck.js


zuck.js is a powerful JavaScript library that helps you share photos, videos, and texts with your friends in a modern way. Similar to Facebook stories, Facebook Messenger Day, WhatsApp status, Instagram stories, and Snapchat stories.


  • Vanilla JavaScript
  • Desktop support (why not?)
  • Custom CSS Themes: Snapgram, FaceSnap, Snapssenger, and VemDeZAP
  • Personalized gestures and events, and custom templates
  • Simple API for managing “Timeline of Stories”
  • 3D cube effect
  • Support reaction
  • RTL support

How to make use of it:

Install it through NPM:

$ npm install zuck.js

Load the core stylesheet a skin CSS of your alternative within the head of the Html doc.

<!-- 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 model of the zuck.js on the finish of the doc.

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

Create a container component to carry your story’s timeline.

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

Initialize the library and add your personal tales like 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 choices 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 features.

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

Mobile-friendly Multimedia Storytelling Library, zuck.js Plugin/Github

See Demo And Download

Official Website(ramon82): Click Here

This superior jQuery/javascript plugin is developed by ramon82. For extra Advanced Usages, please go to the official website.