I have the code right so that when I click the image link jquery puts the image where it should be and at the proper size. However, I can't figure out what code to use in the javascript so that when I click the image again. It removes the current content from the div and puts it back in again instead of repeatedly putting the image in the div?
Here is the javascript code:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
return false;
$('img').fadeToggle([normal]);
});
});
</script>
Here is the HTML it is effecting:
<div class="deal_content">
</div>
<div id="content">
<div id="imagelink">
<a href="#">
<img src="for_men_btn.fw.png" width="200" height="87" alt="For Men" />
</a>
<a href="#">
<img src="for_couples_btn.fw.png" width="200" height="87" alt="For Couples" />
</a>
<a href="#">
<img src="for_teens_btn.fw.png" width="200" height="87" alt="For Teens" />
</a>
</p>
</div>
Not sure if this is what you are asking for?
$(document).ready(function() {
$('img').click (function() {
var image = ('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle();
});
});
A simple if should be able to detect if there's already an image inside your element:
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
if ($('.deal_content img').length > 0) {
$('.deal_content img').remove();
} else {
$('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
}
return false;
$('img').fadeToggle([normal]);
});
});
</script>
The following fade toggles the current clicked image. In this case you need to use a delegated event (see documentation) to make it work on images that are appended dynamically.
$(document).ready(function() {
$('.deal_content').on("click", "img", function() {
$(this).fadeToggle("normal");
});
});
Then add a separate event handler for your link to append the images:
$('#imagelink a').click(function() {
$('.deal_content').append('<img src="deal_content.fw.png" width="700px" height="500px" alt="Deals" />');
return false;
});
Related
<html>
</body>
<div>
<img class="floatLeftClass" id="float-Left-Class" src="images/logo.png"
width="100" height="50">
</div>
</body>
</html>
$(document).ready(function () {
$('.floatLeftClass').click(function(){
$(this).load( 'index.html' );
});
});
//this is image on clicking this index page should be displayed my script is
Try this:
$('.floatLeftClass').click(function(){
location.href = 'index.html';
});
The "load" function is something else - it loads the requested resource into an element (like a <div> or similar).
Edit: You can read the documentation of .load() here: http://api.jquery.com/load/
Try this Method ...
<div>
<a href="https://www.w3.org/"> // Your page URL
<img id="img" src="imgname.png" width="100" height="50">
</a>
</div>
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');
}
});
Trying to figure out how to make it when I click on three seperate links it makes a different image for each link clicked appear.
Code for javascript is:
<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('img').click (function() {
var image = ('<img src="images/deal_men.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
$('img').click (function() {
var image = ('<img src="images/deal_teen.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
$('img').click (function() {
var image = ('<img src="images/deal_couples.fw.png" width="700px" height="500px" alt="Deals" />')
$('.deal_content').html(image).hide().fadeToggle('slow');
});
});
</script>
HTML being affected is:
<div id="imagelink">
<div align="left"> <img src="images/for_men_btn.fw.png" alt="For Men" />
<a href="#">
<img src="images/for_couples_btn.fw.png" alt="For Couples" />
</a>
<a href="#">
<img src="images/for_teens_btn.fw.png" alt="For Teens" />
</a>
</p>
</div>
<div class="deal_content">
<p id="clickstructions"> </p></div>
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
i am using this jquery and html for change the clicked image on a display div it works fine but the issue is when i click a image in the display div its open in the page itself. How to Make the image as it as when user click on it.
<script type="text/javascript">
jQuery('div#thumbs img').click(function () {
jQuery('#foo a').prop('href', jQuery(this).prop('src'));
jQuery('#foo img').prop('src', jQuery(this).prop('src'));
return false;
})
</script>
my html
<div id="foo">
<a href="#">
<img src="images/demo_slider.jpg" name="Display" id="display" /></a>
</div>
<br />
<div id="thumbs">
<img src="images/a.jpg" width="56" height="56" alt="" />
<img src="images/b.jpg" width="56" height="56" alt="" />
<img src="images/c.jpg" width="56" height="56" alt="" />
<img src="images/d.jpg" width="56" height="56" alt="" />
</div>
</div>
edit:
If the user click the thumbs image it load to the div foo. then the user click the image in foo the clicked image opens in the same page(as the basic html functionality like open image in new tab) i need to prevent the image open on click.
You should do
$('#foo a').click(function(e){
e.preventDefault();
});
Not tested, but you could try adding preventDefault:
jQuery("#foo a").click(function(e) {
e.preventDefault();
});
Did you mean something like that...