Biblioteca de narración multimedia para dispositivos móviles-Zuck. js
| Autor: | ramon82 |
|---|---|
| Views Total: | 2,001 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 25, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Zuck. js es una biblioteca de JavaScript robusta que le ayuda a compartir fotos, videos y texto con sus amigos de una manera de moda. Similar a las historias de Facebook, Facebook Messenger Day, estado de WhatsApp, historias de Instagram e historias de Snapchat.
Install it via NPM:
# NPM $ npm install zuck.js
Funcionamiento
Cargue la hoja de estilos principal en un CSS de la piel de su elección en el de cabecera del documento HTML.
<!-- 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">
Cargue la versión minimizada de Zuck. js al final del documento.
<script src="zuck.min.js"></script>
Cree un elemento contenedor para mantener la cronología de las historias.
<div id="stories"></div>
Inicializa la librería y añade tus propias historias como esta:
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)
]
}]
}); Más opciones de configuración con valores predeterminados.
'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'
}
} Funciones de devolución de llamada.
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();
},
}, Registro de cambios
09/25/2018
- Puntee navegación
