Image sequence plays and stops on scroll - javascript

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>

Related

how to divide children index in javascript/jquery

$(document).ready(function() {
$(".font-main-image").each(function() {
childrenElements = $(this).find("img");
});
var num = childrenElements.length;
var direction = 1;
var i = 0;
function toggle() {
childrenElements.eq(i).toggle();
i += direction;
direction *= (((i % (num - 1)) === 0) ? -1 : 1);
}
var dir = 1;
var j = 0;
function toggleback() {
childrenElements.eq(j).toggle();
j += dir;
dir *= (((j % (num - 1)) === 0) ? -1 : 1);
}
function int() {
setInterval(toggleback, 90);
}
setInterval(toggle, 90);
setTimeout(int, 90);
});
img {
display: none;
position: absolute;
width: 400 px;
top: 0 px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="font-main-image">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-01.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-02.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-03.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-04.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-05.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-06.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-07.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-08.svg">
</div>
<div class="font-main-image">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-01.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-02.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-03.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-04.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-05.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-06.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-07.svg">
<img class="font-big-single-image" src="http://demo-studio.ir/reza/wp-content/uploads/2017/06/Ravi-08.svg">
</div>
I have few divs with same classes and and inside of them few img elements with same classes with display : none at my css and I want toggle between children(img elements with same class) from first to last and then from last to first and only have one display:block at a time so it will be some kind of animation. note that there are few divs with the same class and the img elements inside of them have the same class as well and I want to loop through every div separately.

Why isn't my event listener working inside the function?

I have a function that makes a slideshow in JavaScript. While trying to add a feature, changing the slide with fade on click, my function stopped working, what is wrong with it? Complete code on Khan Academy
var slideShow = function(container, time, effect) {
container = document.querySelector(container);
this.images = [];
this.curImage = 0;
if (effect === "click_fade") {
for (i = 0; i < container.childElementCount; i++) {
this.images.push(container.children[i]);
this.images[i].style.opacity = 0;
}
// Handle going to to the next slide
var nextSlideClick = function() {
for (var i = 0; i < this.images.length; i++) {
if (i != this.curImage) this.images[i].style.opacity = 0;
}
this.images[this.curImage].style.opacity = 1;
this.curImage++;
if (this.curImage >= this.images.length) this.curImage = 0;
window.setTimeout(nextSlide.bind(document.getElementById(this)), time);
};
container.addEventListener("click", nextSlideClick)
}
nextSlide.call(this);
};
slideShow("#slideshow", 2000, "click_fade");
.slide {
transition: opacity 0.5s;
position: absolute;
top: 0;
}
<div id="slideshow">
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />
</div>
No result, what is wrong?

You can try the following:
<style>
.slide {
transition: opacity 0.5s;
position: absolute;
top: 0;
}
</style>
<div id="slideshow">
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/birds_rainbow-lorakeets.png" alt="Rainbow lorakeets" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/butterfly.png" alt="Butterfly" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/cat.png" alt="Cat" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/crocodiles.png" alt="Crocodiles" />
<img class="slide" src="https://www.kasandbox.org/programming-images/animals/fox.png" alt="Fox" />
</div>
<script>
var slideShow = function(container, time, effect) {
container = document.querySelector(container);
this.images = [];
this.curImage = 0;
if (effect === "click_fade") {
for (i = 0; i < container.childElementCount; i++) {
this.images.push(container.children[i]);
this.images[i].style.opacity = 0;
}
// Handle going to to the next slide
var nextSlideClick = function() {
for (var i = 0; i < this.images.length; i++) {
if (i != this.curImage) this.images[i].style.opacity = 0;
}
this.images[this.curImage].style.opacity = 1;
this.curImage++;
if (this.curImage >= this.images.length) this.curImage = 0;
window.setTimeout(nextSlideClick.bind(document.getElementById(this)), time);
};
container.addEventListener("click", nextSlideClick)
nextSlideClick.call(this);
}
};
slideShow("#slideshow", 2000, "click_fade");
</script>
Made some minor changes in this jsfiddle : Here

how to create 2 side by side auto playing image slideshows

I would like to add another slideshow with different pics right beside this.
My images have different sizes.
<html>
<head>
<style>
.container{
position:relative;
width:100%;
height:300px;
border-radius:5px;
border:1px solid red;
overflow:hidden;
}
</style>
</head>
<body>
<div id="imgGallary" class="container">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
<script>
(function(){
var imgLen = document.getElementById('imgGallary');
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if(counter <= images.length){
setInterval(function(){
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if(counter === images.length){
counter = 1;
}
},4000);
}
})();
</script>
</body>
</html>

The key concept here is that a slideshow is a region that has some images and the region can be repeated in everywhere in your page, but the JavaScript code should work in a specific region. The code below shows one of some possible solutions.
(function () {
function slideshow(container) {
var imgLen = document.getElementById(container);
var images = imgLen.getElementsByTagName('img');
var counter = 1;
if (counter <= images.length) {
setInterval(function () {
images[0].src = images[counter].src;
console.log(images[counter].src);
counter++;
if (counter === images.length) {
counter = 1;
}
}, 4000);
}
}
slideshow('imgGallary1');
slideshow('imgGallary2');
})();
.container {
display: inline-flex;
}
.sildeshow {
position: relative;
width: 45%;
height: 300px;
border-radius: 5px;
border: 1px solid red;
overflow: hidden;
}
<div class="container">
<div id="imgGallary1" class="sildeshow">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
<div id="imgGallary2" class="sildeshow">
<img src="http://www.examiningcalvinism.com/kingdavid.jpg" alt="" width="100%" height="300" />
<img src="http://www.kingjamesbibleonline.org/1611-Bible/1611-King-James-Bible-Introduction.jpg" alt="" width="100%" height="300" />
<img src="http://biblestudyoutlines.org/wp-content/uploads/2012/07/the-triump-of-david-over-king-hadadezer-of-zobah-1024x729.jpg" alt="" width="100%" height="300" />
<img src="http://www.cgu.edu/Images/news/Flame%20Winter12/KJV-BibleBW.jpg" alt="" width="100%" height="300" />
</div>
</div>

Javascript - How to get element that was clicked

I'm making a really simple photo gallery with thumbnails and I have a working code which changes the big image when a thumbnail is clicked. Now what I need is to add a green border to the thumbnail which is currently active.
HTML:
<div id="gallery">
<div id="big">
<img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div id="small">
<img onclick="changeImage('pipe')" src="small/pipe_small.jpg" alt="" />
<img onclick="changeImage('leaves')" src="small/leaves_small.jpg" alt="" />
<img onclick="changeImage('orange')" src="small/orange_small.jpg" alt="" />
<img onclick="changeImage('xuangong')" src="small/xuangong_small.jpg" alt="" />
</div>
<div id="small">
<img onclick="changeImage('grave')" src="small/grave_small.jpg" alt="" />
<img onclick="changeImage('lotus')" src="small/lotus_small.jpg" alt="" />
<img onclick="changeImage('tibet_girl')" src="small/tibet_girl_small.jpg" alt="" />
<img onclick="changeImage('girl_water')" src="small/girl_water_small.jpg" alt="" />
</div>
</div>
JS:
function changeImage(x){
var image = document.getElementById('image');
var active_image = ??????????
if (x == 'pipe') {
image.src = 'big/pipe_big.jpg';
} else if (x == 'leaves') {
image.src = 'big/leaves_big.jpg';
} else if (x == 'orange') {
image.src = 'big/orange_big.jpg';
} else if (x == 'xuangong') {
image.src = 'big/xuangong_big.jpg';
} else if (x == 'grave') {
image.src = 'big/grave_big.jpg';
} else if (x == 'lotus') {
image.src = 'big/lotus_big.jpg';
} else if (x == 'tibet_girl') {
image.src = 'big/tibet_girl_big.jpg';
} else if (x == 'girl_water') {
image.src = 'big/girl_water_big.jpg';
}
active_image.style.border = '2px solid green';
}
So I need to find the element that triggered the function and put it into variable "active_image" so that the function "changeImage()" always changes the border to 2px solid green. And please no jQuery solutions, I need it to be JavaScript.

Are you looking for this?
var images = document.querySelectorAll( "#gallery img" );
for( i =0; i< images.length; i++ ) {
images[i].style.border = "0px";
}
var active_image = event.target;

Just change the function calls to include 'this' as the second parameter:
<div id="gallery">
<div id="big">
<img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div id="small">
<img id="img1" onclick="changeImage('pipe',this)" src="small/pipe_small.jpg" alt="" />
<img id="img2" onclick="changeImage('leaves',this)" src="small/leaves_small.jpg" alt="" />
<img id="img3" onclick="changeImage('orange',this)" src="small/orange_small.jpg" alt="" />
<img id="img4" onclick="changeImage('xuangong',this)" src="small/xuangong_small.jpg" alt="" />
</div>
<div id="small">
<img id="img5" onclick="changeImage('grave',this)" src="small/grave_small.jpg" alt="" />
<img id="img6" onclick="changeImage('lotus',this)" src="small/lotus_small.jpg" alt="" />
<img id="img7" onclick="changeImage('tibet_girl',this)" src="small/tibet_girl_small.jpg" alt="" />
<img id="img8" onclick="changeImage('girl_water',this)" src="small/girl_water_small.jpg" alt="" />
</div>
And the dom element will be available in the function. So your function becomes:
var active_element_id;
function changeImage(x,element){
var image = document.getElementById('image');
var active_image = element.src;
if (x == 'pipe') {
image.src = 'big/pipe_big.jpg';
} else if (x == 'leaves') {
image.src = 'big/leaves_big.jpg';
} else if (x == 'orange') {
image.src = 'big/orange_big.jpg';
} else if (x == 'xuangong') {
image.src = 'big/xuangong_big.jpg';
} else if (x == 'grave') {
image.src = 'big/grave_big.jpg';
} else if (x == 'lotus') {
image.src = 'big/lotus_big.jpg';
} else if (x == 'tibet_girl') {
image.src = 'big/tibet_girl_big.jpg';
} else if (x == 'girl_water') {
image.src = 'big/girl_water_big.jpg';
}
if(active_element_id){
var active_element = document.getElementById(active_element_id);
active_element.style.border = '0px solid green';
}
element.style.border = '2px solid green';
active_element_id = element.getAttribute('id');
}

You can add a green border to the element which is currently being hovered over, by using onmouseover and onmouseout as well as this.style.borderColor to change the color:
<img onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'" onclick="changeImage('pipe')" src="small/pipe_small.jpg" alt="" />
Working Example:
div {
border-style: solid;
border-width: medium;
border-color: black;
width: 100px;
height: 100px;
}
<div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br>
<div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br><div onmouseover="this.style.borderColor='green'" onmouseout="this.style.borderColor='black'"></div><br>

Plunkr Example
The way with least changes to your code:
function changeImage(x){
var active_image = this;
var image = document.getElementById('image');
var images = [],
containers = document.getElementsByClassName('small');
for (var i=0,n=containers.length; i < n; i++){
var imgs = containers[i].getElementsByTagName('img');
for (var j=0,m=imgs.length; j < m; j++ ){
images = images.concat(imgs[j]);
}
}
if (x == 'pipe') {
image.src = 'big/pipe_big.jpg';
} else if (x == 'leaves') {
image.src = 'big/leaves_big.jpg';
} else if (x == 'orange') {
image.src = 'big/orange_big.jpg';
} else if (x == 'xuangong') {
image.src = 'big/xuangong_big.jpg';
} else if (x == 'grave') {
image.src = 'big/grave_big.jpg';
} else if (x == 'lotus') {
image.src = 'big/lotus_big.jpg';
} else if (x == 'tibet_girl') {
image.src = 'big/tibet_girl_big.jpg';
} else if (x == 'girl_water') {
image.src = 'big/girl_water_big.jpg';
}
// reset border
for (var i=0,n=images.length;i<n;i++){
images[i].style.border = '0px solid green';
}
// set active border
active_image.style.border = '2px solid green';
}
Note you cannot have two elements with the same ID (e.g., small), so you must use a class, or change the ID to a unique name.
Also see that if you use the call() method, you can pass along what this is. In this case, it's important because you want to pass along the element that is being clicked. So for onclick="<function name>.call(this)", the this is that element.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="gallery">
<div id="big">
<img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div class="small">
<img onclick="changeImage.call(this,'pipe')" src="small/pipe_small.jpg" alt="" />
<img onclick="changeImage.call(this,'leaves')" src="small/leaves_small.jpg" alt="" />
<img onclick="changeImage.call(this,'orange')" src="small/orange_small.jpg" alt="" />
<img onclick="changeImage.call(this,'xuangong')" src="small/xuangong_small.jpg" alt="" />
</div>
<div class="small">
<img onclick="changeImage.call(this,'grave')" src="small/grave_small.jpg" alt="" />
<img onclick="changeImage.call(this,'lotus')" src="small/lotus_small.jpg" alt="" />
<img onclick="changeImage.call(this,'tibet_girl')" src="small/tibet_girl_small.jpg" alt="" />
<img onclick="changeImage.call(this,'girl_water')" src="small/girl_water_small.jpg" alt="" />
</div>
</div>
</body>
</html>
Big Note
There is much more you could do to your code to make it more scalable and efficient, this is only a starter answer, without confusing you too much. Please keep at, keep learning and expanding your knowledge.

You can use this inside an event handler to get the element. However, since you use inline event handlers, inside changeImage, this will be another value (you could still pass it using call, apply, or as an argument).
However, better avoid inline event listeners:
var image = document.getElementById('image'),
images = document.getElementById('small').getElementsByTagName('img');
for(var i=0; i<images.length; ++i)
images[i].addEventListener('click', changeImage);
function changeImage(){
var x = this.getAttribute('data-img');
image.src = 'big/' + x + '_big.jpg';
this.style.border = '2px solid green';
}
<div id="gallery">
<div id="big">
<img align="center" src="big/pipe_big.jpg" alt="" id="image" />
</div>
<div id="small">
<img data-img="pipe" src="small/pipe_small.jpg" alt="" />
<img data-img="leaves" src="small/leaves_small.jpg" alt="" />
<img data-img="orange" src="small/orange_small.jpg" alt="" />
<img data-img="xuangong" src="small/xuangong_small.jpg" alt="" />
<img data-img="grave" src="small/grave_small.jpg" alt="" />
<img data-img="lotus" src="small/lotus_small.jpg" alt="" />
<img data-img="tibet_girl" src="small/tibet_girl_small.jpg" alt="" />
<img data-img="girl_water" src="small/girl_water_small.jpg" alt="" />
</div>
</div>

Javascript slideshow, image skips on first playthrough?

I have created the following slideshow in javascript. But for some reason on the first slide through of images, the first image just moves off and the second image does the "sliding". Any help would be appreciated. I have included comments to help make the code more readable.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
img.pic {
position: absolute;
height: 768px;
width: 1024px;
}
html, body {
background-color:#3b3b35;
width: 1024px;
height: 768px;
margin: 0;
padding: 0;
overflow:hidden;
}
</style>
</head>
<body onload="startImages()">
<img class="pic" id="slide0" src="1.jpg" alt="pic1" />
<img class="pic" id="slide1" src="2.jpg" alt="pic2" />
<img class="pic" id="slide2" src="3.jpg" alt="pic3" />
<img class="pic" id="slide3" src="4.jpg" alt="pic4" />
<img class="pic" id="slide4" src="5.jpg" alt="pic5" />
<img class="pic" id="slide5" src="6.jpg" alt="pic6" />
<img class="pic" id="slide6" src="7.jpg" alt="pic7" />
<img class="pic" id="slide7" src="8.jpg" alt="pic8" />
<img class="pic" id="slide8" src="9.jpg" alt="pic9" />
<img class="pic" id="slide9" src="10.jpg" alt="pic10" />
<script type="text/javascript">
// Define the x start variable
var xstart = 0;
// Constructor for an image object:
function Image(obj, x) {
this.object = obj;
this.xpos = x;
}
// Image array
var Images = [];
// Sets up the images
function startImages() {
for (var Imageamount = 0; Imageamount < 10; Imageamount++) {
var Imgstore = document.getElementById("slide" + Imageamount);
// Puts image in the array
Images[Imageamount] = new Image(Imgstore, xstart);
xstart = xstart - 1024;
}
// Controlls the delays
setInterval(function () {
var val = 0;
var Interval = setInterval(function () {
imSlide();
val++;
if (val == 16) clearInterval(Interval); // 16*64 = 1024, ie image size
}, 30);
}, 5000);
}
function imSlide() { // Controlls sliding
for (var Slide = 0; Slide < Images.length; Slide++) {
var image = Images[Slide];
// Update + 64 to give a smooth slide. Updates 16 times so 16*64=1024
var x = image.xpos + 64;
// Move image from far right back to front of image stack
if (x == 5120) {
x = -5120;
}
// Store position back in array
image.xpos = x;
// Move the image
image.object.style.left = x + "px";
}
}
</script>
</body>
</html>

The reason that your slide show skips on the first interval is because you aren't setting the image's position when you first create your Image objects; you're only setting a variable that you have named 'xpos'. This causes all your images to overlap each other and display the last image, #slide9, on top of the others on page load.
modify your Image object declaration to this:
function Image(obj, x) {
this.object = obj;
this.xpos = x;
this.object.style.left = x + "px"; //<--- this is the new part
}
here is the jsfiddle: http://jsfiddle.net/w9qQx/4/

Categories