Add Rollover Effects to Image Galleries - jQuery Cycle Image On Hover

The jQuery Cycle Image On Hover plugin allows you to easily set up image slideshows that are triggered by mouse hover events.

When the user moves their mouse over the target container element, the plugin will automatically rotate through the set of images provided.

It cycles seamlessly through the image set, displaying each one for a time interval that can be configured.

How to use it:

1. Download and load the jquery.cycleImages.js script after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.cycleImages.js"></script>

2. Add a cover image to your gallery as follows:

<div class="hoverimg">
  <div class="cover">
    <img src="1.png">
  </div>
  <div class="gallery" style="display:none">
    <img src="1.png">
    <img src="2.png">
    <img src="3.png">
    <img src="4.png">
    <img src="5.png">
    ...
  </div>
</div>

3. Call the function cycleImages on the top container and the plugin will do the rest.

$('.hoverimg').each(function(){
  $(this).cycleImages({
    cover: $(this).find('.cover'),
    gallery: $(this).find('.gallery'),
  });
});

4. Customize the time interval in milliseconds. Default: 400.

$('.hoverimg').each(function(){
  $(this).cycleImages({
    cover: $(this).find('.cover'),
    gallery: $(this).find('.gallery'),
    interval: 500,
  });
});

---

This awesome jQuery plugin is developed by jeremyblaze. For more Advanced Usages, please check the demo page or visit the official website.