I have a list of image like this:
<div id="imgSorce">
<img src="images/img1.png"/>
<img src='images/img2.png'/>
</div>
<div id="imgResult"></div>
I want to be able to insert the images to a div tag when I click on any of them.
function myFunction() {
document.getElementById("imgResult").innerHTML = "<img src='images/aftersurprise.png' />";
}
Thanks
You can do it with jQuery:
jQuery('a').on('click', function(){
var pic = jQuery(this).html();
jQuery('#imgResult').html(pic);
});
https://jsfiddle.net/1o4ngjnc/
Try like this by using onClick.
function myFunction() {
document.getElementById("imgResult").innerHTML = "<img src='images/aftersurprise.png' />";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="imgSorce">
<img src="images/img1.png"/>
<img src='images/img2.png'/>
</div>
<div id="imgResult"></div>
function myFunction(elment) {
// Copy the <li> element and its child nodes
var cln = elment.firstChild.cloneNode(true);
// Append the cloned <li> element to <ul> with id="myList1"
document.getElementById("imgResult").appendChild(cln);
}
<div id="imgSorce">
<img width='100px' height='100px' src="http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg"/>
<img width='100px' height='100px' src='http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images.jpg'/>
</div>
<div id="imgResult"></div>
As you tag with jquery, you can do like below:
Find the <img> inside the clicked <a>. It's $(this).children('img')
Clone it. It's .clone()
Before move the picture to #imgResult, clear anything inside it.
$('#imgResult').empty()
Edited: If image needs to stay, don't do the step 3, which means replace
$('#imageResult').empty() to simple $('#imageResult')
Put the cloned image to #imageResult. It's .appendTo($('#imgResult'))
$('a').click(function() {
$(this).children('img').clone().appendTo($('#imgResult'));
});
img {
max-width: 300px;
height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="imgSorce">
<img src="https://i.imgur.com/cWCw1q2.jpg"/>
<img src='https://i.imgur.com/4EiQldb.jpg'/>
</div>
<div id="imgResult"></div>
Here is the code in pure Javascript:
function myFunction(clicked_id) {
document.getElementById("imgResult").innerHTML = "<img src='" + document.getElementById(clicked_id).getAttribute("src") + "'/>"
}
<div id="imgSorce">
<a href="#" ><img onclick="myFunction(this.id)" id="img1" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg"/></a>
<a href="#" ><img onclick="myFunction(this.id)" id="img2" src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg"/></a>
</div>
<div id="imgResult"></div>
You may simply replace the innerHTML:
function myFunction(el) {
document.getElementById("imgResult").innerHTML = el.innerHTML;
//in case you want to keep appending images insted of replacing the old one, use `+=`
//document.getElementById("imgResult").innerHTML += el.innerHTML
}
<div id="imgSorce">
<a onclick="myFunction(this);" href="#">
<img src="images/img1.png" />
</a>
<a onclick="myFunction(this);" href="#">
<img src='images/img2.png' />
</a>
</div>
<div id="imgResult"></div>
Related
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
I plan on deleting all instances of an entire <div> from the page, if it has an image with a specific name. I am not sure if it's even possible with JQuery.
Here is my HTML:-
<div class="jk-content-module__image">
<a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
<img typeof="foaf:Image" src="path-to-img" alt="" title="">
</a>
<div style="display: none;">
<div id="colorbox-inline-1">
<ul>
<li class="first last"><img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title=""></li>
</ul>
</div>
</div>
</div>
What I am hoping is, that all the <div> on my page with a class of jk-content-module__image should have the child <div style="display: none;"> ... </div> removed, if there is an <img> with a src of blank_0.png in it.
Hence if the image has a src of blank_0.png present, I want the entire <div style="display: none;"> to be removed.
I hope I am clear.
I'll be grateful if you could assist.
You can use .filter() on ".jk-content-module__image" elements with parameter :has(img[src=blank_0.png]), .find() with parameter "div[style*='display: none']" note space character before none which matches current html, .remove()
$(function() {
$(".jk-content-module__image").filter(":has(img[src*='blank_0.png'])")
.find("div[style*='display: none']").remove()
})
jsfiddle https://jsfiddle.net/ks6b596n/1/
You can do like this:
$(document).ready(function() {
var elements = $(".jk-content-module__image");
elements.each(function(i, obj) {
if ($(obj).find("div[style*='display: none'] img").attr("src").indexOf("blank_0.png") > 0) {
$(obj).find(".hiddenDiv").remove();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jk-content-module__image">
<a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
<img typeof="foaf:Image" src="path-to-img" alt="" title="">
</a>
<div class="hiddenDiv" style="display: none;">
<div id="colorbox-inline-1">
<ul>
<li class="first last">
<a href="http://thesite.com/sites/default/files/default_images/blank_0.png" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
<img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title="">
</a>
</li>
</ul>
</div>
</div>
</div>
maybe something like this with JQuery?
//get the src for your image
var imgSrc = $(".jk-content-module__image div img").attr('src').toLowerCase()
//see if it contains blank_0
if(imgSrc.indexOf('blank_0.png')>-1)
{
//if true, remove the div
$(".jk-content-module__image div")
}
You can use this:
$(".jk-content-module__image div:hidden").filter(function() {
return $(this).find('img').attr('src').indexOf('blank_0.png') !== -1
}).remove()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="jk-content-module__image">
<a href="path-to-img" title="" class="colorbox init-colorbox-processed cboxElement" rel="gallery-node-2">
visible image
<img typeof="foaf:Image" src="path-to-img" alt="" title="">
</a>
<div style="display: none;">
<div id="colorbox-inline-1">
<ul>
<li class="first last">
<img typeof="foaf:Image" src="http://thesite.com/sites/default/files/default_images/blank_0.png" alt="" title=""> hidden img
</li>
</ul>
</div>
</div>
</div>
Fiddle
Using jQuery:
$('img[src~=/blank_0.png]').closest('div[style*="display: none"]').remove();
In English: Find all img elements who's src attributes end in /blank_0.png. From there, find their closest ancestor elements who's style attributes contain display: none. Remove those ancestor elements.
May need to adjust the spacing in display: none as this needs to be exactly as it appears in the original.
In javascript:
[].slice.call(document.getElementsByTagName('IMG')).filter(function(e,i,a){
return e.src.endsWith('/blank_0.png');
}).forEach(function(e,i,a){
var t = e.parentNode;
while(t != null && (t.nodeName != 'DIV' || t.style.display != 'none')){
t = t.parentNode;
}
if(t != null && t.parentNode != null) {
t.remove();
}
});
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
How to clone an existing link with class="link" and wrap it around each img in the div "wrap"? Suppose we don't know the link so we can't just use this method:
$('#wrap img').wrap('');
HTML:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
Result:
<a href="http://foo.com" class="link">
<img/>
</a>
<div id="wrap">
<img class="img" />
<img class="img" />
<img class="img" />
</div>
You could use the outerHTML property:
var link = $('.link').clone().empty().prop('outerHTML');
$('#wrap img').wrap(link);
Do this:
var anchor = $(".link");
anchor.html('');
$("#wrap img").wrap(anchor);
You can simply try this single line:
$('#wrap img').wrap('<a href="' + $('a.link').prop('href') + '">');
To clone the element without children:
$('#wrap img').wrap($('a.link').clone().empty());
Image dimensions in then created this is called into the picture if the picture is not loaded error image is shown.
<div id="hekimResimMini"><img src="" id="imgHekimResim" alt="" width="40" height="55" ></div>
$('#imgHekimResim').load(function(){})
.attr("src", "./personelResimi.jpeg?kurSicNo="+lcd.list[x].DOKTORID)
.error(function() {
var thisImg = this;
if ( $.browser.msie ) {
setTimeout(function() {
if ( ! thisImg.complete ) {
$(thisImg).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
},250);
} else {
$(this).attr('src', '../../images/error.png');
$(thisImg).css('width','40').css('height','27').css('margin-top','14px').css('margin-bottom','14px');
}
});
This is a little bit different than another question I just had answered. i want
<img style="float:right;" src="/explore_btn.png"> to trigger the large image to load in the <div id="show_area">. So if achor has id="list" then load that image in show_area when explore_btn.png is clicked for that container. there will be 12 different containers with thumbnails. How can I do this correctly
<script>
$('#list img').on('click',function(){
var old_img = this.src;
var new_img =old_img.split('-150x150').join('')
$('#show_area').html('<img src="'+new_img+'" />');
});
</script>
<div id="show_area"> large image here </div>
<div class="container1">
<a id="list" href="#">
<img style="float:left;" src="/escher_full-150x150.png" width="150" height="150" />
</a>
<div class="search_desc">
<strong>Escher</strong><br><br>
<!-- clicking explore_btn will load escher_full.png in the show_area div -->
<img style="float:right;" src="/explore_btn.png">
</div>
</div>
<div class="container2">
<a id="list" href="#">
<img style="float:left;" src="/footer_full-150x150.png" width="150" height="150" />
</a>
<div class="search_desc">
<strong>footer</strong><br><br>
<img style="float:right;" src="/explore_btn.png">
</div>
</div>
Change all id="list" to class="list" (because ID's must be unique) and then use this:
$('.list img').on('click',function(){
You can read this about ID attribute. You could actually change all the <a> elements with <div> instead... or why do you want to have <a> ?
So your code should look like:
<script>
$(document).ready(function () {
$('.list img').on('click', function () {
var old_img = this.src;
var new_img = old_img.split('-150x150').join('')
$('#show_area').html('<img src="' + new_img + '" />');
});
$('.search_desc img').on('click', function () {
var origin = $(this).parents('div.search_desc').parent().find('img:first')[0];
var old_img = origin.src;
var new_img = old_img.split('-150x150').join('')
$('#show_area').html('<img src="' + new_img + '" />');
});
});
</script>
I wrapped your code in a ready function so it's loaded after the page finished loading.
FIDDLE for testing