We Keep Coding

Show the item before uploading the photos

I have a form with multiple photos. They take a long time to load all images. I would like a replacement photo to be shown before uploading the photos. And then a photo from the form, if my user's browser is already loading everything.
<!-- Basic img -->
<img alt="Loader img" src="/home/loader/img-loader.png">
<a href="choice/1/">
<h1>Choice field 1</h1>
<img alt="Loader img" src="/image/1.png">
</a>
<a href="choice/2/">
<h1>Choice field 2</h1>
<img alt="Loader img" src="/image/2.png">
</a>
<a href="choice/3/">
<h1>Choice field 3</h1>
<img alt="Loader img" src="/image/3.png">
</a>
<a href="choice/4/">
<h1>Choice field 4</h1>
<img alt="Loader img" src="/image/4.png">
</a>
So until the photo is uploaded <img alt="Loader img" src="/image/1.png"> <img alt="Loader img" src="/image/2.png"> <img alt="Loader img" src="/image/3.png"> <img alt="Loader img" src="/image/4.png"> user see and then after loading all images by the browser, the user sees everything.
How to recive this effect using JS / jQuery or CSS / Html

You can give the images a background-image via CSS, but only if they have a data-loading-attribute. When the onload event of the image triggers, remove this attribute. Adjust dimensions and image paths as needed.
img[data-loading] {
height: 40px;
width: 40px;
background-image: url(./path/to-background-image.png);
}
and in the HTML:
<img alt="Loader img" src="/image/4.png" data-loading onload="this.removeAttribute('data-loading')">

Jquery determines that when the uploaded image is empty, let its parent node hide

How does jquery determine when the uploaded image is empty, let its parent node hide? I have written the code, but it doesn't work! Can you give me some suggestions, or the corresponding examples? Thank you very much!
<p id="new_zs">hello! <img src="'+ addressUrl+list.ccieimg+'" alt=""></p>
<script>
$(function() {
if ($('#new_zs img').attr('src')) {
$(this).show();
} else {
$(this).parent().hide();
}
})
</script>

The issue is because the scope of this, in the location you're running the jQuery code, will be the window, not the #new_zs img element.
To fix this you will need to specifically target the #new_zs element. Also note that show() is redundant, as that's the default state anyway, so the logic can be simplified to just:
$(function() {
if (!$('#new_zs img').attr('src'))
$('#new_zs').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="new_zs">hello! <img src="" alt=""></p>
Note that this is assuming that you're outputting an empty string in to the src attribute of the HTML. If that's not the case you will need to change your if condition.

Image elements can trigger an error event and a load event that you can use to see if an image is correctly loaded.
The error event happens when the location in the src event does not
return a valid image or does not return at all.
The load event happens when the image is successfully loaded.
I made an example of these functions for you below.
You can use the error handler to check if something went wrong with the image. This also works if the url is incorrect. The only downside is that it does not trigger an error when no src attribute is defined as you can see in the below snippet.
$('.img').on('error', function() {
console.log('incorrect source:' + $(this).attr('id'));
$(this).parent('p').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="new_zs1">hello1!<img class="img" id="img1" src="" /></p>
<p id="new_zs2">hello2!<img class="img" id="img2" src="http://www.incorrectdomain.stupid/hahah.png" /></p>
<p id="new_zs3">hello3!<img class="img" id="img3" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></p>
<p id="new_zs4">hello4!<img class="img" id="img4"/></p>
Alternatively you can hide all images at first and show images only if the image is loaded successful. This works for images without a src element too.
$('.img').parent('p').hide();
$('.img').on('load', function(){
console.log('Correct image: ' + $(this).attr('id'));
$(this).parent('p').show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="new_zs1">hello1!<img class="img" id="img1" src="" /></p>
<p id="new_zs2">hello2!<img class="img" id="img2" src="http://www.incorrectdomain.stupid/hahah.png" /></p>
<p id="new_zs3">hello3!<img class="img" id="img3" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></p>
<p id="new_zs4">hello4!<img class="img" id="img4"/></p>

This will do multiple images
$('img[src=""]').each(function(){
$(this).parent().hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>image show <img src="/" alt=""></p>
<p>image Hide <img src="" alt=""></p>
<p>image show <img src="/" alt=""></p>
<p>image Hide <img src="" alt=""></p>
For your single image
$('#new_zs img[src=""]').parent().hide();

Get image alt, add as parent class

I'm doing some CSS and I'm not great with JavaScript. However I'm not allowed to edit any of the plugin files, so I thought I could use some JavaScript to solve my issue of missing unique classes.
I just want to take the alt="" HTML attribute from an image and apply it as class="" HTML attribute to its parent <a> element.
So instead of:
<div class="wrapper-class">
<a class="img-parent">
<img alt="image 1" src="">
</a>
<a class="img-parent">
<img alt="image 2" src="">
</a>
<a class="img-parent">
<img alt="image 3" src="">
</a>
</div>
I need:
<div class="wrapper-class">
<a class="img-parent image-1">
<img alt="image 1" src="">
</a>
<a class="img-parent image-2">
<img alt="image 2" src="">
</a>
<a class="img-parent image-3">
<img alt="image 3" src="">
</a>
</div>
Here's the pseudocode I would like to do:
(1) $ Function = ('**.wrapper-class**')
(2) IF (**this**) contains **img**
(3) GET image **alt value**
(4) if (this) contains ('**a**')
(6) Replace **alt** value empty space with - and apply **alt** value to **a** element as class
(7) else = do nothing
How can I do something like this?

Seems like a simple each would do it, assuming all .img-parents have the img in question as their only child:
$('.img-parent').each(function() {
this.classList.add(this.children[0].alt.replace(/ /g, '-'));
});
console.log(document.body.innerHTML);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-class">
<a class="img-parent">
<img alt="image 1" src="">
</a>
<a class="img-parent">
<img alt="image 2" src="">
</a>
<a class="img-parent">
<img alt="image 3" src="">
</a>
</div>
(Also, it's called "psuedocode")

First, let me say that it's not a very good idea to use alt attribute value and use it as class name. Assuming the alt attribute gets generated from filename, the filename permits characters which are illegal to use as CSS class names.
I.e.: picture+label.jpg and picture.with.label.jpg are perfectly valid filenames. Let's say the gallery strips the file extension at least, you get picture+label and picture.with.label as alt attributes both of which cannot be used as class names because dot and plus sign have special meanings in CSS selectors.
So to be safe, you might want to do some escaping of the value before using it as class name.
I suggest:
(function addClasses() {
$('.wrapper-class img').each(function (i, image) {
var imageElem = $(image);
var altValue = imageElem.attr("alt"); // Use .attr, not .prop as alt is always a string.
if (!altValue)
return; // either skip to next if image has no alt value or use some default value
// Replace invalid characters here, i.e. using Regular expression
altValue = altValue.replace(/[^a-z0-9\-_]/gi, "_");
// .closest() allows the image to be wrapped in another element/s beside the link
imageElem.closest("a.img-parent").addClass(altValue);
});
})();
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="wrapper-class">
<a class="img-parent"><img alt="image-1"></a>
<a class="img-parent"><img alt="image-2"></a>
<a class="img-parent"><img alt="image-3"></a>
</div>

This should find images and add alt attribute to <a> parent's class
$('.wrapper-class img').each(function(){
$(this).parent('a').addClass($(this).prop('alt').replace(/\s/g,'-'));
//$(this).parent('a').addClass($(this).prop('alt'));
});
console.log($('.wrapper-class').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-class">
<a class="img-parent">
<img alt="im a flower" src="">
</a>
<a class="img-parent">
<img alt="image-2" src="">
</a>
<a class="img-parent">
<img alt="image-3" src="">
</a>
</div>

Change img src when clicked jquery [duplicate]

This question already has answers here:
change img src on click
(5 answers)
Closed 4 years ago.
I have some HTML code:
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<a id="getImg" href="" ><img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>
<a id="getImg" href="" ><img src="img/asus-thumb.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>
<img src="img/asus.jpg" alt="" class="img-thumbnail thumb-product img-fluid" width="100">
and this is my some jquery code :
<script type="text/javascript">
var imgSrc = $(".thumb-first").attr("src");
$(".img-big").attr("src",imgSrc);
$("#getImg img").on("click",function(){
tes = $(this).attr("src");
$(".img-big").attr("src",imgSrc);
});
</script>
I want to change src image big when image small clicked, but my code doesn't work properly.

What I did is to change id="getImg" to class="getImg" because id attribute should always be unique.
Instead of getting the click event of the image, I used the click event of <a>, then located the <img> using find().
I also added an id to the big image, because there are two instance of .img-big, which is an <img> and <div>, and <div> does not have a src attribute.
Lastly, I used e.preventDefault() to prevent the redirection when clicking a <a> tag
$(".getImg").click(function(e) {
var imgSrc = $(this).find("img").attr("src");
$("#bigImage").attr("src", imgSrc);
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img id="bigImage" class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<a class="getImg" href=""><img src="http://via.placeholder.com/100x100" alt="" class="img-thumbnail thumb-product img-fluid thumb-first" width="100"></a>
<a class="getImg" href=""><img src="http://via.placeholder.com/200x200" alt="" class="img-thumbnail thumb-product img-fluid" width="100"></a>

First, you have multiple elements with the same id attribute.
Second, tes variable here is not defined.
tes = $(this).attr("src");
Third, try placing your javascript at the bottom of the html page or place your javascript code inside the ready function:
$(document).ready(function(){
});

You don't need to give getImg, it can be done through onclick function. Try my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text-center img-big">
<!-- IMAGE BIG -->
<img class="img-fluid img-big" src="" alt="">
</div>
<!-- IMAGE SMALL -->
<script>
function change_img(param){
var src = $(param).prop('src');
$('.img-big').prop('src',src);
}
</script>

Is it possible to extract image from text with jQuery or JavaScript?

Good day, I'm trying to make an article content with ckeditor. Here is an example from my input.
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
As you can see there are two images, and i want to the first image as my thumbnail. for now, i just want to extract it .
The result from extract is something like this
http://localhost:84/lf//assets/images/commingsoon.png
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = (someprosess)

You can use find(), first() and attr() to access the URL of the first image from your string.
var myString = '<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>';
var result = $(myString).find('img').first().attr('src');
console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can use either JavaScript or jQuery to search for the first instance of an image and parse out its src
As an example, using jQuery (if there is always going to be an image in the content)
var imgPointer = $('body').find('img');
var imgSrc = imgPointer[0].attr('src');

Here you go with a solution using jQuery
console.log($('p').find('img:first').attr('src'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I have two images <img alt="" src="http://localhost:84/lf//assets/images/commingsoon.png" style="height:225px; width:225px" /> and this <img alt="" src="http://localhost:84/lf//assets/images/article2.jpg" style="height:91px; width:122px" /></p>
Hope this will help you.