I have those pictures
<img src=img1.jpg class=pic />
<img src=img2.jpg class=pic />
<img src=img3.jpg class=pic />
<img src=img4.jpg class=pic />
<img src=img5.jpg class=pic />
<img src=img6.jpg class=pic />
.ShowBorderRed{border:3px solid red;}
I want to add the class .ShowBorderRed once I click one of them and remove this class once I click another picture and add the class to this new image. JQuery
Use the following:
$(document).ready(function(){
var $img = $('.pic');
$img.click(function(event){
$img.removeClass('ShowBorderRed');
$(this).addClass('ShowBorderRed');
});
});
See the comments inline in the code:
// bind click event on all the images having pic class
$('img.pic').on('click', function() {
$(this).addClass('ShowBorderRed') // Add class to the clicked image
.siblings().removeClass('ShowBorderRed'); // Remove class from other sibling images
});
DEMO
OR
If the images are not siblings:
var $images = $('img.pic');
$images.on('click', function() {
$images.removeClass('ShowBorderRed'); // Remove class from all other images
$(this).addClass('ShowBorderRed'); // Add class to the clicked image
});
DEMO
Use the following code:
$(document).ready(function(){
var $img = $('.pic');
$img.click(function(event){
$img.removeClass('ShowBorderRed');
$(this).addClass('ShowBorderRed');
});
});
refer the below mentioned link.
http://jsfiddle.net/2QyY3/199/
Related
I want to create an event with Javascript onclick that will enable the clicked image and will disable others.
For example, if I have 6 pictures, how can I do the following: I want to click any picture for example picture number 3, then picture number 3 will be enabled and the pictures 1,2,4,5,6 will be disabled.
A few seconds after, I want to click on picture number 1, then it will become active and 2,3,4,5,6 will be disabled.
How can I do this?
You can do this using jQuery Siblings
Here an example:
$(function(){
$("img").click(function(){
$(this).addClass("on").siblings("img").removeClass("on");
});
});
Edit, working example:
$(function(){
var replaceImg = function($img){
var src0= $img.attr("src");
var src1= $img.data("on-src");
$img.attr("src",src1).data("on-src",src0);
};
$("img").click(function(){
$(this).addClass("on");
replaceImg($(this));
$(this).siblings("img").each(
function(){
var $this = $(this);
if($this.hasClass("on")){
$(this).removeClass("on");
replaceImg($(this));
}
}
);
});
});
img{border:solid 3px black;}
img.on{border:solid 3px red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
<img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
<img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
<img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
<img src="https://67.media.tumblr.com/avatar_0c16e55c511b_128.png" data-on-src="http://icons.iconarchive.com/icons/jonathan-rey/simpsons/128/Homer-Simpson-04-Happy-icon.png">
</div>
Edit 2 - For Change the image
I make all elements with an "image" class draggable.
Then I append more "image" elements to the page.
Why aren't the appended elements draggable?
$(function() {
$('.image').draggable(); //Draggable image (Jquery UI)
$('.button').click(function() { //append more image
$('body').append('<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">')
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">
<button class="button">Append image</button>
View on JSFiddle
You need to call .draggable(); on the newly created image on every button click.
$(function(){
$('.image').draggable(); //Draggable image (Jquery UI)
$('.button').click(function(){ //append more image
var img = $('<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">');
img.draggable();
$('body').append(img);
});
}) //End of script
fiddle: https://jsfiddle.net/0jxghvaa/2/
You're instantiating the draggable() plugin on the .image elements at load. Any elements added to the DOM after that will need the plugin instantiating on them once they are created. Try this:
$('.image').draggable();
$('.button').click(function() {
var $img = $('<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">').appendTo('body');
$img.draggable();
});
Newly added elements will not be automatically drag-able (only those elements existing initially).
Inside your function, try re-declaring that the element will be drag-able, AFTER it is created:
$('.button').click(function(){
$('body').append('<img class="image" src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">');
$('.image').draggable();
});
Alright.
What I want to do is create a few buttons up top, which will hide/show elements.
If the user presses "350x150" it will hide all the images except for the "350x150" images.
1). User presses "350x150" 2). All images hide except for the
two "350x150"
I tried using some jQuery to hide images but it did not work. How would I do this?
The images are done like this:
<div class="Collage">
<img class="boom" src="http://placehold.it/1000x150">
<img class="ei" src="http://placehold.it/150x150">
<img class="boom" src="http://placehold.it/200x150">
<img class="ei" src="http://placehold.it/200x350">
<img class="350x150" src="http://placehold.it/350x150">
<img class="350x150" src="http://placehold.it/350x150">
<img class="boom" src="http://placehold.it/500x150">
<img class="ei" src="http://placehold.it/50x200">
<img class="boom" src="http://placehold.it/350x200">
<img class="ei" src="http://placehold.it/600x200">
</div>
You can add to your filter btns class let's say "filter-btn" and then their id's could be the same as the class you want to show, for example id="350x150" or id="boom" or id="ei"... I think you get the point :)
$(".filter-btn").click(function(){
var filterVal = "." + $(this).attr("id");
$(".Collage img").show();
$(".Collage img").not(filterVal).hide();
});
Or you can first hide all and then show those that you need:
$(".filter-btn").click(function(){
var filterVal = "." + $(this).attr("id");
$(".Collage img").hide();
$(".Collage img").filter(filterVal).show();
});
EDIT or better cache your elements:
var $collageImages = $(".Collage").find("img"); // cache your elements!
$("#filter350x150").click(function(){
$collageImages.hide(); // Hide all
$(".350x150").show(); // Show desired ones
});
// other buttons here...
or with a more versatile code:
var $collageImages = $(".Collage").find("img"); // cache your elements!
$("[id^=filter]").click(function(){ // any button which ID starts with "filter"
var class = this.id.split("filter")[1]; // get the filterXYZ suffix
$collageImages.hide(); // Hide all
$collageImages.is("."+ class ).show() // Show desired ones
});
Try to use class name, which starts not with a number. I had a lot of troubles in case of it.
For example <img class="res350x150" src="" />
I have a page with various images tapered throughout.
I would like to use jQuery to find those that use video.jpg and wrap those images in a new <div>:
<img src="/images/thumb1.jpg" alt="no div" />
<img src="/images/video.jpg" alt="wrap me" />
<img src="/images/thumb2.jpg" alt="no div" />
Try the following code:
$("img[src$=video.jpg]").wrap("<div></div>")
I Made this Fiddle for you.
This should work for you.
$(document).ready(function(){
var images = $('[src="/images/video.jpg"]');
images.each(function() {
$(this).wrap('<div class="wrapper"></div>');
})
})
Try this:
$('img[src=*"video.jpg"]').wrap('<div></div>');
This question already has answers here:
Change the image source on rollover using jQuery
(14 answers)
Closed 9 years ago.
Okay, so I have dynamically generated images via PHP, so not necessarily the same images result. And I've spent the last four hours scanning the internet and trying countless things with jQuery and/or CSS, and I've come up with the following that works.
<img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" />
<img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" />
<img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" />
<img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" />
<img style='background:url(images/tile_4.jpg)' src='images/tile_4.jpg' onmouseover="this.src='images/Market.png'" onmouseout="this.src='images/tile_4.jpg'" />
Market.png has a transparent background.
Now, the above works. On mouseover, it displays Market.png with the transparent background part being tile_4.jpg and out mouseout it is tile_4.jpg.
What I want to know: is there ANY way to accomplish the exact same thing as the above with jQuery or CSS? I haven't figured it out, and I've spent hours trying, but I'd rather do something else if at all possible since the above (with massive repetition, the above format is repeated currently around 100 times, but I have plans to expand it to over a 1000 times) will become a bandwidth hog.
You could add a class to each of your <img /> elements, such as 'xyz' (please pick a better name), and then take advantage of the hover() function. Given that your images are dynamic, you could render the image markup with an extra data attribute to serve as the "alternate" or "hover" image source. In the end, you might render something like this:
<img class="xyz" data-alt-src="/images/Market.png" src="/images/tile_4.png" />
<img class="xyz" data-alt-src="/images/Something.png" src="/images/tile_5.png" />
And then to apply the switching functionality for each image, you can write a little function that swaps the image src attribute and the data-alt-src attribute on hover-in/hover-out:
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
And then it's as simple as executing the function directly using a tiny bit of jQuery event binding:
$(function () {
$('img.xyz').hover(sourceSwap, sourceSwap);
});
Here's a working example (version 1):
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function () {
$('img.xyz').hover(sourceSwap, sourceSwap);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img class="xyz" data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
Here is a spin on Andres Separ's example from the comments. With this selector, you don't need to decorate your images with a marker class. It will also pre-load the alternate source image to help eliminate any lag or flicker when hovering:
$(function() {
$('img[data-alt-src]').each(function() {
new Image().src = $(this).data('alt-src');
}).hover(sourceSwap, sourceSwap);
});
And here's the second version:
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
}
$(function() {
$('img[data-alt-src]').each(function() {
new Image().src = $(this).data('alt-src');
}).hover(sourceSwap, sourceSwap);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
<br/>
<img data-alt-src="http://cdn1.iconfinder.com/data/icons/fatcow/32/accept.png" src="http://cdn1.iconfinder.com/data/icons/fatcow/32/cancel.png" />
jQuery
You could use the mouseover and mouseout events :
$("img").on({
"mouseover" : function() {
this.src = 'images/Market.png';
},
"mouseout" : function() {
this.src='images/tile_4.jpg';
}
});
This way you could take out the attributes onmouseout and onmouseover from you HTML and make your code neat.
CSS
However, the easiest way is using CSS:
img {
background-image: url('images/tile_4.jpg');
}
img:hover {
background-image: url('images/Market.png');
}
Sure, with jQuery it is easy.
$('img').hover(function(){
$(this).attr('src','images/Market.png');
},function(){
$(this).attr('src','images/tile_4.jpg');
});