I have 4 images in the same class. Wen I click one of the images of that class i want to replace that image, but only that image and no other from the same class:
<img src="1..." class="things">
<img src="2..." class="things">
<img src="3..." class="things">
<img src="4..." class="things">
In the javascript code (using jQuery) I have:
$(".things").click(function(){
$(this).attr('src', 'other_image.png');
})
It doesn't do nothing!
Before I have a .hover() for change the icon image when the mouse is hover it! Maybe is that the problem!
Few mistakes in code - change it to --
$(".things").click(function(){
$(this).attr('src', 'other_image.png');
});
See DEMO
New Demo with Hover
var isClicked = false;
$(".changeImage").hover(function(){
isClicked = false;
$(this).attr("src","http://thumb10.shutterstock.com/thumb_small/210376/124505092/stock-photo-beautiful-businesswoman-portrait-124505092.jpg");
},function(){
if(!isClicked)
$(this).attr("src","http://thumb10.shutterstock.com/thumb_small/91282/117241141/stock-photo-image-of-pretty-businesswoman-looking-at-camera-117241141.jpg");
else
isClicked = false;
}).click(function(){
isClicked = true;
});
You missed some quotes I think:
$(".things").click(function(){
$(this).attr('src', 'other_image.png');
})
hey buddy please check out this code..
<script>
$("document").ready(function (){
$("img").click(function(){
$(this).attr('src', 'Blue hills.jpg');
});
});
it works fine for me.
Related
I'm creating an overlay div using the following code when an image thumbnail is clicked:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs)
return false;
});
});
</script>
This works fine.
Now i need to remove or hide the overlay div when the user clicks on the img with the id of imgBig. so I tried this:
<script>
jQuery(document).ready(function(){
jQuery( "#overlay #imgBig" ).click(function() {
jQuery("#overlay").remove();
});
return false;
});
</script>
but for some reason it just doesn't work which means it doesn't hide/remove the overlay div!
Could someone please advise on this issue?
Thanks in advance.
The click function doesn't work with dynamically created elements. Also, id's are unique so you should only need to use #imgBig in the selector.
Try this:
jQuery(document).ready(function(){
jQuery( "#imgBig" ).on('click', function() {
jQuery("#overlay").remove();
});
return false;
});
You should use the second part inside the first function, like this (I replaced Jquery with $):
...
var imgs = (this.href);
$('#overlay #imgBig').attr("src", imgs);
$( "#overlay #imgBig" ).click(function() {
$("#overlay").remove();
});
return false;
A JSFiddle example:
JSFiddle
Now i need to remove or hide the overlay div when the user clicks on
the img with the id of imgBig
Try assigning click event to img element having src set to imgs
jQuery(document).ready(function(){
jQuery(".test-popup-link").click(function(e) {
var overlay = jQuery('<div align="center" id="overlay"><img id="imgBig" src="" /></div>');
overlay.appendTo(document.body);
//jQuery('#overlay').load(this.href);
var imgs = (this.href);
jQuery('#overlay #imgBig').attr("src", imgs);
// assign `click` event to `img` element having `src` set to `imgs`
jQuery("img[src=" + imgs + "]").on("click", function() {
// do stuff
// e.g., remove or hide the overlay div
$(this).parent().remove();
});
return false;
});
});
The problem is that the on() or the click() function doesn't work with dynamically generated HTML content. Previously you could use the live() method but currently it's deprecated in jQuery. Fortunately, the on() method accepts a second argument especially for these cases. So you can use:
jQuery( "body" ).on( 'click', '#imgBig', function() {
jQuery("#overlay").remove();
});
Here's a Fiddle: http://jsfiddle.net/y5y1x5vm/
Hope that solves your problem.
I am not really sure if the title points to my question but:
I would like to show two different elements(contents and images) at the same time with one link.. It s kinda content and image slider so if you click link1 attr content1 and image1, if you click on link2 attr content2 and image2 and so on..
That way I can attract boxes but how would I call images too?
$(".box").hide();
$(".box:first").show();
$("a").click(function() {
var activeLink = $(this).attr("href");
$("a").removeClass("active");
$(".box").hide();
$(activeLink).slideDown("normal");
return false;
});
I have come so far..
http://jsfiddle.net/2GR3W/2/
Thnx in advance!
Try:
$(document).ready(function () {
// Text Box
$(".box, .img").hide();
$(".box:first,.img:first").show();
$("a").click(function (e) {
var idx=$(this).index();
e.preventDefault();
var activeLink = $(this).attr("href");
$("a").removeClass("active");
$(".box, .img").hide();
$('.container div').eq(idx).slideDown("normal");
$('.container img').eq(idx).slideDown("normal");
});
});
jsFiddle example
Try refactoring your image ID references to follow a convention named after your link href values.
<img id="box3-img" class="img" src="asd.jpg" width="300" height="200" alt="img3"/>
Then you can treat the 'href' attr value as a mere prefix against the ID for the images:
$(activeLink + "-img").show();
http://jsfiddle.net/2GR3W/5/
My solution for you is:
$(document).ready(function() {
$('.links').on('click','a',function() {
if(!$(this).hasClass('active')){
$('.links a').removeClass('active')
$(this).addClass('active');
$('.container').find('.box, img').hide();
$('.container').find('.box').eq($(this).index()).slideDown('normal');
$('.container').find('img').eq($(this).index()).fadeIn('normal');
}
});
});
$(window).load(function(){
$('.links').find('a:nth-child(1)').trigger('click');
});
Fiddle:
http://jsfiddle.net/2GR3W/7/
With this code you can put infinites <a/>, <div class="box"/> and <img/>, it will always find the .box and the img in the same 'order' and show it
so after some questioning i wrote a jsfiddle page to show you what im tried. When going over the link the div shows up but when the mouse goes over it it fadesout and again fadesin. Isnt posible that when going above the div it just stays there until you move the mouse away?
the example on jsfiddle works when you go above the menubar Crepes..
here´s my jquery code.. the css and html are on jsfiddle
thanks for the help!
http://jsfiddle.net/DFxB7/
<script type="text/javascript">
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").fadeIn();
},
function(){
$("#front").fadeOut();
});
</script>
add the event .stop() like this:
$("#crep, #front").hover(function (e) {
e.preventDefault();
$("#front").stop().fadeIn();
},
function(){
$("#front").stop().fadeOut();
});
DEMO
I believe this may give you the functionality you're after...
var toggle = 0;
$("#crep, #front").hover(function (e) {
if(toggle == 0)
{
toggle = 1;
$("#front").stop().fadeIn();
}else{
toggle = 0;
$("#front").stop().fadeOut();
}
});
I have an image (question mark image) inside a div like so
HTML
<div id="other">
<img id="clickQues" class="quesMark" src="ques" />
</div>
I want this ques mark image to be replaced by two new clickable images (a tick, and a cross) when I click on it. I am using jQuery to achieve this. I am able to replace the images successfully. However, I am unable to click on the new tick, cross icons.
My jQuery
$('#clickQues').click(function(){
$('.quesMark').hide();
$('#other').append("<img src='tick.png' id='tickIcon'>");
$('#other').append("<img src='cross.png' id='crossIcon'>");
});
$('#tickIcon').click(function(){
//hide the other cross icon
//do something
});
$('#crossIcon').click(function(){
//hide the other tick icon
//do something
});
Heres the fiddle
What am I doing wrong?
Since the elements are added dynamically, you need to use event delegation
$('#other').on('click', '#tickIcon', function(){
//hide the other cross icon
//do something
});
$('#other').on('click', '#crossIcon', function(){
//hide the other tick icon
//do something
});
Demo: Fiddle
Try this : Event Delegation
$('body').on('click','#tickIcon',function(){
//hide the other cross icon
//do something
});
$('body').on('click','#crossIcon',function(){
//hide the other tick icon
//do something
});
$('#clickQues').click(function () {
$('.quesMark').hide();
$('#other').append("<img id='tickIcon' src='http://www.pcdr.gr/moodle/theme/themza_moo_05/pix/i/tick_green_big.gif'>");
$('#other').append("<img id='crossIcon' src='http://www.iconshock.com/img_jpg/VECTORNIGHT/general/jpg/16/cross_icon.jpg'>");
});
$('#other').on("click",'#tickIcon',function () {
$('#crossIcon').hide();
});
$('#other').on("click",'#crossIcon',function () {
//hide the other tick icon
//do something
$('#tickIcon').hide();
});
see demo
$('#clickQues').click(function(){
$('.quesMark').hide();
$('#other').append("<img class='right' src='tick.png' id='tickIcon'>");
$('#other').append("<img class='close' src='cross.png' id='crossIcon'>");
});
$('.right').click(function () {
$('.close').hide();
});
$('.close').click(function () {
$('.right').hide();
});
Not tested but i think this will help you certainly regards....:)
This is the Fiddle.
The problem is that, when you click on the button to close the slide out box, there is a glitch. I don't know how to fix it.
If someone could help me out that would be great. thanks!
var mouse_is_inside = false;
$(document).ready(function(){
$('#box').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('#box').slideUp();
});
});
That's the code, if it helps anyone.
Use slideToggle instead:
$(".show").click(function(){
$("#box").slideToggle();
});
Fiddle: http://jsfiddle.net/9spzQ/10/