I am using the Owl Carousel and Picturefill plugins and I would like to lazy load the main slider images. Any help would be appreciated. In the example url, click on the "Responsive" thumbnail (second image after the YouTube thumbnail). Then expand/contract your browser window and you should see the image referenced being updated depending on the size of the browser.
Example url:
http://dx1showroom.azurewebsites.net/picturefill/2.html
Goals:
- Use Owl Carousel - www.owlcarousel.owlgraphic.com
- With Picturefill - http://scottjehl.github.io/picturefill/
- Sync with second owl carousel slider
- And lazy load main slider
I have working:
- Owl carousels are working
- Synced carousels (main & thumbnail sliders)
- Loading images with Picturefill
HTML:
<div class="thumbnail-frame">
<div id="sliderStatus" class="image-count">
<span class="glyphicon icon-camera"></span>
<span class="currentItem"><span class="result"></span></span>/<span class="owlItems"><span class="result"></span></span>
</div>
<div id="slideshow-main" class="owl-carousel main-frame col-sm-8 col-md-8 col-lg-9">
<div class="item video"><iframe width="563" height="422" src="//www.youtube.com/embed/GZL6piSl5P8?rel=0" frameborder="0" allowfullscreen></iframe></div>
<div class="item">
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://placehold.it/1300x867" media="(min-width: 1200px)">
<source srcset="http://placehold.it/1000x667" media="(min-width: 992px)">
<source srcset="http://placehold.it/800x533" media="(min-width: 768px)">
<source srcset="http://placehold.it/650x433" media="(min-width: 600px)">
<source srcset="http://placehold.it/460x307" media="(min-width: 400px)">
<source srcset="http://placehold.it/320x213" media="(min-width: 100px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="http://placehold.it/1300x867" alt="Picturefill Test">
</picture>
</div>
<div class="item video"><iframe width="563" height="422" src="//www.youtube.com/embed/akhmS1D2Ce4?rel=0" frameborder="0" allowfullscreen></iframe></div>
<div class="item">
<picture class="lazyOwl">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg" media="(min-width: 1200px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=1000" media="(min-width: 992px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=800" media="(min-width: 768px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=650" media="(min-width: 600px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=460" media="(min-width: 400px)">
<source srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=320" media="(min-width: 100px)">
<!--[if IE 9]></video><![endif]-->
<img srcset="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg" alt="Picturefill Test">
</picture>
</div>
</div>
<div id="slideshow-thumbnails" class="owl-carousel thumbnail-frame">
<div class="item"><a><img src="http://img.youtube.com/vi/GZL6piSl5P8/1.jpg" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://placehold.it/135x90&text=Responsive" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="http://img.youtube.com/vi/akhmS1D2Ce4/1.jpg" alt="" class="img-responsive"></a></div>
<div class="item"><a><img src="https://media.dx1app.com/v1/media/53d68f53b43a22e37500027f.jpg?width=300" alt="" class="img-responsive"></a></div>
</div>
</div>
JavaScript:
$(document).ready(function() {
// Owl Slider Function
function sync(el){
var current = this.currentItem;
$("#slideshow-thumbnails")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($("#slideshow-thumbnails").data("owlCarousel") !== undefined){
center(current)
}
updateResult(".owlItems", this.owl.owlItems.length);
updateResult(".currentItem", this.owl.currentItem +1);
}
// Owl Slider Function
function center(number){
var owlSync2visible = owlSync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in owlSync2visible){
if(num === owlSync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>owlSync2visible[owlSync2visible.length-1]) {
owlSync2.trigger("owl.goTo", num - owlSync2visible.length+2)
} else {
if(num - 1 === -1){
num = 0;
}
owlSync2.trigger("owl.goTo", num);
}
} else if(num === owlSync2visible[owlSync2visible.length-1]) {
owlSync2.trigger("owl.goTo", owlSync2visible[1])
} else if(num === owlSync2visible[0]){
owlSync2.trigger("owl.goTo", num-1)
}
}
function updateResult(pos,value){
sliderStatus.find(pos).find(".result").text(value);
}
// Owl Slider
var sliderStatus = $("#sliderStatus");
var owlSync1 = $("#slideshow-main").owlCarousel({
singleItem : true,
slideSpeed : 500,
navigation: true,
pagination: false,
// itemsScaleUp: true,
afterAction : sync,
responsiveRefreshRate : 200,
navigation: true,
navigationText: [
'<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>',
'<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>'
],
afterUpdate : function() {
sliderMainMaxHeight('#slideshow-main');
posSliderControls('#slideshow-main');
posAlignImgVertically('#slideshow-main');
}
});
var owlSync2 = $("#slideshow-thumbnails").owlCarousel({
items : 8,
itemsDesktop : [1199,8],
itemsDesktopSmall : [992,8],
itemsTablet : [768,6],
itemsMobile : [520,3],
pagination:false,
responsiveRefreshRate : 100,
scrollPerPage: true,
navigation: true,
navigationText: [
'<span class="thumb-prev"><span class="glyphicon icon-prev-arrow"></span></span>',
'<span class="thumb-next"><span class="glyphicon icon-next-arrow"></span></span>'
],
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
},
afterUpdate : function() {
sliderMainMaxHeight('#slideshow-thumbnails');
posSliderControls('#slideshow-thumbnails');
posSliderImgCounter('#slideshow-thumbnails');
posAlignImgVertically('#slideshow-thumbnails');
}
});
$("#slideshow-thumbnails").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
owlSync1.trigger("owl.goTo",number);
});
$(".owl-carousel").fitVids();;
});