We Keep Coding

Is it possible to make loading = 'lazy' work in <img /> with X axis?

I used the feature img lazy loading for page with X axis scroll. But it works incorrect, images start loading only when they already appear on the page, instead of doing it earlier.
Example:
function l(num) {
document.getElementById('log').innerText += "loaded #" + num + " image\n";
}
.images {
display: inline-block;
width: 300px;
overflow: hidden;
overflow-x: visible;
border: 1px solid magenta;
white-space: nowrap;
}
#log {
display: inline-block;
vertical-align: top;
}
<div class="images">
<img loading="lazy" src="https://picsum.photos/300/150?1" height="150" width="300" onload="l(1)" />
<img loading="lazy" src="https://picsum.photos/300/150?2" height="150" width="300" onload="l(2)" />
<img loading="lazy" src="https://picsum.photos/300/150?3" height="150" width="300" onload="l(3)" />
<img loading="lazy" src="https://picsum.photos/300/150?4" height="150" width="300" onload="l(4)" />
<img loading="lazy" src="https://picsum.photos/300/150?5" height="150" width="300" onload="l(5)" />
<img loading="lazy" src="https://picsum.photos/300/150?6" height="150" width="300" onload="l(6)" />
<img loading="lazy" src="https://picsum.photos/300/150?7" height="150" width="300" onload="l(7)" />
</div>
<div id="log" />
I have come to the conclusion that this only works for images that are below the current point on the Y axis.
How do you do this for the Y axis?
UPD: 04.03.2021
lazy work with X axis. But lazy work ONLY in main "body" scroll! When I make any div with overflow: auto as result lazy loading doesn't work at all!

You can use IntersectionObserver like this
const lazyInit = (element, fn) => {
const config = {
rootMargin: '0px 0px 50px 0px',
threshold: 0
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
observer.disconnect(); //drop observer and run the function {fn}
fn();
}
});
}, config);
observer.observe(element);
};
document.querySelectorAll("img[data-src]").forEach(img => {
lazyInit(img, function() {
preloadImage(img);
});
});
function preloadImage(img) {
const src = img.getAttribute('data-src');
if (!src) { return; }
img.src = src;
}
Then you must replace the src attribute of the img with data-src.
The img elements should look something like this
<img data-src="https://picsum.photos/300/150?1" height="150" width="300" />
The important thing here is the property rootMargin. Read more here.
I hope this helps

Image sequence plays and stops on scroll

This image sequence plays automatically but I want the first 7 images are played automatically and the remaining images (8 to 15) are played after one scroll.
How would I do this?
onload = function startAnimation() {
var frames = document.getElementById("animation").children;
var frameCount = frames.length;
var i = 0,
j = 0;
var interval = setInterval(function() {
frames[i % frameCount].style.display = "none";
frames[++i % frameCount].style.display = "block";
j++;
if (j === 14) {
clearInterval(interval);
document.getElementsByClassName("d-none")[0].classList.add('d-block');
}
}, 100);
}
#animation img {
display: none;
}
#animation img:first-child {
display: block;
}
.d-none {
display: none
}
.d-block {
display: block;
}
<div id="animation">
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging01.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging02.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging03.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging04.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging05.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging06.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging07.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging08.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging09.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging10.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging11.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging12.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging13.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging14.png" />
<img src="http://jumpingfishes.com/dancingpurpleunicorns/charging15.png" />
</div>
<div class="d-none">
this div is aappear
</div>

Multiple Auto fade in/fade out on loop in multiple divs

I have 3 columns in a table with different pictures in each. I am trying to have the fade at different times with different pictures in a loop and to start automatically.
I have managed to get it working but i have after about 20 seconds i have white boxes and not images.
Here is a link to it on https://jsfiddle.net/nmcj4yze/3/.
My Jquery code:
$(document).ready(function () {
var InfiniteRotator = {
init: function () {
//initial fade-in time (in milliseconds)
var initialFadeIn = 4000;
//interval between items (in milliseconds)
var itemInterval = 4000;
//cross-fade time (in milliseconds)
var fadeTime = 4000;
//count number of items
var numberOfItems = $('.rotating-home').length;
//set current item
var currentItem = 0;
//show first item
$('.rotating-home').eq(currentItem).fadeIn(initialFadeIn);
//loop through the items
var infiniteLoop = setInterval(function () {
$('.rotating-home').eq(currentItem).fadeOut(fadeTime);
var rand = Math.floor(Math.random() * (numberOfItems - 1)) + 1;
currentItem = (currentItem + rand) % numberOfItems;
$('.rotating-home').eq(currentItem).fadeIn(fadeTime);
}, itemInterval);
}
};
InfiniteRotator.init();
});
//]]>
Css:
body {
color:#999;
font-family:"MS Serif", "New York", serif;
font-size:16px;
padding-left:20px;}
/* slider */
#rotating-item-wrapper {
list-style-type:none;
margin:0;
padding:0;
height: 150px;
}
.rotating-home {
display:;
position: absolute;
}
And Html:
<table width="60%" align="center">
<tr>
<td>
<div id="rotating-home-wrapper">
<div class="rotating-home">
<img src="http://paul.cerrone.me/wp-content/uploads/2013/06/BQcDAAAAAwoDanBnAAAABC5vdXQKFjlCVTZ6M0RDM3hHN2xTbFRpWUlPQlEAAAACaWQKAXgAAAAEc2l6ZQ.jpg" height="100" width="100" border="0" />
</div>
<div class="rotating-home">
<img src="http://www.dailyfailcenter.com/sites/default/files/fail/ea662e71d267.jpg" class="slide" height="100" width="100" border="0" />
</div>
</td>
<td>
<div class="rotating-home">
<img src="http://blog.epromos.com/images/google-dog.jpg" class="slide" height="100" border="0" />
</div>
<div class="rotating-home">
<img src="http://www.thelastnewspaper.com/images-future/gps-dog-tracking-300x400.jpg" class="slide" height="100" border="0" />
</div>
</td>
<td>
<div class="rotating-home">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHzIZUSCKJBajh8kY8zbVmyYYBCbzgy7ADISw6h9cCJ-Mw2pwnFw" class="slide" height="100" border="0" />
</div>
<div class="rotating-home">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWgFW9ZbKPn3_ECEJgV58atYzlbyZzKzvkhgsP3zdt4BFmw_7GfQ" class="slide" height="100" border="0" />
</div>
</td>
</div>
</tr>
Updated
Sorry i should of been more clear.
At first i want 3 columns in a table. The first one was 600x600, the second was 300x600 and the third was 300x600. When the page loads you see 3 pictures. After 4 seconds column 1 fades into another picture without going to a white background. After another 4 seconds column two fades into a another picture, and after another 4 seconds column 3 does then same. I would like to be on a continuous cycle so it would start again. But i couldn't do that, i did achieve something close with a random cycle but i have white backgrounds after about 20 seconds. Not sure where i am going wrong
I have tried everything and and look everywhere.
Any help will be much appreciated.
Thanks

I'm assuming the following is what you wanted:
https://jsfiddle.net/nmcj4yze/7/
You were on the right track. I cleaned up your HTML a bit, and removed some CSS that wasn't doing anything. I also made it so that the initial image in each table was hidden.
With regards to the javascript, I switched out the selectors to iterate over each <td> element, and had it use jQuery's fadeToggle() function on its contents. Given that the first item was hidden by default, this would immediately toggle the animations for both images.
Changed your code to the following:
$(document).ready(function () {
var InfiniteRotator = {
init: function () {
//initial fade-in time (in milliseconds)
var initialFadeIn = 4000;
//interval between items (in milliseconds)
var itemInterval = 4000;
//cross-fade time (in milliseconds)
var fadeTime = 4000;
//count number of items
var rotationLimit = $('td').length + 1;
//set current item
var currentItem = 0;
//loop through the items
var infiniteLoop = setInterval(function () {
$('td').eq(currentItem).find('.rotating-home').fadeToggle(fadeTime);
currentItem++;
if(currentItem == rotationLimit) currentItem = 0;
}, itemInterval);
}
};
InfiniteRotator.init();
});
//]]>
#charset"utf-8";
#page {
height: 100%;
display: none;
}
body {
color:#999;
font-family:"MS Serif", "New York", serif;
font-size:16px;
padding-left:20px;
}
.rotating-home {
position: absolute;
}
.rotating-home:first-of-type {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table width="60%" align="center">
<tr>
<td>
<div class="rotating-home" data-display="0">
<img src="http://paul.cerrone.me/wp-content/uploads/2013/06/BQcDAAAAAwoDanBnAAAABC5vdXQKFjlCVTZ6M0RDM3hHN2xTbFRpWUlPQlEAAAACaWQKAXgAAAAEc2l6ZQ.jpg" height="100" width="100" border="0" />
</div>
<div class="rotating-home" data-display="1">
<img src="http://www.dailyfailcenter.com/sites/default/files/fail/ea662e71d267.jpg" class="slide" height="100" width="100" border="0" />
</div>
</td>
<td>
<div class="rotating-home" data-display="2">
<img src="http://blog.epromos.com/images/google-dog.jpg" class="slide" height="100" border="0" />
</div>
<div class="rotating-home" data-display="3">
<img src="http://www.thelastnewspaper.com/images-future/gps-dog-tracking-300x400.jpg" class="slide" height="100" border="0" />
</div>
</td>
<td>
<div class="rotating-home" data-display="4">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQHzIZUSCKJBajh8kY8zbVmyYYBCbzgy7ADISw6h9cCJ-Mw2pwnFw" class="slide" height="100" border="0" />
</div>
<div class="rotating-home" data-display="5">
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSWgFW9ZbKPn3_ECEJgV58atYzlbyZzKzvkhgsP3zdt4BFmw_7GfQ" class="slide" height="100" border="0" />
</div>
</td>
</tr>
</table>

Get image height and change the image container height to auto

I'm trying to determine the height of images in containers and if any image has a height of less than 300 pixels then I want its container height to be set to auto.
Here is my code:
<style>
.container {
width: 500px;
height: 500px;
}
</style>
<script>
var img = document.getElementsByTagName("img");
if (img.height < 300) {
var x = document.getElementsByClassName('container');
x.style.height="auto";
}
</script>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
<div class="container">
<img height="250" width="250" src="/some_img.jpg"/> // This image height is less than 300 pixels.
</div>
<div class="container">
<img height="500" width="500" src="/some_img.jpg"/>
</div>
Any help would be appreciated.

First you get all image tags, then itterate through them, if their height is less than 500, then you get its parent element and set its height to 'auto'
here is a working example
var img = document.getElementsByTagName("img");
console.log(img)
for (index in img){
if (img[index].height < 300) {
img[index].parentNode.style.height="auto";
}
}

img = getElementsByTagName("img") returns all images, not just one, so you can't use it as img.height, you should use for loop or jQuery selector
x = document.getElementsByClassName('container') also returns all elements, so you can't set its style directly. And you need to set style for parent element of current processed image, not just first or all of them. You can use jQuery .parent()
Your script is executed before the img elements begin to exist. Either put you script after html or use jQuery $(document).ready() event
I think you should put a dot before slash in src (src="./some_img.jpg")
So with jQuery it will look like this:
<script>
$(document).ready(function(){
$("img").each(function(){
if( $(this).height() < 300 ) {
$(this).parent().height( "auto" );
}
});
});
</script>

Vanilla JS
Iterate over the images. If they are <300 and their parent has the class of 'container' then set the parent's style.height to 'auto:
var imgs = document.getElementsByTagName("img");
for (i in imgs){
if (imgs[i].height < 300 && imgs[i].parentNode.className.indexOf('container') != -1) {
imgs[i].parentNode.style.height="auto";
}
}
var imgs = document.getElementsByTagName("img");
for (i in imgs){
if (imgs[i].height < 300 && imgs[i].parentNode.className.indexOf('container') != -1) {
imgs[i].parentNode.style.height="auto";
}
}
.container {
width: 500px;
height: 500px;
}
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/" />
</div>
<div class="container">
<img height="250" width="250" src="http://www.placehold.it/250/250/"/><!--This image height is less than 300 pixels.-->
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
jQuery
Use jQuery's filter() to simply find all .containers that contain images with a height < 300:
$(".container")
.filter(function(){return $(this).find("img").height() < 300;})
.css("height", "auto");
$(function(){
$(".container").filter(function(){return $(this).find("img").height() < 300;}).css("height", "auto");
});
.container {
width: 500px;
height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/" />
</div>
<div class="container">
<img height="250" width="250" src="http://www.placehold.it/250/250/"/><!--This image height is less than 300 pixels.-->
</div>
<div class="container">
<img height="500" width="500" src="http://www.placehold.it/500/500/"/>
</div>

Adding Next and Prev Button for Thumbnails Gallery and Larger Image Gallery

I am trying to add the next and prev button for both thumbnail and larger image gallery. And that next and prev button should support the keyboard event listeners too.
This is the link which I have tried.
http://jsfiddle.net/L7yKp/36/
I need some help.

Here i have done complete solution for above issue for adding next and previous buttons.
Demo: http://codebins.com/bin/4ldqp7y
HTML
<div id="panel">
<div class="controls">
<img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
<span>
Thumbnail Navigation
</span>
<img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
</div>
<div id="thumbs">
<div class="thumb active">
<img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" width="100" height="80" />
</div>
<div class="thumb">
<img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" width="100" height="80" />
</div>
</div>
<div class="controls" align="center" width="400px">
<img src="http://aux.iconpedia.net/uploads/1698581142461241089.png" class="prev" />
<span>
Large Image Navigation
</span>
<img src="http://cdn1.iconfinder.com/data/icons/fatcow/32x32_0760/resultset_next.png" class="next" />
</div>
<div id="large">
<div class="bigthumb active">
<img src="http://images.replacements.com/images/images5/china/C/lenox_china_garden_birds_no_box_P0000014675S0122T2.jpg" />
</div>
<div class="bigthumb">
<img src="http://coolfunnyanimals.com/thumb/funny-animal-bird-47.jpg" />
</div>
<div class="bigthumb">
<img src="http://learnordie.files.wordpress.com/2012/05/thrasher.jpg" />
</div>
<div class="bigthumb">
<img src="http://3.bp.blogspot.com/_N_mOB63qPaE/TSC17ceXRII/AAAAAAAARaQ/TeDi9FYIBPw/s1600/Flying-Bird-Picture-2.jpg" />
</div>
<div class="bigthumb">
<img src="http://www.kevinhearne.com/wp-content/uploads/2011/11/pic6.jpg" />
</div>
</div>
</div>
CSS:
#thumbs{
text-align:center;
background:#77a5c6;
padding:5px;
}
.thumb{
display:inline-block;
margin:0px;
padding:0px;
cursor:pointer;
}
#thumbs .active{
border:3px solid #333;
}
.controls{
margin-left:10px;
}
.controls img{
cursor:pointer;
margin:0px;
}
.controls span{
font-size:13px;
display:inline-block;
vertical-align:top;
margin-top:5px;
}
#large{
text-align:center;
}
#large .bigthumb{
display:none;
}
#large .active{
display:block;
}
#large .active img{
border:2px solid #333;
}
jQuery:
$(function() {
$("#thumbs").find(".thumb:first").addClass("active");
$("#large").find(".bigthumb:first").addClass("active");
var getIndex = $("#thumbs").find(".active").index();
$(".controls").each(function() {
$(this).find(".next").click(function() {
getIndex = $("#thumbs").find(".active").index();
getIndex += 1;
if (getIndex > ($("#thumbs").find(".thumb").length - 1)) {
getIndex = 0;
}
setActiveImage(getIndex);
});
$(this).find(".prev").click(function() {
getIndex -= 1;
if (getIndex < 0) {
getIndex = $("#thumbs").find(".thumb").length - 1;
}
setActiveImage(getIndex); //Set/Show Active Image
});
});
});
function setActiveImage(index) {
if (typeof(index) == "undefined" || index == "" || index == null) index = 0;
$("#thumbs").find(".thumb").removeClass("active");
$("#thumbs").find(".thumb:eq(" + index + ")").addClass("active");
$("#large").find(".bigthumb").removeClass("active");
$("#large").find(".bigthumb:eq(" + index + ")").addClass("active");
}
Demo: http://codebins.com/bin/4ldqp7y

See http://jsfiddle.net/L7yKp/37/
The problem is
$(['next','prev']).each(function(){
var that=this;
$('#'+that).click(function(){
$('#thumbs img.clicked')[that]().click();
});
});
because now you have
Next
Prev
and
Next
Prev
So the solution is;
$(['next','prev']).each(function(){
var that=this;
$('.'+that).click(function(){
$('#thumbs .clicked')[that]().click();
});
});
and
Next
Prev