zuck.js
Version:
A javascript library that lets you add stories EVERYWHERE.
221 lines (208 loc) • 7.59 kB
HTML
<html>
<head>
<title>zuck.js</title>
<link rel="icon" href="ICON.png" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=0"
/>
<!-- demo styles -->
<link rel="stylesheet" href="demo/style.css" />
<!-- lib styles -->
<link rel="stylesheet" href="dist/zuck.css" />
<!-- lib skins -->
<link rel="stylesheet" href="dist/skins/snapgram.css" />
<link rel="stylesheet" href="dist/skins/vemdezap.css" />
<link rel="stylesheet" href="dist/skins/facesnap.css" />
<link rel="stylesheet" href="dist/skins/snapssenger.css" />
</head>
<body>
<h1 id="header"> </h1>
<a
href="https://ramon.codes/projects/zuck.js"
target="_blank"
class="disclaimer"
>
<img src="ICON.png" alt="zuck.js logo" />
<p>
This a demonstration of <strong>zuck.js</strong> javascript library.
</p>
<p>Not associated with Facebook, Instagram, WhatsApp or Snapchat.</p>
</a>
<div id="stories" class="storiesWrapper"></div>
<div class="skin">
Choose your theme:
<select
id="skin"
onchange="changeSkin(this.options[this.selectedIndex].value);"
>
<option value="Snapgram">Snapgram (without fullscreen)</option>
<option value="FaceSnap">FaceSnap (with fullscreen)</option>
<option value="VemDeZAP">VemDeZAP (timeline + arrows)</option>
<option value="Snapssenger">Snapssenger (with previews)</option>
</select>
</div>
<script src="dist/zuck.js"></script>
<script src="demo/script.js"></script>
<script>
var currentSkin = getCurrentSkin();
var stories = window.Zuck(document.querySelector('#stories'), {
backNative: true,
previousTap: true,
skin: currentSkin['name'],
autoFullScreen: currentSkin['params']['autoFullScreen'],
avatars: currentSkin['params']['avatars'],
paginationArrows: currentSkin['params']['paginationArrows'],
list: currentSkin['params']['list'],
cubeEffect: currentSkin['params']['cubeEffect'],
localStorage: true,
stories: [
{
id: 'ramon',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/1.jpg',
name: 'Ramon',
time: timestamp(),
items: [
{
id: 'ramon-1',
type: 'photo',
length: 3,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/1.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/1.jpg',
link: '',
linkText: false,
time: timestamp()
},
{
id: 'ramon-2',
type: 'video',
length: 0,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/2.mp4',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/2.jpg',
link: '',
linkText: false,
time: timestamp()
},
{
id: 'ramon-3',
type: 'photo',
length: 3,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/3.png',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/3.png',
link: 'https://ramon.codes',
linkText: 'Visit my Portfolio',
time: timestamp()
}
]
},
{
id: 'gorillaz',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/2.jpg',
name: 'Gorillaz',
time: timestamp(),
items: [
{
id: 'gorillaz-1',
type: 'video',
length: 0,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/4.mp4',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/4.jpg',
link: '',
linkText: false,
time: timestamp()
},
{
id: 'gorillaz-2',
type: 'photo',
length: 3,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/5.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/5.jpg',
link: '',
linkText: false,
time: timestamp()
}
]
},
{
id: 'ladygaga',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/3.jpg',
name: 'Lady Gaga',
time: timestamp(),
items: [
{
id: 'ladygaga-1',
type: 'photo',
length: 5,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/6.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/6.jpg',
link: '',
linkText: false,
time: timestamp()
},
{
id: 'ladygaga-2',
type: 'photo',
length: 3,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/7.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/7.jpg',
link: 'http://ladygaga.com',
linkText: false,
time: timestamp()
}
]
},
{
id: 'starboy',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/4.jpg',
name: 'The Weeknd',
time: timestamp(),
items: [
{
id: 'starboy-1',
type: 'photo',
length: 5,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/8.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/8.jpg',
link: '',
linkText: false,
time: timestamp()
}
]
},
{
id: 'riversquomo',
photo:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/users/5.jpg',
name: 'Rivers Cuomo',
time: timestamp(),
items: [
{
id: 'riverscuomo-1',
type: 'photo',
length: 10,
src: 'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/9.jpg',
preview:
'https://raw.githubusercontent.com/ramonszo/assets/master/zuck.js/stories/9.jpg',
link: '',
linkText: false,
time: timestamp()
}
]
}
]
});
</script>
</body>
</html>