jQuery Plugin For Smooth Rollover Image Effects - imageChanger
File Size: | 464 KB |
---|---|
Views Total: | 4153 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

imageChanger is a jQuery plugin for rollover image effect that changes the image at same place with smooth cross fade animation when mouse over.
Features:
- Smart image preloading.
- Custom cross fade animations.
- Supports touchstart and touchend on mobile devices.
- Supports switch background images.
How to use it:
1. Include the jQuery library and the jQuery imageChanger plugin in the html document.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.imageChanger.min.js"></script>
2. Prepare two images with the same height and width. Add a custom suffix to the 'after' image i.e. demo.png and demo_on.png.
3. Insert the 'before' image in an Html element.
<p class="rollover"><img src="images/demo.png" alt="Demo Image"></p>
4. Call the plugin with default settings.
<script type="text/javascript"> $(function(){ $(".rollover").imageChanger(); }); </script>
5. Available options.
$(function(){ $(".rollover").imageChanger({ // custom suffix suffix: "_on", // change images on mouse hover hover: true, transition: { // fade, slide, wink or false type: "fade", // animation duration time duration: 150, // jQuery easing effect easing: "linear", opacity: 0 } // enable background image support backgroundImage: false, // allowed image types imageType: "jpg|jpeg|gif|png", // Callbacks beforeInit: false, afterInit: false, beforeChange: false, afterChange: false, beforeOnImage: false, afterOnImage: false, beforeOffImage: false, afterOffImage: false }); }); });
Change logs:
2015-09-21
- v2.1.1
2015-09-10
- Fix startOn bugs
2015-07-15
- added more options.
2015-06-15
- v2.0.5
2015-01-05
- major update.
This awesome jQuery plugin is developed by tsuyoshiwada. For more Advanced Usages, please check the demo page or visit the official website.