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.
Features:
- 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 $ 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: "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 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': {
'ago':'ago',
'hour':'hour',
'hours':'hours',
'minute':'minute',
'minutes':'minutes',
'fromnow': 'from now',
'seconds':'seconds',
'yesterday': 'yesterday',
'tomorrow': 'tomorrow',
'days':'days'
}
}Callback features.
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();
},
},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.