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>

How can I select an Animatedmodal to display different demos using one ID

I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();

I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.

Why isn't my jQuery dynamic link clone working?

I'm trying to clone links in order to make a series of images clickable links. I tried using some of the code examples in jQuery - Copy a dynamic link from one element to another. It's not working.
Given the following HTML code:
<ul class="slides">
<li class="views-row views-row-1 views-row-odd views-row-first">
<div>
<img src="https://www.sfmta.com/sites/default/files/styles/home_slide/public/homeslides/2017/Clipper%20on%20Muni-1.png?itok=PPZNHt_N" width="630" height="369" alt="Image with a Clipper Card and illustrated Muni bus with text: Get Clipper and save on Muni." title="Get Clipper and save on Muni" />
</div>
<div class="slider-caption">
<div class="row-fluid">
<div class="span6 offset6">
<div class="slider-caption-inner">
<h2>
New Muni Fare Changes
</h2>
<p>New Muni fares include single-ride savings for using Clipper and MuniMobile.</p>
Learn more
</div>
</div>
</div>
</div>
</li>
... (more list items)
</ul>
I am seeking the following result, with line 4 of the code being the only changed line (surrounding img with a cloned anchor tag):
<ul class="slides">
<li class="views-row views-row-1 views-row-odd views-row-first">
<div>
<img src="https://www.sfmta.com/sites/default/files/styles/home_slide/public/homeslides/2017/Clipper%20on%20Muni-1.png?itok=PPZNHt_N" width="630" height="369" alt="Image with a Clipper Card and illustrated Muni bus with text: Get Clipper and save on Muni." title="Get Clipper and save on Muni" />
</div>
<div class="slider-caption">
<div class="row-fluid">
<div class="span6 offset6">
<div class="slider-caption-inner">
<h2>
New Muni Fare Changes
</h2>
<p>New Muni fares include single-ride savings for using Clipper and MuniMobile.</p>
Learn more
</div>
</div>
</div>
</div>
</li>
...
</ul>
I tried two different code versions based on the linked Stack Overflow post:
Version 1:
jQuery(document).ready(function() {
"use strict";
jQuery('.slides .views-row .img').wrap(function() {
return jQuery(this).closest('.views-row').find('h2 a').clone().text('');
});
});
Version 2:
jQuery(document).ready(function() {
"use strict";
jQuery('.slides .views-row .img').html(function(i,html) {
return $(this).next('h2').find('a').clone().html( html );
});
});
Neither code works. The images in the list do not become linked. The HTML code remains unchanged. (Tested in Firefox and Chrome on Windows.)
There is no JavaScript error on my browser console. There is a warning against jQuery minimized JavaScript itself "Use of getPreventDefault() is deprecated. Use defaultPrevented instead." but that's already been happening and does not prevent already-existing jQuery code on my site from working.
Any ideas/corrections?

Instead try to use a different way.
When you try to click on image, try to trigger a click event on link as both having a same url.

Add Links to descrition of Bqs Slider Pro - force links to be clickable preventDefaul

i have implemented the great "feature" Slider Pro from this side:
https://github.com/bqworks/slider-pro
Now i want to add "Links" to the description. This is easily possible by just adding the links in the html
Link
Unfortunately this link is not clickable. I think this is caused by the surrounding "area" - a link on this area triggers the slide to load...
is there a way to force links to be clickable?
How can i tell the browser that the link with the class "sp-thumbnail-description" should be always clickable?

Here is the source file:
Js File of SliderPro
My HTML looks like this:
<div id="example5" class="slider-pro">
<div class="sp-slides">
<div class="sp-slide">
<img class="sp-image" src="../src/css/images/blank.gif"
data-src="http://bqworks.com/slider-pro/images/image1_medium.jpg"
data-retina="http://bqworks.com/slider-pro/images/image1_large.jpg"/>
</div>
</div>
<div class="sp-thumbnail">
<div class="sp-thumbnail-image-container">
</div>
<div class="sp-thumbnail-text">
<div class="sp-thumbnail-title">Sie benötigen ein<br />Schadengutachten?</div>
<div class="sp-thumbnail-description"><a class="unbind" href="http://www.google.de">Hier finden Sie Informationen</a></div>
</div>
</div>
</div>
</div>
</div>

Possible to use bxslider getCurrentSlide method to assign a class to the active slide?

I'm using bxslider with captions only. Using CSS, I've stacked the captions on top of each another. What I want to do now is assign the active caption(or "slide") a class, so I can change its background color.
Could this be done using one of the bxslider callback functions (they're all listed out at http://bxslider.com/options)? I would think I could use getCurrentSlide to accomplish what I need, but I'm not exactly sure how to go about this.
Here's the HTML snippet for the slider.
<div class="bx-wrapper">
<div class="bx-viewport">
<ul class="bxslider">
<li>
<div class="imageContainer">
<a href="/">
<img src="">
</a>
</div>
<div class="captionContainer">
<p class="captionTitle">Some text</p>
<p class="captionBlurb">Some more text</p>
</div>
</li>
<li>
<div class="imageContainer">
<a href="/">
<img src="">
</a>
</div>
<div class="captionContainer">
<p class="captionTitle">Some text</p>
<p class="captionBlurb">Some more text</p>
</div>
</li>
<li>
<div class="imageContainer">
<a href="/">
<img src="">
</a>
</div>
<div class="captionContainer">
<p class="captionTitle">Some text</p>
<p class="captionBlurb">Some more text</p>
</div>
</li>
<ul>
</div>
</div>
I know I need to start off with something like...
slider = $('.bxslider').bxSlider();
var current = slider.getCurrentSlide();

I know this is old, but I just had the same problem. Here's how I solved it.
slider = $('.bxslider').bxSlider({
minSlides: 3,
maxSlides: 3,
slideWidth: 850,
moveSlides: 1,
onSliderLoad: function() {
$(".bxslider li:not([class='bx-clone'])").eq(0).addClass('current');
},
onSlideBefore: function() {
$(".bxslider li").removeClass('current');
current = slider.getCurrentSlide();
$(".bxslider li:not([class='bx-clone'])").eq(current).addClass('current');
}
});
In my case, I have the slider with three images wide. The middle one is in the center of the screen and the two on either side go off screen. I wanted to have a class for the middle, "current", slide. So this was my method.
The code in onSliderLoad(); adds the class initially to the first item.
I wanted it to add the "current" class to the next item before it made it to center (just before transition starts), so these two lines are in the onSliderBefore(); function:
current = slider.getCurrentSlide();
$(".bxslider li:not([class='bx-clone'])").eq(current).addClass('current');
Otherwise you could move those two lines to the onSliderAfter(); function and the "current" class would get added after the slide has transitioned.

Have you actually tried the piece of JavaScript you included?
it should be as simple as assigning the classname:
current.addClass('yourClassName);
Perhaps I've misunderstood the question?