Skip to content

Instantly share code, notes, and snippets.

@webgio

webgio/index.html

Created April 4, 2017 15:26
Show Gist options
  • Save webgio/a1351efae05261983f5d6f97ee4659ff to your computer and use it in GitHub Desktop.
Save webgio/a1351efae05261983f5d6f97ee4659ff to your computer and use it in GitHub Desktop.
Download ZIP
Backbone DEMO Backbone JS Demo // source http://jsbin.com/cihimiq
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Backbone JS Demo" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<meta charset=utf-8 />
<title>Backbone DEMO</title>
<style id="jsbin-css">
h1 {
font-size:1.5em;
}
#out{margin-top:50px;}
ul{
list-style:none;
-webkit-padding-start: 0px;
}
ul li {
margin:5px;
cursor:pointer;
border:1px solid #CCC;
padding:10px;
}
</style>
</head>
<body>
<h1>Carousel</h1>
<div id="carousel" />
<script type="text/template" id="carousel-view-template">
<div class="carousel-container">
<button <%= isFirst?'disabled':'' %> class="carousel-prev" style="float: left"><</button>
<div class="comment" title="<%= title %>" style="float: left">
<img src="<%= image %>" width="200" />
</div>
<button <%= isLast?'disabled':'' %> class="carousel-next" style="float: left">></button>
</div>
</script>
<script id="jsbin-javascript">
'use strict';
var getBlockImage = function getBlockImage(blockId, carouselData) {
var images = carouselData[blockId].images;
var imageIndex = getRandomInt(0, images.length);
return images[imageIndex];
};
var getRandomInt = function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
};
var CurrentImageModel = Backbone.Model.extend();
var CarouselView = Backbone.View.extend({
el: "#carousel",
model: CurrentImageModel,
template: _.template($('#carousel-view-template').html()),
initialize: function initialize(options) {
this.onCarouselPrev = options.onShowPrevImage;
this.onCarouselNext = options.onShowNextImage;
},
events: {
'click .carousel-prev': 'onCarouselPrev',
'click .carousel-next': 'onCarouselNext'
},
render: function render() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var navigateImageFunc = function navigateImageFunc(currentImage, carouselData, direction) {
return function () {
var id = currentImage.get('id') + direction;
var image = {
id: id,
title: carouselData[id].title,
image: getBlockImage(id, carouselData),
isFirst: id === 0,
isLast: id === carouselData.length - 1
};
currentImage.set(image);
};
};
$(function () {
var carouselData = [{
title: "First Block",
images: ['https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/0935322774.jpg', 'https://3.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/7732391852.jpg', 'https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/6412900034.jpg']
}, {
title: "Second Block",
images: ['https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/2942610339.jpg', 'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/9179477572.jpg']
}, {
title: "Third Block",
images: ['https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/5096289197.jpg', 'https://3.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/1571856442.jpg', 'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/8308485370.jpg', 'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/1242594513.jpg']
}];
var currentImage = new CurrentImageModel({
id: 0,
title: carouselData[0].title,
image: getBlockImage(0, carouselData),
isFirst: true,
isLast: carouselData.length === 1
});
var showNextImage = navigateImageFunc(currentImage, carouselData, 1);
var showPrevImage = navigateImageFunc(currentImage, carouselData, -1);
var carouselView = new CarouselView({
model: currentImage,
onShowNextImage: showNextImage,
onShowPrevImage: showPrevImage
});
carouselView.render();
currentImage.on('change', carouselView.render.bind(carouselView));
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<meta name="description" content="Backbone JS Demo" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"><\/script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"><\/script>
<meta charset=utf-8 />
<title>Backbone DEMO</title>
</head>
<body>
<h1>Carousel</h1>
<div id="carousel" />
<script type="text/template" id="carousel-view-template">
<div class="carousel-container">
<button <%= isFirst?'disabled':'' %> class="carousel-prev" style="float: left"><</button>
<div class="comment" title="<%= title %>" style="float: left">
<img src="<%= image %>" width="200" />
</div>
<button <%= isLast?'disabled':'' %> class="carousel-next" style="float: left">></button>
</div>
<\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">
h1 {
font-size:1.5em;
}
#out{margin-top:50px;}
ul{
list-style:none;
-webkit-padding-start: 0px;
}
ul li {
margin:5px;
cursor:pointer;
border:1px solid #CCC;
padding:10px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">const getBlockImage = (blockId, carouselData) => {
const images = carouselData[blockId].images
const imageIndex = getRandomInt(0, images.length)
return images[imageIndex]
}
const getRandomInt = (min, max) => {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
}
const CurrentImageModel = Backbone.Model.extend();
const CarouselView = Backbone.View.extend({
el: "#carousel",
model: CurrentImageModel,
template: _.template($('#carousel-view-template').html()),
initialize: function(options) {
this.onCarouselPrev = options.onShowPrevImage
this.onCarouselNext = options.onShowNextImage
},
events: {
'click .carousel-prev':'onCarouselPrev',
'click .carousel-next':'onCarouselNext'
},
render: function(){
this.$el.html(this.template(this.model.toJSON()));
return this;
}
})
const navigateImageFunc = (currentImage, carouselData, direction) => {
return function() {
const id = currentImage.get('id') + direction
const image = {
id: id,
title: carouselData[id].title,
image: getBlockImage(id, carouselData),
isFirst: id === 0,
isLast: id === carouselData.length - 1
}
currentImage.set(image)
}
}
$(function(){
const carouselData = [{
title: "First Block",
images: [
'https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/0935322774.jpg'
, 'https://3.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/7732391852.jpg'
, 'https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/6412900034.jpg'
]
},
{
title: "Second Block",
images: [
'https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/2942610339.jpg'
, 'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/9179477572.jpg'
]
},
{
title: "Third Block",
images: [
'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/5096289197.jpg'
, 'https://3.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/1571856442.jpg'
, 'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/8308485370.jpg'
, 'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/1242594513.jpg'
]
}]
const currentImage = new CurrentImageModel({
id: 0,
title: carouselData[0].title,
image: getBlockImage(0, carouselData),
isFirst: true,
isLast: carouselData.length === 1
})
const showNextImage = navigateImageFunc(currentImage, carouselData, 1)
const showPrevImage = navigateImageFunc(currentImage, carouselData, -1)
const carouselView = new CarouselView({
model: currentImage,
onShowNextImage: showNextImage,
onShowPrevImage: showPrevImage
})
carouselView.render()
currentImage.on('change', carouselView.render.bind(carouselView) )
})</script></body>
</html>
Raw
jsbin.cihimiq.css
h1 {
font-size:1.5em;
}
#out{margin-top:50px;}
ul{
list-style:none;
-webkit-padding-start: 0px;
}
ul li {
margin:5px;
cursor:pointer;
border:1px solid #CCC;
padding:10px;
}
Raw
jsbin.cihimiq.js
'use strict';
var getBlockImage = function getBlockImage(blockId, carouselData) {
var images = carouselData[blockId].images;
var imageIndex = getRandomInt(0, images.length);
return images[imageIndex];
};
var getRandomInt = function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min;
};
var CurrentImageModel = Backbone.Model.extend();
var CarouselView = Backbone.View.extend({
el: "#carousel",
model: CurrentImageModel,
template: _.template($('#carousel-view-template').html()),
initialize: function initialize(options) {
this.onCarouselPrev = options.onShowPrevImage;
this.onCarouselNext = options.onShowNextImage;
},
events: {
'click .carousel-prev': 'onCarouselPrev',
'click .carousel-next': 'onCarouselNext'
},
render: function render() {
this.$el.html(this.template(this.model.toJSON()));
return this;
}
});
var navigateImageFunc = function navigateImageFunc(currentImage, carouselData, direction) {
return function () {
var id = currentImage.get('id') + direction;
var image = {
id: id,
title: carouselData[id].title,
image: getBlockImage(id, carouselData),
isFirst: id === 0,
isLast: id === carouselData.length - 1
};
currentImage.set(image);
};
};
$(function () {
var carouselData = [{
title: "First Block",
images: ['https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/0935322774.jpg', 'https://3.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/7732391852.jpg', 'https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/6412900034.jpg']
}, {
title: "Second Block",
images: ['https://1.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/2942610339.jpg', 'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/9179477572.jpg']
}, {
title: "Third Block",
images: ['https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/5096289197.jpg', 'https://3.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/1571856442.jpg', 'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/8308485370.jpg', 'https://4.img-dpreview.com/files/p/TS1200x900~sample_galleries/4783759740/1242594513.jpg']
}];
var currentImage = new CurrentImageModel({
id: 0,
title: carouselData[0].title,
image: getBlockImage(0, carouselData),
isFirst: true,
isLast: carouselData.length === 1
});
var showNextImage = navigateImageFunc(currentImage, carouselData, 1);
var showPrevImage = navigateImageFunc(currentImage, carouselData, -1);
var carouselView = new CarouselView({
model: currentImage,
onShowNextImage: showNextImage,
onShowPrevImage: showPrevImage
});
carouselView.render();
currentImage.on('change', carouselView.render.bind(carouselView));
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment