<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<body>
<div class="container">
</div>
</body>
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
.thumbnail {
padding: 0;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
.col-sm-3 a {
border: 1px solid transparent;
border-radius: 0;
transition: all 3s ease;
}
.col-sm-3 a:hover {
border: 1px solid #ff4647;
border-radius: 100% 60% / 30% 10%;
background: linear-gradient(rgba(56,123,131,0.7),rgba(56,123,131,0.7));
}
$(document).ready(function(){
var data = [];
/*
*getData method fetches data from mongo db and renders into gallery.hbs view
*
*/
var getData = function(){
var obj = new Object(
{
'id':'2',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/dragonflies(150x150).png',
'title': 'Dragon Flies',
'description': 'Dragon Flies',
'category': '',
'date': 'Tue Dec 06 2016 11:20:18 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'3',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/redsnowman(150x150).png',
'title': 'Christmas Decoration Snow Man',
'description': 'Very beutufull christmas decoration for your christmas tree, Red Snow Man',
'category': '',
'date': 'Tue Dec 06 2016 09:19:14 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'4',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/xdecoration(150x150).png',
'title': 'Christmas Decoration House',
'description': 'Beutifull christmas decoration for your home',
'category': '',
'date': 'Tue Dec 06 2016 09:19:56 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'5',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/butterflylantern(150x150).png',
'title': 'Lantern Butterfly Effect',
'description': 'Lantern Butterfly Effect',
'category': '',
'date': 'Tue Dec 06 2016 09:20:18 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'1',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/postBox(150x150).png',
'title': 'Post Box Galaxy Eye',
'description': 'Hand made in Ireland Stained Glass Post Box, The produsct name Galaxy Eye',
'category': '',
'date': 'Tue Dec 06 2016 09:49:58 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'6',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/moon-tree-lantern(150x150).png',
'title': 'Moon Tree Lantern',
'description': 'Moon Tree Lantern',
'category': '',
'date': 'Tue Dec 06 2016 10:20:18 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'7',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/decorationAngel1(150x150).png',
'title': 'Christmas Decoration Angel',
'description': 'Christmas Decoration Angel',
'category': '',
'date': 'Tue Dec 06 2016 13:20:18 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'8',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/christmas-tree(150x150).png',
'title': 'Christmas Decoration Christmas Tree',
'description': 'Christmas Tree',
'category': '',
'date': 'Tue Dec 06 2016 15:49:18 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'9',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/christmastree2(150x150).png',
'title': 'Christmas Decoration Christmas Tree',
'description': 'Christmas Tree',
'category': '',
'date': 'Tue Dec 06 2016 16:10:18 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'10',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/fishlantern(150x150).png',
'title': 'Lanter Fish on Drifted Wood',
'description': 'Fish Lantern on drifted Wood',
'category': '',
'date': 'Tue Dec 06 2016 16:57:18 GMT+0000 (GMT)'
});
data.push(obj);
var obj = new Object(
{
'id':'11',
'path': 'https://s3-eu-west-1.amazonaws.com/imagestramorestainedglass/lanternleafe(150x150).png',
'title': 'Lantern Leave',
'description': 'Lantern Leave Effect',
'category': '',
'date': 'Tue Dec 06 2016 16:57:18 GMT+0000 (GMT)'
});
data.push(obj);
}//end getData
var check = function(param,callback, callback2){
if(!param.length){
if(callback && typeof(callback) === 'function'){
callback();
if(callback2 && typeof(callback2) === 'function'){
callback2();
}
}
}
}
var slider = function(){
$('.container').attr({'id':'slider-container'});
$('#slider-container').append($('<div/>',{'id':'main_area'}));
$('#main_area').append($('<div/>',{'class':'row', 'id':'slider-row'}));
$('#slider-row').append($('<div/>',{'class':'col-sm-6', 'id':'slider-thumbs'}));
$('#slider-thumbs').append($('<ul/>',{'class':'hide-bullets'}));
for(var x in data){
$('.hide-bullets').append($('<li/>',{'class':'col-sm-3','id':'li-'+x}));
$('#li-'+x).append($('<a/>',{'class':'thumbnail', 'id':'carousel-selector-'+x}));
$('#carousel-selector-'+x).append($('<img/>',{'src':data[x].path}));
}
$('#slider-row').append($('<div/>',{'class':'col-sm-6','id':'slider-big'}));
$('#slider-big').append($('<div/>',{'class':'col-xs-12','id':'slider'}));
$('#slider').append($('<div/>',{'class':'row','id':'row-big'}));
$('#row-big').append($('<div/>',{'class':'col-sm-12','id':'carousel-bounding-box'}));
$('#carousel-bounding-box').append($('<div/>',{'class':'carousel slide','id':'myCarousel'}));
$('#myCarousel').append($('<div/>',{'class':'carousel-inner'}));
for(var x in data){
var image = new Image(470, 480);
var cut = data[x].path.length;
image.src = data[x].path.substring(0,(cut - 13));
image.src = image.src + '(470x480).png';
$('.carousel-inner').append($('<div/>',{'class':'item', 'data-slide-number': x, 'id':'item-'+x}));
$('#item-'+x).append(image);
if(x == 0){
$('#item-'+x).attr({'class':'item active'});
}
}
};//end Slider
/*
*Call functions
*/
check(data,getData,slider);
/*
*This is original jquery method
*/
$('#myCarousel').carousel({
interval: 5000
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
//console.log(id_selector);
try {
var id = /-(\d+)$/.exec(id_selector)[1];
//console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
