<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>
Related
How does jquery determine when the uploaded image is empty, let its parent node hide? I have written the code, but it doesn't work! Can you give me some suggestions, or the corresponding examples? Thank you very much!
<p id="new_zs">hello! <img src="'+ addressUrl+list.ccieimg+'" alt=""></p>
<script>
$(function() {
if ($('#new_zs img').attr('src')) {
$(this).show();
} else {
$(this).parent().hide();
}
})
</script>
The issue is because the scope of this, in the location you're running the jQuery code, will be the window, not the #new_zs img element.
To fix this you will need to specifically target the #new_zs element. Also note that show() is redundant, as that's the default state anyway, so the logic can be simplified to just:
$(function() {
if (!$('#new_zs img').attr('src'))
$('#new_zs').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="new_zs">hello! <img src="" alt=""></p>
Note that this is assuming that you're outputting an empty string in to the src attribute of the HTML. If that's not the case you will need to change your if condition.
Image elements can trigger an error event and a load event that you can use to see if an image is correctly loaded.
The error event happens when the location in the src event does not
return a valid image or does not return at all.
The load event happens when the image is successfully loaded.
I made an example of these functions for you below.
You can use the error handler to check if something went wrong with the image. This also works if the url is incorrect. The only downside is that it does not trigger an error when no src attribute is defined as you can see in the below snippet.
$('.img').on('error', function() {
console.log('incorrect source:' + $(this).attr('id'));
$(this).parent('p').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="new_zs1">hello1!<img class="img" id="img1" src="" /></p>
<p id="new_zs2">hello2!<img class="img" id="img2" src="http://www.incorrectdomain.stupid/hahah.png" /></p>
<p id="new_zs3">hello3!<img class="img" id="img3" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></p>
<p id="new_zs4">hello4!<img class="img" id="img4"/></p>
Alternatively you can hide all images at first and show images only if the image is loaded successful. This works for images without a src element too.
$('.img').parent('p').hide();
$('.img').on('load', function(){
console.log('Correct image: ' + $(this).attr('id'));
$(this).parent('p').show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="new_zs1">hello1!<img class="img" id="img1" src="" /></p>
<p id="new_zs2">hello2!<img class="img" id="img2" src="http://www.incorrectdomain.stupid/hahah.png" /></p>
<p id="new_zs3">hello3!<img class="img" id="img3" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></p>
<p id="new_zs4">hello4!<img class="img" id="img4"/></p>
This will do multiple images
$('img[src=""]').each(function(){
$(this).parent().hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>image show <img src="/" alt=""></p>
<p>image Hide <img src="" alt=""></p>
<p>image show <img src="/" alt=""></p>
<p>image Hide <img src="" alt=""></p>
For your single image
$('#new_zs img[src=""]').parent().hide();
I'm trying to convert this lightbox code to being able to open on load, not on click of the link (which I would want to remove).
I can't seem to get it working. Any ideas?
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
Show PopUp</a>
<div class="white_content" id="light">
<a class="textright" href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
Close</a>
<div id="lbcontent">
<p>THIS IS MY LIGHTBOX CONTENT</p>
</div>
</div>
<div class="black_overlay" id="fade"></div>
<script>
document.addEventListener('load', function() {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}, false);
</script>
create a js function loadLightBox and call it onload of body tag
<script language="javascript">
function loadLightBox()
{
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
</script>
<body onload = "loadLightBox()">
...
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;
});
My project files can be downloaded here: https://rapidshare.com/files/1601614875/projectFiles.zip [if needed:" only 2mb]
I have a webpage and a popup inside the webpage. In the popup there are two images and a heading inside a div, and I want the div when hovered to hide and show another div inside which are the same images larger and a paragraph. I have the very same functionality for the same content in the main webpage and it works perfectly, but in the popup it does not work at all.
my HTML code:
<div class="thumb-list" id="popup-thumb-list">
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-01.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/029 Derek_Jeremiah_Reid-ID29597.jpg" width="150" />
<p>Derek Jeremiah Reid as Home Buyer<br>Click to see profile.</p>
</div>
</div>
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-02.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/030Rachel_O_meara-ID15405.jpg" width="150" />
<p>Rachel O'Meara as Agent<br>Click to see profile.</p>
</div>
</div>
</div>
Javascript code:
$('.small-thumb-holder').mouseover(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
});
$('.big-thumb-holder').mouseout(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
})
My attempt which does not work:
<div class="small-thumb-holder" onmouseover="(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
};">
<a href="" class="actor_thumb">
<img src="images/actor-01.jpg" width="65" height="50" />
</a>
<h3>Lucas Allen</h3>
as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" onmouseout="(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
}">
You need to execute the jQuery code after the popup has been loaded so that the mouseover and mouseout events will bind to the divs. To do so you could wrap the jQuery lines in a function and call if after loading the popup.
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...