I created a javascript animation to move a picture to the right when on mouseover and to go back to its resting position when the mouse exits the image. It works flawlessly for the first image but when I try the other iterations the first image moves instead of the one I hover on.
Here is the HTML code:
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt A">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt B">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt C">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
I'm trying to use the classes names "class="nomPositionCourt A">" the target the specific image being hovered on but it doesn't seem to be working.
Here is the JS code:
function over(){
if ( $("#infos").hasClass("A") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $("#infos").hasClass("B") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
}
function out(){
$("#infos").stop().animate({"margin-left": -287});
}
At first glance, it looks like the reason is that both of your images are using the same ID tag (which is bad practice).
This is the code I'm looking at:
figure id="infos"
You are using that same ID tag twice. When your code runs, it's picking up the first "infos" tag it comes to, which is your first image.
Make sure to use unique ID tags and this should help resolve your problem.
You have assigned the id attribute to more than one element which suppose to be unique id="infos" class can be assigned to multiple elements but id should be unique
Try this one by changing the id to class
$(".nomPositionCourt").hover(function(){
if ( $(this).hasClass("A") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $(this).hasClass("B") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
},function(){
$(this).stop().animate({"margin-left": -287});
})
In $(this) you have the object of current hovered image
Here is the Reference
Related
I have some modals where there are some images. I also have a download button, that should download just the shown (the only visible) image in the modal.
I tried to make that the href link of the download button is equal to the visible image href, but it it doesn't seem to work...
Here you can see the full page code, but the part that interests me is this one:
<div id="myModal_12" class="modal">
<div class="modal-content">
<div class="Slide mySlides_12">
<div class="numbertext">1 / 3</div>
<img src="uploads/IMG_4946.JPG43879.jpg" class="little_image" style="width:50%;">
</div>
<div class="Slide mySlides_12">
<div class="numbertext">2 / 3</div>
<img src="uploads/IMG_4949.JPG21730.jpg" class="little_image" style="width:50%;">
</div>
<div class="Slide mySlides_12">
<div class="numbertext">3 / 3</div>
<img src="uploads/IMG_4950.JPG72501.jpg" class="little_image" style="width:50%;">
</div>
<!-- Next/previous controls -->
<div class="input-group-btn">
<a onclick="downloadFunction(this)">Download this image</a>
</div>
<span class="close cursor" onclick="closeModal(12)">
<img src="/images/close.png">
</span>
<a class="prev" style=" display: block; " onclick="plusSlides(-1, 12)">❮</a>
<a class="next" style=" display: block; " onclick="plusSlides(1, 12)">❯</a>
</div>
</div>
</div>
<script>
function downloadFunction(linkElement) {
var little_image = document.getElementsByClassName("little_image"); // Get all the images with that class
var right_image = $(little_image).not(":hidden"); // Get just the visible image
var src = right_image.src;
linkElement.href = src; // Set the link href on the visible image src
}
</script>
The JavaScript function return an "undefined" value...
Any help is very appreciated
To get the src attribute of an element you should use the attr(<attribute>) method. Given what you are trying to do, this logic could be reduced to:
linkElement.href = $('.little_image:visible').attr('src');
As Taplar has said you can use:
linkElement.href = $(".little_image:visible").attr("src");
However, there is an issue. The jQuery function returns an array and if you added another element that fits this criteria before this element that could cause an issue. Since attr returns for the first element of that array it may not work for the proper element you wanted it to. To fix this you could write this:
linkElement.href = $(".little_image:visible")[1].getAttribute("src"); // [1] the second element
If you want to get an attribute of element you should use attr function. In your problem you need to call like this;
linkElement.href = right_image.attr('src');
In addition, if you want to set an attribute then use .attr(attribute, value) like this:
right_image.attr("src", "https://www.example.com/")
I started learning jQuery and wanted to make some work on the following structure.
<figure class="blog_image_wrap" style="text-align: center">
<img class="text-center" src="https://ahmcho.com/storage/app/uploads/public/5a6/5d4/672/5a65d467293cd550396758.jpg" style="width:50%;">
<figcaption class="blog_image_wrap">
Gary Oldman
</figcaption>
</figure>
There are multiple <figure> tags in one page and I want to extract the text of corresponding <figcaption> and pass it as a value of data-caption attribute for <a> tag. For all '' elements inside '' elements.
I have the following code but it passes all text values of <figcaption> texts as one for all <a> elements :
$(document).ready(function()
{
$('figure').each(function()
{
$("figure>a").attr('data-caption', $("figure").find('figcaption').text());
});
$("figure>a").attr("data-fancybox" , "test");
});
I would appreciate if someone would point me what am I doing wrong.
Try to use this to target the current element in each iteration of each(). Then find the specific a from that element to set the attribute. Try the following way:
$(document).ready(function() {
$('figure').each(function() {
$(this).find('a').attr('data-caption', $(this).find('figcaption').text());
$(this).find('a').attr("data-fancybox" , "test");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="blog_image_wrap" style="text-align: center">
<img class="text-center" src="https://ahmcho.com/storage/app/uploads/public/5a6/5d4/672/5a65d467293cd550396758.jpg" style="width:50%;">
<figcaption class="blog_image_wrap">
Gary Oldman
</figcaption>
</figure>
Since you iterating through figure, you need to find the a and figcaption on current iteration. To find the current figure object you can use $(this). So, to find the a and figcatption you can have following code:
$(document).ready(function()
{
$('figure').each(function()
{
$(this).find("a").attr('data-caption', $(this).find('figcaption').text());
});
});
I have this node.
<figure class="wide">
<a href="https://www.example.com/image_HDR.jpg" target="_blank">
<img class="exif-reader" src="https://cdn.example.com/content_big_20171008_112106_HDR.jpg"">
</a>
<figcaption>
<div class="items"> </div>
</figcaption>
</figure>
I'm starting from the image using
var img = $("img[src$='value.FileName']");
I need to replace the HTML inside the .items div but I cannot find how to get it. In the page I have a lot of nodes with this structure. I need to select the .items div that is inside the same node of the img
With css it's hard, but jquery makes it fairly easy I think:
var items = $("img[src$='value.FileName']").closest('figure').find('.items');
items.html('<p>blabla</p>');
Here is a snippet example using your code:
$(function(){
var $img = $(".exif-reader");
var $itemsDiv = $img.closest(".wide").find('.items');
$itemsDiv.html("enter html here")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="wide">
<a href="https://www.example.com/image_HDR.jpg" target="_blank">
<img class="exif-reader" src="https://cdn.example.com/content_big_20171008_112106_HDR.jpg"">
</a>
<figcaption>
<div class="items"> </div>
</figcaption>
</figure>
I changed the img selector since $("img[src$='value.FileName']"); was not working in a snippet for me.
I have three images that each change to a second image on mouseover. On mouseover they also reset the others to the standard image. This all works fine.
However..
I would like each of the second images to be clickable links to another page.
Hope someone can help, many thanks.
$(document).ready(function(){
$('#s1').mouseover(function(){
$('#s1').attr('src', 'images/object/click-1.png');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s2').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/click-2.png');
$('#s3').attr('src', 'images/object/standard-3.jpg');
});
$('#s3').mouseover(function(){
$('#s1').attr('src', 'images/object/standard-1.jpg');
$('#s2').attr('src', 'images/object/standard-2.jpg');
$('#s3').attr('src', 'images/object/click-3.png');
});
});
So the links would need to be on click-1.png, click-2.png, click-3.png.
<div id="section3" class="container-fluid" align="center">
<div class="row row-centered ">
<div id="top-box-1" class="col-sm-4">
<img src="images/object/standard-1.jpg" id="s1" width="300" height="300" />
</div>
<div id="top-box-2" class="col-sm-4">
<img src="images/object/standard-2.jpg" id="s2" width="300" height="300" />
</div>
<div id="top-box-3" class="col-sm-4">
<img src="images/object/standard-3.jpg" id="s3" width="300" height="300" />
</div>
</div>
</div>
Just make each image tag (s1, s2, and s3) a link. The actual src attribute of the img tag can change to display whatever image you want, it's really irrelevant. After all, A user can only click on something they've moused over.
I want to make a slider, and create a way to count the number of img inside the div .sliderWrapper. The number of imgs will be stored in an array as it`s length, so the slider will play accourding it.
Is that possible?
<div class="sliderWrapper">
<img class="image" src="img1.jpg">
<img class="image" src="img2.jpg">
</div>
Using length property of the object you can count the elements.
alert($('.sliderWrapper img').length)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="sliderWrapper">
<img class="image" src="img1.jpg">
<img class="image" src="img2.jpg">
</div>