Skip to content

Instantly share code, notes, and snippets.

@rccc
Created November 30, 2016 09:14
Show Gist options
  • Select an option

  • Save rccc/8dbeaed97feea5284b7cb6814ffe6001 to your computer and use it in GitHub Desktop.

Select an option

Save rccc/8dbeaed97feea5284b7cb6814ffe6001 to your computer and use it in GitHub Desktop.
var bvm = bvm || {};
bvm.as = {};
bvm.as.asl = (function(jQuery){
var photos_loaded = 0;
var photos_success = 0;
var photos_appended = 0;
var advert_photos = [];
var advert_photos_thumb = [];
var $gallery = jQuery('#image-gallery');
var $doc = jQuery(document);
var init = function(){
console.info('bvm.as.asl init');
console.time('init');
initEvent();
loadImages();
};
var initEvent = function(){
$doc.on('as:asl:images_loaded', function(){
var sit_limit = 10; //2000ms
var sit_count = 0;
var sit = setInterval(function(){
var len = $gallery.get(0).querySelectorAll('li').length-1;
if(len == photos_success || sit_count >= sit_limit){
window.clearInterval(sit);
$doc.trigger('as:asl:images_inserted');
}
}, 200);
$doc
.off('as:asl:images_loaded')
.off('as:asl:image_load_success')
.off('as:asl:image_load_error')
;
});
$doc.on('as:asl:image_load_success', function(ev, img, index){
photos_loaded++;
photos_success++;
addImageToSlideshow(img, index);
});
$doc.on('as:asl:image_load_error', function(ev, src){
photos_loaded++;
});
$doc.on('as:asl:images_inserted', function(){
$doc.off('as:asl:images_inserted');
slider_init();
setTimeout(function(){
$doc.trigger('as:asl:done');
}, 200);
});
};
var loadImages = function(){
var len = advert_photos.length;
var sit_limit = 24; //6000ms
var sit_count = 0;
var sit = window.setInterval(function(){
// console.log(photos_loaded, advert_photos.length);
// console.log('?',photos_loaded == advert_photos.length);
if(photos_loaded == advert_photos.length || sit_count >= sit_limit){
window.clearInterval(sit);
jQuery(document).trigger('as:asl:images_loaded');
}
sit_count++;
}, 250);
for (var i = 0; i < len; i++) {
loadImage(advert_photos[i], i);
}
};
var loadImage = function(src, i) {
// console.info('loadImage');
var img = document.createElement('img');
img.onload = function(){
jQuery(document).trigger('as:asl:image_load_success', [img, i]);
};
img.onerror = function(){
jQuery(document).trigger('as:asl:image_load_error', src);
};
img.setAttribute('class', 'img-responsive');
img.setAttribute('src', src);
};
var addImageToSlideshow = function(img, index){
var li = document.createElement('li');
li.setAttribute('data-thumb', advert_photos_thumb[index]);
li.setAttribute('class', 'hide');
li.appendChild(img);
$gallery.get(0).appendChild(li);
};
var slider_init = function(){
// console.info('slideshow_init');
$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');
console.timeEnd('init');
}
});
};
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);
bvm.as.rsl = (function(jQuery){
var $related = jQuery('#related-vehiculs-items');
var $photos = $related.find('img[data-src]');
var $photos_loaded = 0;
var $doc = jQuery(document);
var init = function(){
console.info('as:rsl.init', $photos);
var sit_limit = 20;
var sit_count = 0;
var sit = window.setInterval(function(){
if(arePhotosLoaded() || sit_count >= sit_limit){
window.clearInterval(sit);
$doc.trigger('as:rsl:images_loaded');
}
}, 250);
for (var i = 0; i < $photos.length; i++) {
console.log($photos[i].get(0));
$photos[i].get(0).onload = function(){
$photos_loaded++;
};
$photos[i].get(0).onerror = function(){
$photos_loaded++;
var toRemove = this.parentNode.parentNode.parentNode;
var parent = toRemove.parentNode;
parent.removeChild(toRemove);
};
$photos[i].get(0).setAttribute('src',$photos[i].get(0).getAttribute('data-src'));
}
$doc.on('as:rsl:images_loaded', function(){
console.log('as:rsl:images_loaded', $related);
$related.removeClass('hide');
slideshow_init();
});
$doc.on('as:rsl:slideshow_init_done', function(){
console.log('as:rsl:slideshow_init_done', $related);
});
$doc.trigger('as:rsl:done');
};
var slideshow_init = function(){
$related.owlCarousel({
autoplay: true,
autoplayTimeout: 3000,
smartSpeed: 2000,
loop: true,
dots: true,
nav: false,
marging: 30,
items: 4,
responsiveClass: true,
responsive: {
0: {
items: 1,
nav: false
},
600: {
items: 2,
nav: false
},
1000: {
items: 3,
nav: true,
loop: false
}
}
});
$doc.trigger('as:rsl:slideshow_init_done');
}
var arePhotosLoaded = function(){
if($photos_loaded == $photos.length){
return true;
}
return false;
}
return {
init : init
};
})(window.jQuery);
{% for photo in entity.photos|slice(1) %}
bvm.as.asl.addPhoto('{{ ("/upload/crop/" ~ photo.path) | imagine_filter("thumb_733_550") }}');
bvm.as.asl.addPhotoThumb('{{ ("/upload/crop/" ~ photo.path) | imagine_filter("thumb_110_83") }}');
{% endfor %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment