We Keep Coding

How to make an image fade in once using plain javascript?

I am using an AOS (animate-on-scroll) library in my html to help fade in the images, but javascript to trigger the actual fading-in. I want the image to fade-in when I am scrolling past, but not to fade back out when I scroll back up. The code below is what I've tried so far, but the image isn't showing up. I've seen a way to do this in jQuery, but I wanted to see if I could do it in plain JS. I got the image to show up and fade-in using the onscroll handler, but ran into the problem of it fading-in repeatedly if I moved back to the top of the page. Below is what I have using an event listener
HTML:
//sets the point at which the image will fade in
let pic = document.getElementById("pic");
let characterCaption = document.getElementById("characters");
let triggerAt = 100;
function getPic() {
pic.onscroll;
let topOfImage = pic.scrollTop + triggerAt;
return topOfImage;
}
window.addEventListener("scroll", fadeInImage);
//attempt to fade in image at certain point and prevent image from fading in again
function fadeInImage() {
let currentPosition = window.pageYOffset;
let topOfImage = getPic();
if (currentPosition > topOfImage) {
pic.style.visibility = "visible";
characterCaption.style.visibility = "visible";
window.removeEventListener("scroll", fadeInImage);
}
}
<img id="pic" src="https://cdn.vox-cdn.com/thumbor/MZRJnpwAMIHQ5-XT4FwNv0rivw4=/1400x1400/filters:format(jpeg)/cdn.vox-cdn.com/uploads/chorus_asset/file/19397812/1048232144.jpg.jpg" width="500px" height="650px" data-aos="fade-left" data-aos-duration="2000" data-aos-easing="ease-in-sine">
<p id="characters"> picture caption </p>

Targeting HTML ID's and using jQuery to modify the content

I have this photo switcher below that I want to modify the HTML content using jQuery only. If you click on the "Show Next Photo" link jQuery will replace the "fruits.png" with another image example "airplane.png". (note: No changes to the HTML block is allowed).
I'm not sure how complicated it can be for jQuery. If I could avoid JavaScript, would be perfect.
<!--Do Not Change Inside this DIV-->
<div id="imageSwitcher">
<img src="https://homepages.cae.wisc.edu/~ece533/images/fruits.png" id="fruits" />
<img src="https://homepages.cae.wisc.edu/~ece533/images/tulips.png" id="tulips" style="display:none;" />
<p>Show Next Photo</p>
</div>
Problem:
This is my script below and isn't working properly because when I refresh the page it just shows the airplane.png, and if I click on the link "Show Next Photo" it makes the airplane disapear.
Please give it a try at https://codepen.io/mrborges/pen/QQjJOq
<script>
//Go away fruits.png
document.getElementById('fruits').style.cssText = "display:none;";
$(document).ready(function () {
$('p').click(function () {
$('#imageSwitcher img').attr("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
//$('#fruits').toggle("hide");
$('#tulips').toggle("slow");
})
});
</script>

<script>
$(document).ready(function () {
let count = localStorage.getItem('count') || 0; // "0, 1, 2" or 0
count = parseInt(count, 10); //If we get it from storage then convert to number
const images = [
"https://homepages.cae.wisc.edu/~ece533/images/fruits.png",
"https://homepages.cae.wisc.edu/~ece533/images/tulips.png",
"https://homepages.cae.wisc.edu/~ece533/images/airplane.png"
];
$('#fruits').attr("src", images[count]);
$('p').click(function () {
count = (count + 1) % images.length;
$('#fruits').attr("src", images[count]);
localStorage.setItem('count', count);
});
});
</script>
The const images is a list (array) of links to the switch between. I added all the possible images and then i just change the src for each image. a pure jQuery solution would be very ugly, so you have to accept some vanilla JavaScript.
this line count = (count + 1) % images.length counts 1 up each time you click on the <p> if we reach the end of the images, then it just resets to 0. e.g. (2 + 1) % 3 = 0

JS: Removing class from section

I use parallax effect on my site, but when the screen is smaller the background images starts to be cut off a bit. I decided to have parallax effect only on desktops and to remove this from other smaller devices.
For example I have 3 sections:
<section class="bg1 parallax"></section>
<section class="bg2 parallax"></section>
<section class="bg3 parallax"></section>
Parallax class is not described in CSS, it is added just to let the JavaScript know to which section parallax should be included.
My question:
Has someone got a script which can remove class "parallax" if screen width is smaller than for example : 1280px ?
If width is bigger than 1280px
<section class="bg1 parallax"></section>
Otherwise
<section class="bg1"></section>

I haven't tested it, but this should put you in the right direction...
window.onresize = function(){ // may not be the window object
if (screen.width < 1280) { // many ways of detecting screen width
var sections = document.querySelectorAll("section"); // create array of all section elements
for (var i = 0; i <= sections.length-1; i++) { // loop through them
sections[i].classList.remove("parallax"); // remove their parallax class
};
};
};

It seems a bit hacky, but you could do something like:
// closure so we don't pollute global scope. This should be run at the bottom of the page so that it can find all of the parallax elements on the page
(function(){
var previous_width = 0;
var cutoff = 1280;
var $parallax_elements = $('.parallax');
function check_width() {
var current_width = document.body.clientWidth;
// if the document has gone from narrow to wide, re-enable parallax
if (current_width > cutoff && previous_width <= cutoff) {
$parallax_elements.addClass('parallax');
}
// if the document has gone from wide to narrow, disable parallax
else if (current_width <= cutoff && previous_width > cutoff) {
$parallax_elements.removeClass('parallax');
}
// store the current width for the next check
previous_width = current_width;
}
// run it every time the window resizes
$(window).resize(check_width);
// run it once to initialize
check_width();
})();

Tried this in console and seems to work.
if(window.innerWidth < 1280){
var parallaxes = document.getElementsByClassName('parallax');
while(parallaxes[0]){
parallaxes[0].classList.remove('parallax');
}
}

Fading from image to image (not image to white to image) using Javascript

I have a "slideshow" type of function where images fade in and out to each other. It works fine, but when it fades, it is fading the first picture out to white and then the second picture fades in. What I want is for the first image to fade right into the second (with no empty white background in between). Can I do this?
Here is an example: http://jsfiddle.net/aegtjm5y/5/
image
<img id="image1" src="http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg" style="width: 100%;">
JS
var curIndex = 0;
var src = ['/images/IMG_20140907_203614.jpg', 'http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg', 'http://cvcl.mit.edu/hybrid/cat2.jpg'];
var fadeTimeInMilliseconds = 2000;
var waitTimeInMilliseconds = 1000;
$(document).ready(function(){
switchImageAndWait(true);
});
function switchImageAndWait(fadeOut2){
if(fadeOut2){
setTimeout(fadeOut, waitTimeInMilliseconds);
}else{
var index = Math.floor((Math.random()*src.length))
if(curIndex == index){
index++;
if(index >= src.length){
index-=2;
}
}
curIndex = index;
$("#image1").attr("src", src[index]);
fadeIn();
}
}
function fadeOut(){
$("#image1").fadeTo( fadeTimeInMilliseconds, 0 , function() { switchImageAndWait(false); });
}
function fadeIn(){
$("#image1").fadeTo( fadeTimeInMilliseconds, 1 , function() { switchImageAndWait(true); });
}

Edit: "Can I do this?" - No. You can't do this using only one image element.
What you basically need is two images one on top of the other.
I edited your fiddle and it's working fine:
JSFiddle
So basically I added another img element and set the position of the images to be absolute (so they are overlaying).
<img id="image2" src="http://cvcl.mit.edu/hybrid/cat2.jpg" style="width: 100%;position: absolute;">
I updated the javascript stuff so the images get changed in both fadeIn and fadeOut "events". The principle is that the upper image gets faded out and faded In. When it's not visible you change the src of it. And when it is visible you change the src of bottom image.
I can't think of better solution now. Hope this helps..

Change image source folder for mobile version with javascript

Sorry I'm a newbie with JS and I've been having trouble with some JS I found here on stackoverflow. My situation is that I have a div with two images inside, and I want to change the source path of those images when the window is less than 480px. My code is this:
<div id="bigFoto">
<img src="img/photo1.jpg" alt="text for alt" id="photo1">
<img src="img/photo2.jpg" alt="text for alt" id="photo2">
</div>
And The current script I'm running is:
$(window).resize(function(){
var width = $(window).width();
if (width < 481) {
$("#bigFoto img#photo1").attr("src","img/mobile/photo1.jpg");
$("#bigFoto img#photo2").attr("src","img/mobile/photo2.jpg");
}
else{
$("#bigFoto img#photo1").attr("src","img/photo1.jpg");
$("#bigFoto img#photo2").attr("src","img/photo2.jpg");
}
});
This script is working right, but now let's say I want that div to have 20 images, my guess is that I would have to add every one of them in this script right?
The real question: is there a way to target all images instead and just add the /mobile part on the source path? ,since the filename remains the same.
Thanks so much for your help!

You can use jQuery's each function to loop through all the elements returned by a query
$(window).resize(function(){
var width = $(window).width();
if (width < 481) {
$("#bigFoto img").each(function(index){
var src = $(this).attr("src")
var photoName = src.substr(src.lastIndexOf("/"));
$(this).attr("src", "img/mobile/"+photoName)
})
}
else{
$("#bigFoto img").each(function(index){
var src = $(this).attr("src")
var photoName = src.substr(src.lastIndexOf("/"));
$(this).attr("src", "img/"+photoName)
})
}
});