We Keep Coding

How to trigger a function on all images with a class when done loading in JQuery 3.X?

I have a webpage on which a lot of images need to load. I want to show a div with a loading gif while the image is loading, but I want to fade out that div when the image is done loading. When I was searching the internet I found the ".load" function, but that's not working on the images. The ".on('load', function(){...})" doesn't work either.
This is what I tried, but doesn't work.
<a data-fancybox="gallery" href="image1.jpg">
<img src="thumbs/image1.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image2.jpg">
<img src="thumbs/image2.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image3.jpg">
<img src="thumbs/image3.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>

This is actually working fine.
https://codepen.io/tmdesigned/pen/NWqqXwy
Probably what you are experience is conflict with the gallery library you are using. They often duplicate images in the HTML to achieve their effects. I'd suggests looking at the final output in your inspector and see if the .next() logic still holds.
But, to answer your question if you remove that gallery, as I did in the link above, you'll see the 'loading' image fade out (in the example, all 6 images--3 display images, 3 loading images--are the same, but you can still see the effect).
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>

jssor target slide in another page/document

I want to target a specific slide with link. But the hyperlink and the slider are in different pages.
The idea is to make a separate navigation page.
Let's say the slider in slider.html and the page with the link is nav.html
<div id="slider1_container">
<div u="slides">
<div>
<img u="image" src="images/1.jpg" />
<img u="thumb" src="images/thumb-1.jpg" />
</div>
<div>
<img u="image" src="images/1.jpg" />
<img u="thumb" src="images/thumb-1.jpg" />
</div>
</div>
</div>

This is called templating.
For example I want my navigation bar to always be at the top with the same items on every webpage. I would have a separate html file for the navigation bar and a footer and require that in my pages!
I mentioned EJS because I thought you were using node however there are much simpler ways to use this if you are not using node. (Actually you can still use EJS but I'm not sure how)
Many libraries like requirejs do this.
Here's a list: https://developer.mozilla.org/en/docs/JavaScript_templates

Generate unique div id in php to assign javascript to it

I generate the following pieces of code via php (unknown number in advance) and they are all wrapper in my 'item-container' div:
<div id="item-size" class="item-size">
<div class="view pic-transition">
<figure id="ribbonnew" class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
I generate a ribbon on SOME of these 'item-size' div's and via javascript i want the ribbon to be hidden when the mouse is hovered over and back to normal when mouse out.
My javascript code is:
$("#item-size").hover(function(){
$('#ribbonnew').hide();
},function(){
$('#ribbonnew').show();
});
This of course only works for the first element, so I guess I need to assign ID's to the 'item-size' div's ? How do I do this AND create the javascript which binds the mouse hover to every of these divs (how to pass the size of how many I created, so I could add ID's from 0 to size)?
As an extra question, is there also a way to make the ribbon fade in and fade out slowly? .fadeOut(1000); is not delivering the expected result

Remove all ids :
<div class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
And use a dot . in your selectors to match elements by classes :
$(".item-size").hover(function(){
$(this).find('.ribbonnew').hide();
},function(){
$(this).find('.ribbonnew').show();
});
For your extra question, you can use a parameter in the hide and show jquery methods for animation :
$(this).find('.ribbonnew').hide(400);
Edit : if the html is inserted dynamically, try event delagation instead :
$('#item-container').on('mouseenter mouseleave', '.item-size', function(){
$(this).find('.ribbonnew').toggle(400);
});

(if you really want to use ids)
Generate a unique id using the uniqid() function, and name all your item-size elements.
<?php
$unique_id = uniqid();
?>
<div id="<?=$unique_id?>item-size" class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
Then, match all elements with that unique id as part of their ids.
$("*[id^='<?=$unique_id?>']").hover(function(){
$(this).find('figure.ribbonnew').hide();
},function(){
$(this).find('figure.ribbonnew').show();
});

how to Resize the parent div depending on the width and number of elements

I am developing a responsive Slide show where the user can upload any number of images, and the application dynamically generates a slide show that can fit in any device. Now there is a problem i am facing here
<section id="container">
<article id="slider">
<div id="item"><img src="img/image-1.jpg" alt="" /></div>
<div id="item"><img src="img/image-2.jpg" alt="" /></div>
<div id="item"><img src="img/image-3.jpg" alt="" /></div>
<div id="item"><img src="img/image-4.jpg" alt="" /></div>
<div id="item"><img src="img/image-3.jpg" alt="" /></div>
<div id="item"><img src="img/image-4.jpg" alt="" /></div>
</article>
<article id="nav">
<div id="prev" onclick="prev();"><img src="img/prev.png" alt="" /></div>
<div id="next" onclick="next();"><img src="img/next.png" alt="" /></div>
</article>
</section>
The above Html code is generated by my java code. Here the user has uploaded 5 images. Now each image will occupy a fixed with of 300 px. so total width will be 5*300+5*padding. Now i can set the width of the container dynamically in my java code to fit all the images in a single row, and hide the ones the exceed 940px, as seen in most normal slide shows. I want know whether there is a css solution to this like shrink wrapping which shrinks the inline divs, here i want to expand the container.
Regards,
Maclean

I would suggest use display:inline-block to inner elements, and white-space:nowrap for outer div. If you can create a jsfiddle that would be helpful to show code changes.

opening an image inside an modal window

Here is my JsFiddle
I am trying to create an image gallery. I want my each image to open up inside a modal window when someone click on any image. I have designed my modal window. i just don't know how to connect my modal window to my images in the image gallery. I want the clicked-in image to appear inside the img tag of my modal window.
This is my first time i am trying to do something with modal window. i have no idea how to write that click event handler for my case. I searched in net. I did not find any matching solution. All were suggesting to use their own plugins. I don't want to use others plugins for this. A little help would be appreciated.
Here's is my image gallery
<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<img class="wideimage" src="">
<!--more images-->
</div>
<div class="row">
<img class="normalimage" src="">
<img class="normalimage" src="">
<!--more images-->
</div>
</div>
Here is my modal window
<div class="gallery-overlay" style="display: none;">
<div class="gallery-imagebox">
<img class="gallery-image" src="#">
</div>
<div class="gallery-captionbox">
<div class="gallery-control gallery-control-previous">
<
</div>
<div class="gallery-control gallery-control-next">
>
</div>
</div>
</div>

Using jQuery you could start with this:
$(function(){
$('.gallery').on('click','a',function(){
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',$(this).find('img').attr('src'));
return false;
});
});
Have a look at this this fiddle