I have a great piece of jQuery that swaps an image when the user hovers on an image. Check out the code below to see it.
It uses mouseenter
and mouseleave
.
I would like to modify it so that the image swap triggers when a specific input/label is :checked
.
You can see my demo page here:
http://test.davewhitley.com/not-wp/static_folder/index.php
To give you some background, I have 4 inputs/labels. When one is checked, a group of images will be swapped from black and white to their color version. I have two files for every image (image_s.jpg and image_o.jpg).
I am using the :checked
pseudo class to do some filtering. When an input is checked, some images remain full opacity
and other reduce to opacity:0.1
I want only the images that remain full opacity after checking the input to be color.
So basically I want to say in javascript:
Whenever an input is :checked
within #container
swap _s.jpg
with _o.jpg
.
Any help would be great.
UPDATE 1:
To clarify:
There is no image swap happening in the demo. The opacity
is just changed when an input is checked. In addition to the opacity change, I would like an image swap. All of the images would be black and white by default, and when an input is selected, the selected images would change from black and white to color (by using an image swap).
UPDATE 2: To put it simply, I would like all of the images to be black and white until the user clicks on one of the filter labels (print, web, typefaces, etc.) When a label is clicked, the non-filtered images will lower in opacity and the filtered images that remain full opacity will swap to a color image.
UPDATE 3: I can't seem to get the below answers to work for me. I am willing to abandon the input/:checked/pseudo-class filtering technique if it gets the job done. Also, I working test would help me a lot (JSfiddle).
Here is the image swap javascript:
$('.imgover').each(function() {
var std = $(this).attr("src");
var hover = std.replace("_s", "_o");
$(this).clone().insertAfter(this).attr('src', hover).removeClass('imgover').siblings().css({
position:'absolute'
});
$(this).mouseenter(function() {
$(this).stop().fadeTo(200, 0);
}).mouseleave(function() {
$(this).stop().fadeTo(200, 1);
});
});
I think there's a simpler way to achieve your desired effect without pseudo classes.
You could give each link wrapping an image a class and id, and using CSS declare the bg image for each link. Then tie each input to a link, and using
.hover()
and/or.click()
, alter the CSS and thusly the bg image.Something like:
A couple ways to get fancy/efficient with it:
1) Use image sprites to make sure all images load at the same time, providing a consistent UX to users with varying connections speeds. E.g.:
2) If using sprites with a finite amount of input/image pairs or identically sized images, add some easing animation to your transitions by defining the positions of the black and white and color images within your sprites image. NOTE: this would require some basic CSS positioning, wrapping absolutely positioned links with relatively positioned elements. E.g.:
3) The provided code gives you an opportunity to get away from using inputs. Unless you're gathering data using the inputs, it might benefit you in both JavaScript versatility and SEO to use a
<ul>
, or if you're using HTML5, a<nav>
.Currently it seems you're missing the
imgover
class on your images and theirsrc
is wrong (_e
instead of_s
), so the hover/swap doesn't work at all.Just to get going, I fixed that by executing
in the console first.
Then re-apply the image-swapping code, as modified here:
This appears to work. Note though that for some reason the b/w pictures are scale too big, probably a problem with your CSS. Applying the following fixes that well enough to see the swapping working as intended:
The only change I made to the swapping code was adding the
isActive
function add checking that before performing the swap.isActive
extracts the i image group id from the class of its parent<li>
, and then checks if the corresponding input#select-type-[id]
(or the#select-type-all
-input) is checked.Ooops, I see now that you wanted the swapping to be triggered by the filtering directly. To do that, try this instead:
Not the most effective or elegant solution (binding an
onchange
event for each image), but it gets the job done.