Created
November 30, 2016 09:16
-
-
Save rccc/7bf01126271a88d46bc856b0073aa77a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript" src="https://cdn.jsdelivr.net/rsvp/3.0.6/rsvp.min.js"></script> | |
var bvm = bvm || {}; | |
bvm.as = {}; | |
bvm.as.asl = (function(jQuery){ | |
var advert_photos = []; | |
var advert_photos_thumb = []; | |
var photos_loaded = 0; | |
var photos_success = 0; | |
var $gallery = {}; | |
var init = function(){ | |
console.info('bvm.as.asl init'); | |
console.time('init'); | |
$gallery = jQuery('#image-gallery'); | |
var promise = new RSVP.Promise(function(resolve, reject) { | |
return loadImages().then(function(o){ | |
// console.info('loadImages then', o); | |
return addImageListToSlideshow(o.img_list, o.thumb_list); | |
}) | |
.then(function(){ | |
// console.info('addImageToSlideshow then'); | |
slider_init(); | |
}) | |
.then(function(){ | |
console.info('all done'); | |
}).catch(function(error) { | |
console.error(error); | |
}); | |
}).catch(function(error) { | |
console.error(error); | |
}); | |
}; | |
var loadImages = function(){ | |
// console.info('loadImages'); | |
var p = new RSVP.Promise(function(resolve, reject) { | |
var len = advert_photos.length; | |
var sto_limit = 24; //6000 ms | |
var sto_count = 0; | |
var result = []; | |
var result_thumb= []; | |
var sit = window.setInterval(function(){ | |
var done = false; | |
if(photos_loaded == advert_photos.length){ | |
done = true; | |
} | |
sto_count++; | |
if(sto_count == sto_limit){ | |
done = true; | |
} | |
if(done){ | |
window.clearInterval(sit); | |
resolve({img_list:result, thumb_list:result_thumb}); | |
} | |
}, 250); | |
for (var i = 0; i < len; i++) { | |
loadImage(advert_photos[i], i) | |
.then(function(o){ | |
if(o.img){ | |
result.push(o.img); | |
result_thumb.push(advert_photos_thumb[o.index]); | |
} | |
}); | |
} | |
}); | |
return p; | |
}; | |
var loadImage = function(src, i) { | |
var p = new RSVP.Promise(function(resolve, reject) { | |
var img = document.createElement('img'); | |
img.onload = function(){ | |
photos_loaded++; | |
photos_success++; | |
resolve({img:img, index: i}); | |
}; | |
img.onerror = function(){ | |
photos_loaded++; | |
resolve(null, i); | |
}; | |
img.setAttribute('class', 'img-responsive'); | |
img.setAttribute('src', src); | |
}); | |
return p; | |
}; | |
var addImageListToSlideshow = function(img_list, thumb_list){ | |
var p = new RSVP.Promise(function(resolve, reject) { | |
var len = img_list.length; | |
var gallery = $gallery.get(0); | |
var sit_limit = 25; | |
var sit_count = 0; | |
var sit = window.setInterval(function(){ | |
var done = false; | |
var len = $gallery.get(0).querySelectorAll('li').length-1; | |
if( sit_count == sit_limit || len == photos_success){ | |
window.clearInterval(sit); | |
resolve(); | |
} | |
sit_count++; | |
}, 200); | |
for (var i = 0; i < len; i++) { | |
var li = document.createElement('li'); | |
li.setAttribute('data-thumb', thumb_list[i]); | |
li.setAttribute('class', 'hide'); | |
li.appendChild(img_list[i]); | |
gallery.appendChild(li); | |
} | |
}); | |
return p; | |
}; | |
var slider_init = function(){ | |
// console.info('slideshow_init'); | |
var p = new RSVP.Promise(function(resolve, reject) { | |
$gallery.lightSlider({ | |
gallery: true, | |
responsive: true, | |
item: 1, | |
thumbItem: photos_success, | |
slideMargin: 0, | |
// speed: 1000, | |
// auto: true, | |
// pause: 2000, | |
loop: true, | |
onSliderLoad: function () { | |
$gallery.find('li').removeClass('hide'); | |
resolve(); | |
console.timeEnd('init'); | |
} | |
}); | |
}); | |
return p; | |
}; | |
var addPhoto = function(src){ | |
advert_photos.push(src); | |
}; | |
var addPhotoThumb = function(src){ | |
advert_photos_thumb.push(src); | |
}; | |
return { | |
init : init, | |
addPhoto: addPhoto, | |
addPhotoThumb: addPhotoThumb | |
}; | |
})(window.jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment