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');
}
});
Related
Being that this is my HTML with the four images:
$('div#slideshow').children(function(index){
$(this).width('90%');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
Could you perhaps explain why this is or what I've done wrong with my jQuery command? I'm stumped.
The .children() function does take a parameter, but it's not intended to be a function that operates on the child elements. It's for filtering the child elements.
You could use .children().each() with your code, or you could just do this:
$("#slideshow > img").width("90%");
The library has implicit iteration built in, so when your selector matches multiple elements it will make the changes to each one automatically.
Children is used for filtering, it doesn't do a callback for each element. For that, you need each:
$(function() {
$('div#slideshow').children().each(function(index) {
$(this).width('90%');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
Or just use css:
#slideshow > img {
width: 90%;
}
<div id="slideshow">
<img style='position:relative;' width="400px" src="https://consumermediallc.files.wordpress.com/2014/11/totinos-stock-08-2014.jpg" alt="" />
<img src="https://36.media.tumblr.com/66fa7962b68e90da541078fcc9efdc25/tumblr_inline_nnby3oQs8s1si7eaa_500.jpg" alt="Lightning Ghost" />
<img src="http://ak-hdl.buzzfed.com/static/2014-05/enhanced/webdr02/14/7/enhanced-3829-1400068353-2.jpg" alt="Girraffe-dog" class="slide" />
<img src="https://www.colourbox.com/preview/2291250-terrible-grimace-men-with-shovel.jpg" alt="Purpleish Kitty" />
</div>
How could I make it that if someone clicks the image of the selected product to change the url of the button under the images
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
text/image for amusement only, they are not really the products
What I have tried
window.onload = function() {
var sel = document.getElementById('product');
sel.onchange = function() {
document.getElementById("buy").href = "https://amazon.com/" + this.value;
}
}
Here's a codepen http://codepen.io/anon/pen/bdyWGa
Jquery solution:
$(function(){
$("img").click(function(){
$("#buy").attr("href","https://amazon.com/"+$(this).attr("value"));
});
});
Javascript Version:
var images = document.getElementsByTagName("img");
for (var i=0, len=images.length, img; i<len; i++) {
img = images[i];
img.addEventListener("click", function() {
document.getElementById("buy").setAttribute("href", "https://amazon.com/"+ this.getAttribute("value"));
alert("New href value: " + "https://amazon.com/"+ this.getAttribute("value"));
});
}
Working fiddle: http://codepen.io/anon/pen/NqVjGY
<img id="img1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img id="img2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img id="img3" src="http://placehold.it/300x100?text=Crack" alt="" />
<br>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
and:
$("#img1").on("click", function(){
$("#buy").attr("href","https://mynewurl.net");
});
here you describe clicking on which img will change url to what
In javascript. Use e.target for take the current click element and get the value using attrubutes and apply to the href attribute.
window.onload = function() {
var sel = document.getElementById('product');
sel.onclick = function(e) {
console.log( e.target.attributes[0].value)
document.getElementById("buy").setAttribute('href', "https://amazon.com/" + e.target.attributes[0].value) ;
}
}
CodeOpen
Use jQuery to add a click event to all images to fetch the property value and add as an addition to href property of the intended element
$(function(){
$('img').on('click', function(){
$('#buy').attr('href',"https://amazon.com/" + $(this).attr('value'));
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<img value="1" src="http://placehold.it/300x100?text=Mary+Jane" alt="" />
<img value="2" src="http://placehold.it/300x100?text=LSD" alt="" />
<img value="3" src="http://placehold.it/300x100?text=Crack" alt="" />
</div>
<a id="buy" href="#"><button>Go to the the specific link</button></a>
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>
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
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