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