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')">
Related
Trying to load data from my news page in my navigation menu using .load, .find and .replaceWidth but my javascript code does not fetch the data at all. Can any developer tell me what I am doing wrong?
JAVASCRIPT FILE
jQuery('#latestnews').load('latest-news.html' + '.case a
h2:first',function(data) {
jQuery('#latestnews').find('h2').replaceWith('');
});
jQuery('#headline').load('latest-news.html' + '.case a p:first',function(data) {
jQuery('#headline').find('span').replaceWith('');
});
jQuery('#newsimg').load('latest-news.html' + '.case a
img:first',function(data) {
jQuery('#newsimg').find('img').replaceWith('');
});
HTML Navigation menu where I would like data to be fetched to.
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2><!--Where the news data would go--></h2></div>
<a href="#" id="newsimg">
<div class="fll" id="headline">
<span><!--Where the news data would go--></span>
<p class="reserved">Read The Article</p>
</div>
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="" class="flr">
</a>
</li>
</ul>
HTML Code that needs fetching from my latest-news.html and to appear in navigation menu
<div class="case newsarticle">
<a href="#" target="_blank">
<img src="assets/img/latest-news.jpg" alt="" title="" width="326" height="245">
<h2>Content Title To Appear in Navigation Menu...</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content...</p>
<span>Read More</span>
</a>
</div>
The data just doesn't appear at all. If I remove the concatenation (' + ') between the 'latest-news.html' + '.case a h2:first' I still get the same response.
I edited my javascript file to this:-
$(document).ready(function(){
jQuery('#latestnews').load('latest-news.html .case a h2:first');
jQuery('#latestnews').find('h2').replaceWith('');
});
$(document).ready(function(){
jQuery('#headline').load('latest-news.html .case a p:first');
jQuery('#headline').find('p span').replaceWith('');
});
$(document).ready(function(){
jQuery('#newsimg').load('latest-news.html .case a img:first');
jQuery('#newsimg').find('img').replaceWith('');
});
and changed my HTML file to this:-
<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2></h2></div>
<a href="#">
<div class="fll">
<div id="headline">
<p><span></span></p>
<p class="reserved">Read The Article</p>
</div>
</div>
<div id="newsimg" class="flr">
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="">
</div>
</a>
</li>
</ul>
I am not sure if my Javascript is technically correct however I have managed to create the desired effect I was looking for. Removing the 'function(data)' seemed to be the key.
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>
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>
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
Here in, I have nested divs..in which images generate dynamically ...this is the html code ..my problem is if i click the print button the corresponding image need to be printed.
<div id="outputTemp" style="display:none">
<div id="rightoutputimgae">
<div id="rightimgId" class="rightimg" rel="tooltip" content="
<img src='jqe13/image/1.jpg' class='tooltip-image'/> ">
<div id="outputimageId" class="outputimage">
<img src="jqe13/image/1.jpg" alt="Right Bottom Image"></div>
</div>
<ul>
<li id="outcheckbox"><input name="outCheck" type="checkbox"></li>
<li id="outedit">
<a href="#"><img src="jqe13/image/edit_s.PNG" alt="edit" title="Edit">
</a></li>
<li id="outdelete"><a href="#" onclick="deleteImg(div11)">
<img src="jqe13/image/delet_c.PNG" alt="delete" title="Delete"></a></li>
<li id="outfullscreen">
<a href="#">
<img src="jqe13/image/fullscreen_c.PNG" alt="Full Screen" class="fullscreen"
title="Full Screen"></a></li>
<li id="outshare">
<img src="jqe13/image/share_c.PNG" alt="Share" title="Share">
<div id="menu">
<div id="tooltip_menu">
<a href="#" class="menu_top" id="email">
<img src="jqe13/image/email.PNG" alt="Email" title="Email"></a>
<a href="#" onClick="postToFeed()" class="facebook"><img src="jqe13/image/fb.PNG"
alt="Facebook" title="Facebook"></a>
<a href="#" id="twitter">
<img src="jqe13/image/twitter.png" alt="Twitter" title="Twitter"></a>
<a href="#" class="menu_bottom" id="save">
<img src="jqe13/image/save.PNG" alt="Save" title="Save"></a>
</div>
</div>
</li>
<li id="outprint"><a href="#">
<img src="jqe13/image/print.PNG" class="printMe" alt="Print" title="Print"></a>
</li>
</ul>
</div>
i need to print the image when i click the print button..
and also i need to print all the images by clicking all button which i need to
create later..
Javascript
$('.printMe').click(function() {
window.print();
return false;
});
does this work for me..can anyone help me with this..
You have to open new window and load only picture there. after that you trigger window.print in it.
If that is the way you are going, I would create simple page that will simplify it
Name it printImage.html, and use something like the following markup
<html>
<script>
function onload() {
var url = window.location.search.substring(1)
var img = document.getElementById('img')
img.src = url
window.print()
}
</script>
<body onload="onload()">
<img href="" id='img' />
</body>
</html>
having that you'll be able to new window for image like printImage.html?myfullpathtotheeimage.jpg
Actually 2nd option offered by #kennypu is quite simple to implement
add the following stylesheet to your page
#media print {
* { display:none; }
.print { display:block }
}
then just toggle print class to the element you are going to print.
If you want to print only the corresponding image, you have two choices.
When the button is clicked, go to a different page which contains only the image to be printed, and run window.print() there.
make a print style sheet using the media query: #media print and hide everything but the image to be printed in the stylesheet