14Nov2009
jQuery image slide on hover effect plugin
A while back I wrote about using jQuery to create an image sliding effect. It’s received quite a lot of traffic since then, so I decided to create a simple plugin.
Update – 11/28
Plugin has been refactored, includes detailed documentation, and is compatible with jQuery Easing Plugin. ImgSlider Plugin is available at CodeCanyon.
Please see jQuery image slide on hover effect for an in depth explanation of how it works.
The function can be called with the following code:
JavaScript
$(function(){
$('#demo1').imgslide();
});
Several options may also be passed into the plugin.
JavaScript
$('#demo1').imgslide({
top: '0px',
right: '0px',
bottom: '0px',
left: '0px',
duration: 200
});
HTML
And, the HTML used. Be sure to see the demo below for additional examples.
<img id="demo1" src="http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-plugin/image-1.jpg" alt="" />
Let me know if you find any bugs or better ways to approach this.
How to stop the changing of the pictures when i hover on a certain picture? Thank you
does this work on div?
Not very newbie friendly at all, couldn’t make it work. My images have different size, i don’t know what to put in my styles.css
Awesome plugin and very easy to implement. As far as it being not newbie friendly I would say people need to pay attention and read the article link attached to this plugin where he explains how it all works. One question though, can you integrate easing into this plugin with the easing plugin? I mean can I tack that on as one of the options without problem? or is that incompatible? If so, how can I do that myself? Thanks for spending the time making this for free man.
How do you reverse the slide, so it slides in from the left instead of right?
thank you very much. it’s a nice content. I keep to use skill.
How do I add easing to this?
I think the plugin that’s listed in the update above includes easing integration.
http://codecanyon.net/item/imgslider/128727?ref=dagrander
How would I make it slide more for bigger pictures?
Increase the value to slide by:
$(‘#demo1′).imgslide({
top: ‘-400px’
});
Just be sure the value, “400px” in this case, is half the size of the actual image. For example, this image would have a height of 800px.
how to change directions…??
Examples for different directions are included in the demo.
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-plugin/index.html
Awesome, just what I was looking for!
By the way, why does sliding from right and bottom not work..? Only left and top do, or am I missing something?
Cheers!