https://github.com/ixkaito/multirollover

jQuery image rollover plugin
https://github.com/ixkaito/multirollover

Last synced: 26 days ago
JSON representation

jQuery image rollover plugin

• Host: GitHub
• URL: https://github.com/ixkaito/multirollover
• Owner: ixkaito
• Created: 2013-09-14T10:15:51.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2014-03-07T12:14:23.000Z (over 10 years ago)
• Last Synced: 2024-10-05T17:23:36.617Z (about 2 months ago)
• Language: JavaScript
• Size: 219 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
jquery.multirollover

====================

jquery.multirollover is a jQuery plugin that offers a way to rollover multiple images simultaneously.

Requires jQuery v1.7 or later.

Dual licensed under the MIT and GPL licenses:

http://www.opensource.org/licenses/mit-license.php

http://www.gnu.org/licenses/gpl.html

Plugin page:

https://github.com/ixkaito/multirollover

Download URL:

https://github.com/ixkaito/multirollover/archive/master.zip

Copyright (c) 2013 KITE

How to use

----------

To get started, download the plugin, unzip it and copy files to your website/application directory.

Load files in your HTML document. Make sure you also add the jQuery library.

Example:

	

	

Create your HTML like this:

	

or multiple images in a single element to be hovered:

	


Add the rollover image with the suffix into the same directory as the original image.

The rollover image should ideally be the same size as the original one.

Example:

	sample-image-1-on.jpg

	sample-image-3-on.jpg

If there's no rollover image, in this case: sample-image-2.jpg, the original image will not change.

Initialise the script like this:

	

		$(document).ready(function() {

			$('.hover').multirollover();

		});

	

May also be passed an optional options object which will extend the default values. Example:

	

		$(document).ready(function() {

			$('.hover').multirollover({

				suffix		: '-hover',

				duration	: 500

			});

		});

	

If using transparent PNG, enable the crossfade option.

	

		$(document).ready(function() {

			$('.hover').multirollover({

				crossfade	: true

			});

		});

	

Default values:

	suffix		: '-on',

	duration	: 100,

	crossfade	: false

Bug tracker

-----------

Have a bug? Please create an issue on GitHub at https://github.com/ixkaito/multirollover/issues