I am using lazyload.js to load images when they come into the visible part of the homepage. To make that happen, I have included the following code into the custom head part of X3:
Code
<!-- Lazyload images -->
<!--
<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.4.0/dist/lazyload.min.js"></script>
-->
<script src="/content/custom/files/javascript/lazyload.min.js" type="text/javascript"></script>
<script>
var lazyLoadInstance = new LazyLoad({
elements_selector: "img, iframe",
callback_enter: (el)=>{
console.log(el, "Hallo");
var nachher = el.parentElement.querySelectorAll("img")[1];
if(nachher)
lazyLoadInstance.load(nachher);
}
});
</script>
<!-- End Lazyload images -->
Though, the carousel widget seems not to work. I have prepared a test page for that: https://ziin-hochzeitsfotograf-duesseld ... ocal/test/
I have enabled logging within the hook to see wether lazyload.js gets triggered or not.
The test page uses a simple image load in the middle of the site:
Code
<div class="row">
<img data-src="./../content/index/20160521_163010_Martina_Sebastian_Shooting_0209.jpg" />
</div>
Code
<div data-carousel data-carousel-items=1 data-carousel-loop=true data-carousel-dots=true
data-carousel-autoplay=0 data-carousel-responsive=true data-carousel-shuffle=false>
<div>
<img data-src="./../content/index/20160521_142410_Martina_Sebastian_Shooting_0032.jpg" />
</div>
<div>
<img data-src="./../content/index/20160521_142704_Martina_Sebastian_Shooting_0042.jpg" />
</div>
<div>
<img data-src="./../content/index/20160521_143821_Martina_Sebastian_Shooting_0091.jpg" />
</div>
</div>
Code
<div data-carousel="" data-carousel-items="1" data-carousel-loop="true" data-carousel-dots="true" data-carousel-autoplay="0" data-carousel-responsive="true" data-carousel-shuffle="false" class="owl-carousel owl-theme owl-loaded">
<div class="owl-stage-outer" style="padding-left: 0px; padding-right: 0px;">
<div class="owl-stage" style="width: 3650px; transform: translate3d(-730px, 0px, 0px); transition: all 0s ease 0s;">
<div class="owl-item cloned" style="width: 730px; margin-right: 0px;">
<div><img data-src="./../content/index/20160521_143821_Martina_Sebastian_Shooting_0091.jpg"></div>
</div>
<div class="owl-item active" style="width: 730px; margin-right: 0px;">
<div><img data-src="./../content/index/20160521_142410_Martina_Sebastian_Shooting_0032.jpg"></div>
</div>
<div class="owl-item" style="width: 730px; margin-right: 0px;">
<div><img data-src="./../content/index/20160521_142704_Martina_Sebastian_Shooting_0042.jpg"></div>
</div>
<div class="owl-item" style="width: 730px; margin-right: 0px;">
<div><img data-src="./../content/index/20160521_143821_Martina_Sebastian_Shooting_0091.jpg"></div>
</div>
<div class="owl-item cloned" style="width: 730px; margin-right: 0px;">
<div><img data-src="./../content/index/20160521_142410_Martina_Sebastian_Shooting_0032.jpg"></div>
</div>
</div>
</div>
<div class="owl-controls">
<div class="owl-nav">
<div class="owl-prev" style="display: none;">prev</div>
<div class="owl-next" style="display: none;">next</div>
</div>
<div class="owl-dots" style="">
<div class="owl-dot active"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
</div>
</div>
</div>
Could you help me out?
Thanks a lot!