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...
Related
I get the image magnifier in this link:
https://thdoan.github.io/magnify/
Then I entered this code inside the body:
<img src="img/1.jpg" id="image" class="zoom" data-magnify-src="img/1.jpg">
<img src="img/2.jpg" id="image" class="zoom" data-magnify-src="img/2.jpg">
<img src="img/3.jpg" id="image" class="zoom" data-magnify-src="img/3.jpg">
I also added a button where it will trigger the effect:
<button onclick="myFunction()">Magnify</button>
I was able to magnify the image when I click the button, however, I also want that when I click the button again, the image magnifier will close.
Here is my script:
<script src="jquery.magnify.js" charset="utf-8"></script>
<script>
function myFunction() {
document.getElementById("demo").innerHTML =
$(document).ready(function() {
$('.zoom').magnify()
});;
}
</script>
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 hide language_arrow_bottom after clicking and show language_arrow_up and afterwards the other way around.
I cannot find the error in my code below? I know toggle in jquery but I don't want to use it for now.
Thanks in advance
I'm loading http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
HTML
<a id="language_arrow_bottom" href="#nogo" title="Other languages"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
<a id="language_arrow_up" href="#nogo" title="Close" style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
JS
$(document).ready(function ()
{
$('#language_arrow_bottom').click(function(event)
{
$('#language_arrow_bottom').hide();
$('#language_arrow_up').show();
});
$('#language_arrow_up').click(function(event)
{
$('#language_arrow_up').hide();
$('#language_arrow_bottom').show();
});
});
You need to hide the language_arrow_up element by default, not the image inside it
<a id="language_arrow_up" href="#nogo" title="Close" style="display:none;"><img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" /></a>
Demo: Fiddle
I don't know but I think you probably need to add return false; calls at the end of your functions. Other code looks good
Check this Fiddle
Just make a with the id and do the same procedure you tried with the tag
<div id="language_arrow_bottom">
<img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" />
</div>
<div id="language_arrow_up" style="display:none;">
<img src="web/images/up_arrow.jpg" width="13px" height="13px" alt=""/>
</div>
Agree with Arun above.
Also, this code may be working, but you are using the same image, "web/images/bottom_arrow.jpg", so visually it may look like it's not working. Try using separate content within the tag (or view the web inspector) to validate whether the code is working or not.
Another fiddle:
http://jsfiddle.net/8A8LS/1/
<a id="language_arrow_bottom"><img src="http://www.iconshock.com/img_jpg/REALVISTA/3d_graphics/jpg/128/arrow_icon.jpg" width="13px" height="13px" alt="" /></a>
<a id="language_arrow_up"><img src="http://petacross.com/images/bwd_arrow.gif" width="13px" height="13px" alt="" style="display:none;" /></a>
$('a').click(function () {
$('a img').show();
$(this).find('img').hide();
});
Change the code to set display "None" for "a" instead of the img as the image is inside the a tag and you are showing and hiding based on the "a" id.
<a id="language_arrow_bottom" href="#nogo" title="Other languages">
<img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt=""/>
<a id="language_arrow_up" href="#nogo" title="Close" `style="display:none;"`>
<img src="web/images/bottom_arrow.jpg" width="13px" height="13px" alt="" />
The same js code will work here after the above changes.
$(document).ready(function ()
{
$('#language_arrow_bottom').click(function(event)
{
$('#language_arrow_bottom').hide();
$('#language_arrow_up').show();
});
$('#language_arrow_up').click(function(event)
{
$('#language_arrow_up').hide();
$('#language_arrow_bottom').show();
});
});
This is because you have hide the image on load...you should use display none in 'a' tag not in 'img'
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 have a <div> with an image slider in an <li>. There are 12 images, and it takes some time to load all of them. While the images load, I want to show a loading GIF image. How can I do this with jQuery? My code is:
<div id="banner_slider">
<ul id="portfolio">
<li>
<img src="gallery/2010/2010slider//01_quddus_helal.jpg" alt="Slider Image" border="0" /><br />
<p class="caption"> Quddus Helal :: 01st - 2010</p>
</li>
<li>
<img src="gallery/2010/2010slider//02_md_moniruzzaman.jpg" alt="Slider Image" border="0" /><br />
<p class="caption"> Md Moniruzzaman :: 02nd - 2010</p>
</li>
</ul>
</div>
You can bind a listener to the load event of each image. Use a counter or some other mechanism to keep track of how many images are loaded each time the listener is invoked. Then hide the loading indicator after the last image is loaded. For example:
HTML
<span id="loading" style="display:none">Loading...</span>
<div class="images">
<img class="large-image" src="http://astritademi.files.wordpress.com/2011/04/happy_panda.jpg" width="893" height="548" />
<img class="large-image" src="http://www.pandafix.com/pandafix/images/r3387761054.jpg" width="275" height="199" />
<img class="large-image" src="http://farm1.static.flickr.com/149/357563212_f8b89ac6d8.jpg" width="500" height="375" />
</div>
jQuery
$(function() {
var images = $('.large-image')
, total = images.length
, count = 0;
$('#loading').show();
images.load(function() {
count = count + 1;
if (count >= total) {
$('#loading').hide();
}
});
});
You can see this example in action on jsFiddle: http://jsfiddle.net/hallettj/ZefaM/
You can use the jQuery load() function. It will run the code once the image has loaded. So if you have a gif shown, once the image has loaded, it will hide it.
Javascript
$('img#id').load(function(){
$('#loadingGif').hide();
});
HTML
<div id="loadingGif">
<img src="loading.gif" />
</div>
This is what you need:
http://jqueryfordesigners.com/image-loading/
if u loading all images via AJAX then use below way
HTML
<div id="loadingDiv"><img src="loading.gif"></div>
jQuery
$('#loadingDiv')
.hide() // hide it initially
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
})
;