jQuery script for image overlays
- Started
- Last post
- 15 Responses
- kalkal
Does anyone know of a jQuery script which will automatically add image overlays when you mouseover images in a predefined div?
- orrinward0
Like that?
- kalkal0
Yes sort of, I suppose opacity would do the job except the image would be say 75% and 100% when hovering.
With the added ability to append all images within a set div, done automatically by the script rather than having to be manually entered.
- orrinward0
http://jsfiddle.net/87yZa/4/ <- shown with multiples.
There is probably a better way, as if you want you can spaz this out by hovering on and off very quickly. There is no stop(); call or conditional if it is already animating.
- orrinward0
For opacity, do a fadeTo() with an on and off state instead of a fadeToggle.
and for the image added dynamically, you'll want to do a .children('.content').append() thing.
- kalkal0
Seems almost there but still not quite. I have no idea how to put anything together in jQuery but how I'd have it work would be like:
jQueryfader.js
1) find any div with images in it and with the id="herebesomefaderimages"
2) append a "fader" class to images
3) if mouseover a fader class, initiate fademypage.htm
<div id=herebesomefaderimages>
<img src="http://bla.com/image1.jpg />
<img src="http://bla.com/image2.jpg />
<img src="http://bla.com/image3.jpg />
</div>Which would be change by the script into:
<div id=herebesomefaderimages>
<img src="http://bla.com/image1.jpg class="fader" />
<img src="http://bla.com/image2.jpg class="fader" />
<img src="http://bla.com/image3.jpg class="fader" />
</div>And it'd be done in this way because it's dynamic content and I'm lazy so I don't want to change the WordPress template which I'm using (which is already super complicated for a wordpress template to be honest)
- As you can see with all the missing "" I have here, I'm really lame at this sort of thing.kalkal
- orrinward0
$('#herebesomefaderimages').chil...
$('.fader').hover(
function(){
$(this).fadeTo("0.7",500)
},
function(){
$(this).fadeTo("1",500)
}
);
- kalkal0
Some of the script has been truncated :/
- orrinward0
There ya go.
- orrinward0
What is the purpose of the fader class by the way? Is there some CSS associated, or is it just for targeting purposes?
If it's the latter, it's unnecessary, as you can simply target all instances of img in the parent ID.
- orrinward0
that one is seemingly neater. I added a stop() before the animation so that it doesn't do spazzy flashy stuff if you constantly mousover and mouseout.
- orrinward0
Version without the fader class, but still with CSS effects. This way the images will have the class applied before jQuery loads.
This also degrades slightly better.
- kalkal0
Thanks and lol at you using my crap example so literally.
There's no purpose for the fader class other than the fact I don't have to manually edit the wordpress theme I'm using to add the class. This way it just gets done to the div which I add via the visual editor.
The theme I'm using has a shortcode to create a gallery very easily but it doesn't have any sort of interactivity.
It looks like it would have been surprisingly easy to put together, I really should learn a bit of jQuery.
- orrinward0
Haha, yeah jQuery is pretty easy. I'm still a novice too but I can do quite a lot with it, even with only a little bit of knowledge.
- kalkal0
Oh, I see, I really don't need the fader class at all.
Well, that's even better! I can just use a class instead of an ID and use this in multiple divs on the same page too. Perfect!