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>

How to get images alt using jquery?

I'm trying to add data-title and data-lightbox and get Images alt inside.
the problem is, i have a similar outputs, from first image alt only!
How can we fix it?
jQuery(document).ready(function($) {
var imagesalt = $('.box a img').attr('alt');
$(".box a").attr("data-title", imagesalt);
$(".box a").attr("data-lightbox", imagesalt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-title="text 1" href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a data-lightbox="text 1" data-lightbox="text 1" href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>
I tried writing the code more than one way, but not useful
Thanks

Your query is ambiguous, that's why!
When you request the "alt" attribute with $(".box a img").attr("alt"), you're taking in many objects, sure, but attr() is returning only the first result.
In pure jQuery, you'd do it with .each():
$(".box a img").each(function(){
var imageAlt = $(this).attr("alt");
var parent = $(this).parent();
parent.attr("data-lightbox", imageAlt);
parent.attr("data-title", imageAlt);
});
That should give you the behaviour you expect.

Iterate over each of the divs with the class of 'box' - then find the image within it, get the alt text of that and apply it as the data attribute of the div. Note I put in a console.log to demonstrate the alt text is being found correctly. Ypu can use the console inspector to see that the data attribute is being applied to the divs correctly.
$(document).ready(function(){
$(".box").each(function(){
var imageAlt = $(this).find('img').attr('alt');
$(this).attr("data-title", imageAlt);
console.log(imageAlt);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 1">
</a>
<div class="img-block"></div>
</div>
<div class="box">
<a href="#">
<img src="img1.jpg" alt="Text 2">
</a>
<div class="img-block"></div>
</div>

Try this:
$('.box a img').each(function(){
$(this).parent().find("a").attr("data-title", $(this).attr("alt");
$(this).parent().find("a").attr("data-lightbox", $(this).attr("alt");
})

The .attr() method gets the attribute value for only the first element in the matched set.
But, the .attr() method sets the attribute value for every element in the matched set.
enter link description here

HTML Images Error

all of the icons I have for this menu are all shifted to the right in the menu, what could cause this on my other pages the images appear correctly
document.getElementById("div11").innerHTML="<i>Apprentice Daily Entries</i><br> <img id='img2' src='icons/file_add.png'></img>"
document.getElementById("div21").innerHTML="<i>Unsigned Leader Checklists</i><br> <img id='img2' src='icons/file_search.png'></img>"
document.getElementById("div12").innerHTML="<i>Email All</i><br> <img id='img1' src='icons/coming_soon.png'></img>"
document.getElementById("div22").innerHTML="<i>Calendar</i> <br> <img id='img2' src='icons/coming_soon.png'></img>"
document.getElementById("div13").innerHTML="<i>Coming Soon</i> <br> <img id='img1' src='icons/coming_soon.png'></img>"
document.getElementById("div23").innerHTML="<i>Coming Soon</i> <br> <img id='img2' src='icons/coming_soon.png'></img>"
document.getElementById("div14").innerHTML="<i>Coming Soon</i><br> <img id='img1' src='icons/coming_soon.png'></img>"
document.getElementById("div24").innerHTML="<i>Coming Soon</i><br> <img id='img2' src='icons/coming_soon.png'></img>"

First, you can optimise your code like that :
setMyHtml('div11', 'Apprentice Daily Entries','file_add.png' );
setMyHtml('div21', 'Unsigned Leader Checklists','file_search.png' );
setMyHtml('div12', 'Email All','coming_soon.png' );
setMyHtml('div22', 'Calendar','coming_soon.png' );
setMyHtml('div13', 'Coming Soon','coming_soon.png' );
setMyHtml('div23', 'Coming Soon','coming_soon.png' );
setMyHtml('div14', 'Coming Soon','coming_soon.png' );
setMyHtml('div24', 'Coming Soon','coming_soon.png' );
function setMyHtml(id, text, img){
var imgId= ""; // here, generate an UNIQUE ID for your image
var myHtml = "<i>"+text+"</i><br> <img id='"+imgId+"' src='icons/"+img+"' alt='a text describe your img' />"
document.getElementById(id).innerHTML = myHtml ;
}
In your example, your javascript is not good;
after every line you forget the ";" char.
Also, your HTML, is not good:
the 'img' tag (official doc) is an autoClose tag like that :
<img src="myImg.png" alt="my Img" /> <!-- That is good -->
<img src="myImg.png" alt="my Img" ></img> <!-- That is wrong -->
<img src="myImg.png" ></img> <!-- That is very wrong -->
And, you have forgotten the "alt" attribute. This attribute is the 'alternative text', it's appear when your 'src' attribute path is wrong. And is read by the software that allows blind people to use the internet ... If you can see shows, it's just your 'src' attribute is wrong...
<img src="myImg.png" alt="my Img" /> <!-- Img from the location where is the JS-->
<img src="folder/myImg.png" alt="my Img" /> <!-- Img from the folder 'foolder' where is the JS -->
<img src="/folder/myImg.png" alt="my Img" /> <!-- Img from the folder 'foolder' one level before where is the JS -->
And, id's of all tag in the same page must be unique!! (official documentation of the HTML Id attribute)
Finally, for this type of error, you can, check your HTML, AND your JavaScript with the developer tools box include in all browsers!
And, you can go here for learn to use Stackeoverflow in 2 min ;P