Created
November 30, 2016 09:14
-
-
Save rccc/8dbeaed97feea5284b7cb6814ffe6001 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| 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