I'm working on a project where there are tiles of different pictures and I want to pass the value to another page when an image is clicked on. Since <img> doesn't have a value attribute, I tried to wrap an <a> tag around the image as follows, although it does the job, the format of the image is messed up. Is there a better way to do this that doesn't mess with the format of the image? Thank you for your help.
<a href="results.inc.php?value=gpu" onclick="post">
<img src="https://via.placeholder.com/200.jpg" alt="" class="cardImg">
</a>
Based on your comment, the most "harmless" way to do it would be JavaScript, adding a custom attribute to the image for the value you want it to pass in the onClick method.
document.addEventListener("DOMContentLoaded", function() {
var allCards = document.querySelectorAll(".cardImg");
for(i = 0; i < allCards.length; i++) {
var value = allCards[i].getAttribute("data-card-value");
allCards[i].addEventListener("click", function() {
document.location.href = "results.inc.php?value=" + value;
});
}
});
.cardImg {
cursor:pointer;
}
<img src="https://via.placeholder.com/200.jpg" data-card-value="gpu" alt="" class="cardImg">
Related
I have this :
<div class="blog-page-nav-previous">
<<Previous
</div>
I'm trying to find all instances of the class blog-page-nav-previous and replace the text inside the <a> tag: <<Previous with an image of my own.
How do I do that?
Since you're asking for a jQuery solution:
// Select all the <a> tags inside .blog-page-nav-previous and change their innerHTML to an <img> tag:
$('.blog-page-nav-previous a').html('<img src="foo.jpg">');
<div class="blog-page-nav-previous">
<<Previous
</div>
You could try this
var a = document.getElementsByClassName("blog-page-nav-previous");
a.forEach(function(a){
a.outerHTML = '<img src="images/image.jpg" alt="image">'
});
If you are trying to only replace the contents of the element you could replace a.outerHTML with a.innerHTML
I think you want the image to work as a link, if yes then I have a solution for you
<div class="blog-page-nav-previous">
<img src="example.png">
</div>
This should work and sorry if this is not the answer you want
This should work:
var myClasses = document.getElementsByClassName("blog-page-nav-previous");
for (var i = 0; i < myClasses.length; i++) {
myClasses[i].innerHTML = "<img src='image.jpg'>";
}
<div class="blog-page-nav-previous">
Previous
</div>
If you want the image to have keep the same link as what "Previous" is set as, change the getElementByClassName to look for "my-link" instead of "blog-page-nav-previous"
Is there any way how to replace the path location using span or etc. that comes from the Jquery, or is there any shorcut in Django?, Currently as you can see I'm trying to override the path that comes from my jquery src="/media/<span id=image></span>". Is there any other way to pass the path image that comes from jquery into the img src?. It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance
Jquery
$(document).on('click', 'a[data-role=show_scanned]', function(){
let csrf = $('input[name=csrfmiddlewaretoken]').val();
var path = $(this).attr('id'); #Image path example: image.jpg
var assign = $("#image").html(path);
$("#scanned_show").modal('show');
});
html retrieve
<img class="card-img img-fluid mb-1" src="/media/<span id=image></span>" alt="Card image cap" style="width: 900px;height: 600px;">
The line below can get the text of a span
$("#image").text()
You can then assign this to the src attribute of the img tag:
$("#imageDisplay").attr("src", $("#image").text() );
Demo:
// Add click event
$("#load").click(function() {
// Add text from span to src attribute of img
$("#imageDisplay").attr("src", $("#image").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id=image>https://via.placeholder.com/150</span>
<button id="load">Load Image</button>
<img id="imageDisplay">
I have a layout with a sequence of images overlapping.
I want to hide them one by them when clicking and after you hided all the pictures, show them in a reversed way until having them all – like a loop.
I have this simple piece of code where I manage to hide the images when clicking them, but can't figure how to show them again.
$('.overlap-img').on("click", function() {
$(this).hide();
})
Is there any way to accomplish that?
It's not mandatory to hide the image you click, it can work that you click anywhere and the images are closing, maybe that way you have more control of the sequence.
Thanks in advance!
1st: It will be good to add fake hide class to the hidden images
2nd: Need to get the number of the images and the number of hidden images
3rd: Loop through images using .each then you can use setTimeout to make a delay in show
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000 // duration to fade/show the image
$(document).on("click",'.overlap-img:not(.showing)' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var All_images_Count = $('.overlap-img').length, // get the all images length
Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count){ // if the all images == the hidden images then
$('.overlap-img.hide').each(function(index){ // loop through the hidden images .. (index) is the index of the image
var This_image = $(this); // $(this) cannot work in setTimeout so you need to define it outside
interval = setTimeout(function(){
This_image.removeClass('hide').addClass('showing').slideDown(); // remove the class from the image and show it
if($('.overlap-img.showing').length == All_images_Count){ // if all images finish showing
$('.overlap-img.showing').removeClass('showing'); // remove the showing class from all
}
} , time_to_show * index); // time_to_show * index to make a delay between images on show
});
}
});
})
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>
Also the .showing class I used it to prevent user to click till all images is shown
The OP Commented: I was simply wondering if it's possible, instead of making the images
appear automatically, to force the user to click in order to make them
appear. So the same process as to make them hide but making them
appear
$(document).ready(function(){
var interval,
time_to_hide = 500, // duration to fade/hide the image
time_to_show = 1000, // duration to fade/show the image
All_images_Count = $('.overlap-img').length; // get the all images length
$(document).on("click",'.overlap-img:not(.showing):not(:eq(0))' , function() {
// add class hide to the clicked image and use hide([duration] , [callback])
$(this).addClass('hide').slideUp( time_to_hide , function(){
var Hidden_images_Count = $('.overlap-img.hide').length; // get the hidden images length
if(Hidden_images_Count == All_images_Count - 1){ // if the all images == the hidden images then
$('.overlap-img:eq(0)').addClass('showing'); // Add the class showing to the first image
}
});
});
$(document).on("click",'.overlap-img.showing' , function() {
var ThisImage = $(this), // this image
NextImage = ThisImage.next('.overlap-img.hide'); // the next image
NextImage.removeClass('hide').addClass('showing').slideDown();
var showing_images_Count = $('.overlap-img.showing').length; // get the showing images length
if(showing_images_Count == All_images_Count){ // if the all images == the showing images then
$('.overlap-img.showing').removeClass('showing'); // remove the `showing` class from all the images
}
});
});
img{
position : absolute;
width : 100%;
height : 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="overlap-img" src="https://via.placeholder.com/100"/>
<img class="overlap-img" src="https://via.placeholder.com/150"/>
<img class="overlap-img" src="https://via.placeholder.com/200"/>
<img class="overlap-img" src="https://via.placeholder.com/250"/>
<img class="overlap-img" src="https://via.placeholder.com/300"/>
<img class="overlap-img" src="https://via.placeholder.com/350"/>
I have the same image at multiple widths, e.g. balloon-35.webp, balloon-40.webp, balloon-90.webp.
I also have multiple img elements with different widths, e.g. <img width="35"/>, <img width="40"/>, <img width="90"/>.
Can I specify the srcset attribute for each img with the 3 files mentionned above and have the img element chose the right file according to the width attribute? For example, if the width of the img is 35, then the 35 file is chosen.
Or is my only option to change the src attribute with the right file depending on the width? Or is there another way to achieve what I want?
Cheers!
Here is the snippet code, i have design for you just enter the images URL in the array of images as mention imagesUrls = ['balloon-35.webp', 'balloon-40.webp', 'balloon-90.webp'];. Value of url should be anything just the last 7 character 40.webp etc should be same as you mention in your upper description.
var a = document.getElementsByTagName("a");
function stups(){
var tagWidth = a[0].getAttribute("width");
document.getElementById("demo").innerHTML = tagWidth;
console.log(tagWidth);
var src = "";
var imagesUrls = ['balloon-35.webp', 'balloon-40.webp', 'balloon-90.webp'];
for (var img of imagesUrls)
{
var width = img.substr(img.length - 7);
var widthValue = width.substring(0, 2);
if (tagWidth.substring(0, 2) === widthValue){
src = img;
}
}
console.log(src);
document.getElementById("imageClass").src = src;
}
<BUTTON ONCLICK="stups()">VALUE FINDER </BUTTON>
<a value="this is a value" width="35px" href="value"><img id="imageClass" src=""> values rule!!</a>
<p id="demo"></p>
Do Ping me up, If you think that i did something good for you. Cheers!
While I wasn't that concerned about it in the beginning, I noticed that my page size is about 9 MB (+/- 200 images). I want to somehow decrease this by only loading the image when the user hovers over the specific <a>, so that only that image is loaded (which should decrease the page size drastically).
The code below is what I'm using right now
<style>
div.img {
display: none;
position: absolute;
}
a:hover + div.img {
display: block;
}
</style>
<div>
Some Name
<div class="img">
<img src="http://sub.domain.com/somename.jpg" alt="Some Name" style="some styles">
</div>
</div>
I think it's possible with jQuery, but I don't know where to start.
Thanks in advance.
Well if you have around 200 images in your directory, when a client requests the webpage it is going to have to download the images to have them ready if you are using a single page layout. I would look into lazy loading just as Adam stated. If you can also I would suggest to try to compress the photos if you can to lower the file size if possible. Good luck!
I fixed my problem by adapting an existing pen-code to adjust my needs (using jQuery). It now works again in IE/Firefox
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function($) {
$('.trigger').mouseover(function() {
// find our span
var elem = $(this).siblings('span');
// get our img url
var src = elem.attr('data-original');
// change span to img using the value from data-original
elem.replaceWith('<img src="' + src + '" style="display:block;position:absolute;"/>');
});
$('.trigger').mouseout(function() {
// find our span
var elem = $(this).siblings('img');
// get our img url
var src = elem.attr('src');
// change span to img using the value from data-original
elem.replaceWith('<span data-original="'+src+'"></span>');
});
});
</script>
Hover over me to fetch an image
<span data-original="https://lorempixel.com/g/150/200/"></span>
you can put the image with no src attribute and put the specific src in the href of div or the image!
then use jquery to get the href of a or data-src of image and then give it to the image the code will be something like this:
<a class="image" href="the-src-of-the-image">
<img src="(leave this blank)">
</a>
and this is the jquery
jQuery(document).ready(function($){
$('.image').on('hover',function(){
var img_src = $(this).attr('href');
$(this).children('img').attr('src',img_src);
});
});