{"id":7927,"date":"2015-11-10T12:03:32","date_gmt":"2015-11-10T12:03:32","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/11\/10\/lazy-load-owl-carousel-with-picturefill-open-source-projects-scottjehl-picturefill\/"},"modified":"2015-11-10T12:03:32","modified_gmt":"2015-11-10T12:03:32","slug":"lazy-load-owl-carousel-with-picturefill-open-source-projects-scottjehl-picturefill","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/11\/10\/lazy-load-owl-carousel-with-picturefill-open-source-projects-scottjehl-picturefill\/","title":{"rendered":"Lazy Load Owl Carousel with Picturefill-open source projects scottjehl\/picturefill"},"content":{"rendered":"<p>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 &#8220;Responsive&#8221; 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.<\/p>\n<p><strong>Example url:<\/strong><\/p>\n<p>http:\/\/dx1showroom.azurewebsites.net\/picturefill\/2.html<\/p>\n<p><strong>Goals:<\/strong><\/p>\n<p><strong>I have working:<\/strong><\/p>\n<ul>\n<li>Owl carousels are working<\/li>\n<li>Synced carousels (main &amp; thumbnail sliders)<\/li>\n<li>Loading images with Picturefill<\/li>\n<\/ul>\n<p><strong>HTML:<\/strong><\/p>\n<pre><code>\n    \n        \n        \/\n    \n\n    \n        \n        \n            \n                \n                \n                \n                \n                \n                \n                \n                \n                <img srcset=\"http:\/\/placehold.it\/1300x867\" alt=\"Picturefill Test\" \/>\n            \n        \n        \n        \n            \n                \n                \n                \n                \n                \n                \n                \n                \n                <img srcset=\"https:\/\/media.dx1app.com\/v1\/media\/53d68f53b43a22e37500027f.jpg\" alt=\"Picturefill Test\" \/>\n                \n                \n        \n\n        \n            <img decoding=\"async\" src=\"http:\/\/img.youtube.com\/vi\/GZL6piSl5P8\/1.jpg\" alt=\"\" class=\"img-responsive\" \/>\n            <img decoding=\"async\" src=\"http:\/\/placehold.it\/135x90&amp;text=Responsive\" alt=\"\" class=\"img-responsive\" \/>\n            <img decoding=\"async\" src=\"http:\/\/img.youtube.com\/vi\/akhmS1D2Ce4\/1.jpg\" alt=\"\" class=\"img-responsive\" \/>\n            <img decoding=\"async\" src=\"https:\/\/media.dx1app.com\/v1\/media\/53d68f53b43a22e37500027f.jpg?width=300\" alt=\"\" class=\"img-responsive\" \/>\n        \n    \n<\/code><\/pre>\n<p><strong>JavaScript:<\/strong><\/p>\n<pre><code>$(document).ready(function() {\n\n    \/\/ Owl Slider Function\n    function sync(el){\n        var current = this.currentItem;\n        $(\"#slideshow-thumbnails\")\n            .find(\".owl-item\")\n            .removeClass(\"synced\")\n            .eq(current)\n            .addClass(\"synced\")\n        if($(\"#slideshow-thumbnails\").data(\"owlCarousel\") !== undefined){\n            center(current)\n        }\n\n        updateResult(\".owlItems\", this.owl.owlItems.length);\n        updateResult(\".currentItem\", this.owl.currentItem +1);\n    }\n\n    \/\/ Owl Slider Function\n    function center(number){\n        var owlSync2visible = owlSync2.data(\"owlCarousel\").owl.visibleItems;\n        var num = number;\n        var found = false;\n\n        for(var i in owlSync2visible){\n            if(num === owlSync2visible[i]){\n                var found = true;\n            }\n        }\n\n        if(found===false){\n            if(num&gt;owlSync2visible[owlSync2visible.length-1]) {\n                owlSync2.trigger(\"owl.goTo\", num - owlSync2visible.length+2)\n            } else {\n                if(num - 1 === -1){\n                    num = 0;\n                }\n                owlSync2.trigger(\"owl.goTo\", num);\n                }\n        } else if(num === owlSync2visible[owlSync2visible.length-1]) {\n            owlSync2.trigger(\"owl.goTo\", owlSync2visible[1])\n        } else if(num === owlSync2visible[0]){\n            owlSync2.trigger(\"owl.goTo\", num-1)\n        }\n    }\n\n    function updateResult(pos,value){\n        sliderStatus.find(pos).find(\".result\").text(value);\n    }\n\n\n    \/\/ Owl Slider\n    var sliderStatus = $(\"#sliderStatus\");\n\n    var owlSync1 = $(\"#slideshow-main\").owlCarousel({\n        singleItem : true,\n        slideSpeed : 500,\n        navigation: true,\n        pagination: false,\n        \/\/ itemsScaleUp: true,\n        afterAction : sync,\n        responsiveRefreshRate : 200,\n        navigation: true,\n        navigationText: [\n            '',\n            ''\n        ],\n        afterUpdate : function() {\n            sliderMainMaxHeight('#slideshow-main');\n            posSliderControls('#slideshow-main');\n            posAlignImgVertically('#slideshow-main');\n        }\n    });\n\n    var owlSync2 = $(\"#slideshow-thumbnails\").owlCarousel({\n        items : 8,\n        itemsDesktop      : [1199,8],\n        itemsDesktopSmall     : [992,8],\n        itemsTablet       : [768,6],\n        itemsMobile       : [520,3],\n        pagination:false,\n        responsiveRefreshRate : 100,\n        scrollPerPage: true,\n        navigation: true,\n        navigationText: [\n            '',\n            ''\n        ],\n        afterInit : function(el){\n            el.find(\".owl-item\").eq(0).addClass(\"synced\");\n        },\n        afterUpdate : function() {\n            sliderMainMaxHeight('#slideshow-thumbnails');\n            posSliderControls('#slideshow-thumbnails');\n            posSliderImgCounter('#slideshow-thumbnails');\n            posAlignImgVertically('#slideshow-thumbnails');\n        }\n    });\n\n    $(\"#slideshow-thumbnails\").on(\"click\", \".owl-item\", function(e){\n        e.preventDefault();\n        var number = $(this).data(\"owlItem\");\n        owlSync1.trigger(\"owl.goTo\",number);\n    });\n\n    $(\".owl-carousel\").fitVids();;\n});\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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 &#8220;Responsive&#8221; thumbnail (second image after the YouTube thumbnail). Then expand\/contract your browser window and you should see the image referenced being updated depending [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7927","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7927","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7927"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7927\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7927"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7927"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7927"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}