We Keep Coding

How to get the Image "title" attribute value into another element using jQuery

I need to display the title value of the image (class name: media_image) in another p tag (class name: media_folder_title) for every row. But I can't able to get the value. I have attached the sample code here.
Screenshot:
HTML Code:
<div id="media-folder">
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image">
<p class="media_folder_title"></p>
</div>
</div>
jQuery Code:
$(".media_folder img.media_image").each(function(){
var imgtitle = $(this).attr("title");
console.log(imgtitle);
setTimeout(function(){
console.log("settimout ok");
$(this).append("<p>"+imgtitle+"</p>");
}, 3000);
});

The problem is with the $(this) in the timeout because it's no longer the image but the window.
Also, append aims to append an element inside another element. It's not possible appending an element inside an image.
As your snippet implies, you want to append the p tag after the image, after is the right function for that.
$(".media_folder img.media_image").each(function() {
const $img = $(this);
const imgtitle = $img.attr("title");
setTimeout(function() {
$img.after("<p>" + imgtitle + "</p>");
}, 3000);
});
<div id="media-folder">
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5382" title="Test" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5383" title="test1" class="media_image">
<p class="media_folder_title"></p>
</div>
<div class="media_folder">
<i class="fa fa-folder-open"></i>
<img src="/img/artist/default.jpg" alt="5118" title="Uploads" class="media_image">
<p class="media_folder_title"></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>

Change the selectors in the first line into:
.media_folder img .media_image
Sometimes space is important.

Your problem is that you are trying to append something inside an img tag, which is not possible - as with a few other html elements.
What you are looking for is $.after()
Try $(this).after($('<p />').text(imgtitle))

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

How to change target element state when overlapping element is hovered?

I have the following element in my page:
<div class="gallery-item" data-width="1" data-height="1">
<a href="#">
<div class="gryscl" data-image="gallery1">
<img src="assets/images/products/1.jpg" id="gallery1" alt="" class="image-responsive-height">
</div>
<div class="overlayer bottom-left full-width">
<div class="overlayer-wrapper item-info ">
<div class="gradient-grey p-l-20 p-r-20 p-t-20 p-b-5">
<div class="">
<i class="fa fa-info-circle fs-16" aria-hidden="true"></i>
</div>
<div class="">
<p class="block bold fs-14 p-t-10">Panavision Small AC Bag</p>
<h5 class="pull-right semi-bold font-montserrat bold">159,00 €</h5>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</a>
</div>
The image is swapped with a greyscale image via JS, which only shows the original full color image on hover. However, as there is content in the div.overlayer which animates up on hover to partially cover the image, the image is going back to greyscale prematurely.
How do I ensure that the full color image remains even when the hover is on the div.overlayer and it's contents?
Below is the JS that creates and swaps out the image:
<script type="text/javascript">
$(window).load(function () {
$("div.gryscl").each(function (index, obj) {
$("#" + $(obj).attr("data-image")).pixastic("desaturate");
});
$("div.gryscl").mouseenter(function (e) {
var self = document.getElementById($(e.currentTarget).attr("data-image"));
Pixastic.revert(self);
});
$("div.gryscl").mouseleave(function (e) {
$("#" + $(e.currentTarget).attr("data-image")).pixastic("desaturate");
console.debug($(e.currentTarget).attr("data-image"));
});
});
</script>

jquery - can't get the elements to fadeOut / fadeIn

I've wrote this code in order to replace the text regarding the img they are clicking.
I can't understand why my code isn't executing, I looked it over and over again.
I hope someone can find my mistake :(
This is the jQuery code:
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId===3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId===2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId===1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
and this is the HTML:
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
Please help!!!!
Thanks

Problem is in your condition checking
instead of using such that
currentId===3 // checks that currentId is numeric 3
Use
currentId=='3' //changed === to ==, check that currentId is string type 3
And one more thing, after clicking a your page is redirecting, so if you want to prevent this, use preventDeault or put # in your href.

HTML
<div>
<div id="icon">
<a id="1" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/169860/hutim.jpg) 0 0;" src="" /></a>
<a id="2" class="img" href=""><img style="background: url(http://images.webydo.com/10/100459/Folder%201/work_electric_main_banner.png) -20px -10px;" src="" /></a>
<a id="3" class="img" href=""><img src="http://hviil.co.il/wp-content/uploads/2013/02/DS-2CD7254F-EIZ-310x310.jpg" alt="מצלמות אבטחה" /></a>
</div>
<div id="text">
<div id="text-1" class="textbox">
<h2>1</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
<div id="text-2" class="textbox">
<h2>2</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="text-3" class="textbox">
<h2>3</h2>
<p>adssssssssssssssssssssssasdsaaaaaaaaaaaaaaaaaaaa</p>
</div>
</div>
</div>
JS
$(document).ready(function() {
$('#text-1').fadeIn(500);
//click event
$('.img').click(function() {
var currentId = $(this).attr('id');
alert(currentId);
if (currentId==3) {
$('#text-3').fadeIn('fast');
$('#text-2, #text-1').css('display', 'none');
} else if (currentId==2) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
} else if (currentId==1) {
$('#text-2').fadeIn('fast');
$('#text-1, #text-3').css('display', 'none');
}
});
});
WORKING LINK
http://jsbin.com/heseforaxe/1/edit?html,js,output

var currentId = $(this).attr('id');
All the value of attributes is string ,not number.
so,you can change like this.
currentId==="3";
or
currentId==3;

currentId===3 this should be changed to currentId==3 because the returned id is string
because there is a post back when clicking the link you need to add ref="#" to the a tag
there are missing closing tags on div id='text-1' and the main div
you can find a working copy of this from this url "http://jsfiddle.net/t3L1fkuh/6/" (i have removed the images because 2 of them does not load).
.textbox{
display: none;
}
the above class is added so that it adds the fade in effect on page load

JS- How to change image on Mouseout

I have an banner with mouse over effects here:
As you can see the mouseover effects are working perfectly however I don't know how to make a mouse out animation. Here are its current codes:
Javascript:
var gotolink = "#";
function changeimage(imageNumber, url) {
if (document.images) {
document.images.targetimage.src =
document.getElementById('hiddenImages').children[imageNumber].src;
gotolink = url;
}
}
HTML:
DIV id=base>
<DIV id=mapcontainer>
<A href="javascript:warp()">
<IMG border=0 name=targetimage src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif">
</A>
</DIV>
<DIV id=textcontainer>
<DIV class=textboxinner1>
<A onmouseover=changeimage(2,this.href) href="index.html">8CCC REQUESTS/TALKBACK</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(1,this.href) href="index.html">Alice Springs 8952 7771</A>
</DIV>
<DIV class=textboxinner2>
<A onmouseover=changeimage(0,this.href) href="index.html">Tenant Creek 8952 7182</A>
</DIV>
<DIV class=textboxinner3>
<SPAN class=t3nonelink>...other contact details <A onmouseover=changeimage(2,this.href) href="index.html">here</A></SPAN>
</DIV>
</DIV>
</DIV>
<div id="hiddenImages" style="display: none">
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover.gif" name="hoverImage" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm_hover2.gif" name="hoverImage2" />
<img src="http://www.keencloudmedia.com/skybluekangaroo/map_wm.gif" name="originalImage" />
</div>
Hope you could help me achieve the mouseout effect.

I recommend using either 'onmouseout="changeimage(2,this.href)"' (in the same place as the mouseover property. Or use a jQuery handler, which is more complex for your needs really.