jQuery Plugin For Smooth Rollover Image Effects - imageChanger

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.