Simple jQuery plug-in that the switching of the image with the animation.
JavaScript HTML CSS CoffeeScript
Latest commit baf4a29 Sep 21, 2015 @tsuyoshiwada Update travis badge
Permalink
Failed to load latest commit information.
dist Update 2.1.1 Sep 21, 2015
gh-pages Update 2.1.1 Sep 21, 2015
src Update 2.1.1 Sep 21, 2015
test [update] setting of transition options. Jul 15, 2015
.gitignore Update keywords Sep 21, 2015
.jshintrc first commit Jan 3, 2015
.travis.yml change repository name Apr 7, 2015
LICENSE -- Apr 5, 2015
README.md Update travis badge Sep 21, 2015
bower.json Update 2.1.1 Sep 21, 2015
gulpfile.coffee Fix startOn bugs Sep 9, 2015
package.json Update 2.1.1 Sep 21, 2015

README.md

jquery-image-changer

Travis branch npm version Bower License

jquery-image-changer

Simple jQuery plug-in that the switching of the image with the animation.

Demo

see jquery-image-changer demo

Features

  • Switch the image of on and off in the hover events
    (You can be disabled in the options)
  • Can change the suffix
  • Support for some of the transition
  • Support for touch devices
  • Extension of transition
  • Support for background-image switching
  • Disabled in the 404 error
  • Support callback and custom events
  • Support enable and disable methods
  • Support destroy method
  • Other it will provide some utility API.

Install

npm

$ npm install jquery-image-changer

Bower

$ bower install jquery-image-changer

Usage

Load jQuery and jquery.image-changer.js

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.image-changer.min.js"></script>

Set up HTML

<a class="rollover" href="http://example.com" ><img src="path/to/image.jpg" alt="image"></a>

Call the imageChanger()

$(document).ready(function(){
    $(".rollover").imageChanger();
});

Options

Defaults

$(selector).imageChanger({
    suffix         : "_on", // img.png => img_on.png
    hover          : true,
    transition     : {
        type: "fade",
        duration: 150,
        easing: "linear",
        opacity: 0
    },
    backgroundImage: false,
    imageTypes     : "jpg|jpeg|gif|png",

    // Callbacks
    beforeInit     : false,
    afterInit      : false,
    beforeChange   : false,
    afterChange    : false,
    beforeOnImage  : false,
    afterOnImage   : false,
    beforeOffImage : false,
    afterOffImage  : false
});

suffix

Suffix of the active image.
Default: "_on"
Type: string

hover

Switch the image hover events.
Touch events will be used in the case of touch devices.
Default: true
Type: boolean

transition

Specifies the transition.
Default: fade
Type: object

fade transition

// Simple
$(selector).imageChanger(
    transition: "fade"
);

// More options
$(selector).imageChanger({
    transition: {
        type    : "fade",
        duration: 150,
        easing  : "linear",
        opacity : 0
    }
});

none transition

not animations:

$(selector).imageChanger({
    transition: false //false | "none" | "default"
});

wink transition

wink:

// Simple
$(selector).imageChanger(
    transition: "wink"
);

// More options
$(selector).imageChanger({
    transition: {
        type    : "wink",
        duration: 150,
        easing  : "swing",
        opacity : 0.4
    }
});

slide:

slide transition

// Simple
$(selector).imageChanger(
    transition: "slide"
);

// More options
$(selector).imageChanger({
    transition: {
        type     : "slide",
        duration : 150,
        easing   : "swing",
        direction: "top", // "top" | "bottom" | "left" | "right"
        display  : "inline-block"
    }
});

backgroundImage

switching of the background image.
Default: false
Type: boolean

imageTypes

Specifies the extension of the corresponding image.
Default: "jpg|jpeg|gif|png"
Type: string | array

Data attributes

You can specify the options for each element after the data-ic.

Example

HTML

<a class="rollover" href="http://example.com" data-ic-suffix="_active" data-ic-transition='{"type":"wink"}'><img src="path/to/image.jpg" alt="image"></a>

Custom Events

You will receive an event using the jQuery#on().

var $rollover = $(selector);

$rollover.on("ic.****", function(e, ic){
    // do something...
});
  • "ic.beforeInit"
  • "ic.afterInit"
  • "ic.beforeChange"
  • "ic.afterChange"
  • "ic.beforeOnImage"
  • "ic.afterOnImage"
  • "ic.beforeOffImage"
  • "ic.afterOffImage"

Data API

To use ImageChanger $.fn.data use delegate function.

var ic = $(selector).imageChanger().data("imageChanger");

ic.toggle();   //Toggle the image
ic.onImage();  //To active image
ic.offImage(); //To default image
ic.disable();  //Temporarily disable this plugin
ic.enable();   //To enable
ic.destroy();  //Destroy this plugin

Global API

Will provide an API that does not depend on the elements. (version added: 2.0.6)

/**
 * $.imageChanger("addSuffix", target, [suffix]);
 * - target: string | jQueryObject
 * - suffix: string
 */
$.imageChanger("addSuffix", "path/img.jpg");                    // -> "path/img_on.jpg"
$.imageChanger("addSuffix", "path/img.jpg", "_active");         // -> "path/img_active.jpg"
$.imageChanger("addSuffix", "path/img_on.jpg");                 // -> "path/img_on.jpg"
$.imageChanger("addSuffix", $(selector));                       // -> will add the "_on" to all of the images.
$.imageChanger("addSuffix", $(selector), "_active");            // -> will add the "_active" to all of the images.

/**
 * $.imageChanger("removeSuffix", target, [suffix]);
 * - target: string | jQueryObject
 * - suffix: string
 */
$.imageChanger("removeSuffix", "path/img_on.jpg");                // -> "path/img.jpg"
$.imageChanger("removeSuffix", "path/img.jpg");                   // -> "path/img.jpg"
$.imageChanger("removeSuffix", "path/img_active.jpg", "_active"); // -> "path/img.jpg"
$.imageChanger("removeSuffix", $(selector));                      // -> will remove the "_on" of all of the images.
$.imageChanger("removeSuffix", $(selector), "_active");           // -> will remove the "_active" of all of the images.

/**
 * $.imageChanger("toggleSuffix", target, [suffix]);
 * - target: string | jQueryObject
 * - suffix: string
 */
$.imageChanger("toggleSuffix", "path/img.jpg");                   // -> "path/img_on.jpg"
$.imageChanger("toggleSuffix", "path/img_on.jpg");                // -> "path/img.jpg"
$.imageChanger("toggleSuffix", "path/img.jpg", "_active");        // -> "path/img_active.jpg"
$.imageChanger("toggleSuffix", "path/img_active.jpg", "_active"); // -> "path/img.jpg"
$.imageChanger("toggleSuffix", $(selector));                      // -> will toggle the "_on" of all of the images.
$.imageChanger("toggleSuffix", $(selector), "_active");           // -> will toggle the "_active" of all of the images.

Custom Transitions

  • initialize() - Implement the initialization of style and DOM structure
  • on() - You implement the switch to the active image
  • off() - You implement the switch to the default image
  • destroy() - Implementation for returning to the default. (Called when ImageChanger#destroy())

Please execute the callback function that comes in when you are finished animation argument.

Example type:"custom"

$(selector).imageChanger({
    transition: {
        type: "custom",

        // default parametors
        defaults: {
            easing: "swing",
            duration: 150
        },

        initialize: function(params){
            this.$elem.css("overflow", "hidden");
            this.$on.css({
                "top": -20,
                "opacity": 0
            });
        },

        on: function(params, done){
            this.$off.stop().animate({
                "top": -20,
                "opacity": 0
            }, params.duration, params.easing);

            this.$on.stop().animate({
                "top": 0,
                "opacity": 1
            }, params.duration, params.easing, done);
        },

        off: function(params, done){
            this.$off.stop().animate({
                "top": 0,
                "opacity": 1
            }, params.duration, params.easing);

            this.$on.stop().animate({
                "top": -20,
                "opacity": 0
            }, params.duration, params.easing, done);
        }
    }
});

In addition, it can be registered as a builtin transition.
To do the registration you can use the $.imageChanger("registerTransition", ...).

Example $.imageChanger("registerTransition", ...)

// Register Custom Transition.
$.imageChanger("registerTransition", {
    defaults: {
        // default parametors...
    },

    initialize: function(params){
    },

    on: function(params, done){
        done.call();
    },

    off: function(params, done){
        done.call();
    },

    destroy: function(params){
    }
});

// Use Custom Transition.
$(selector).imageChanger({
    transition: {
        type: "example"
    }
});

Notes: $.imageChanger.registerTransition() It is deprecated. at version 2.0.7.

Requirements

jQuery 1.7.2 +

Browser Support

  • IE7 +
  • Firefox
  • Chrome
  • Safari
  • iOS5 +
  • Android2.3 +

Tips

Destroy on after initialize.

It useful tips for navigation operation.

$(selector).imageChanger({
    afterInit: function(){
        if( this.status.startOn ){
            this.destroy();
        }
    }
});

Notes

If lower than Firefox version 35.0

Bug occurs during the animation.
It can be solved by adding the following CSS.

.ic-on,
.ic-off {
  box-shadow:0 0 1px rgba(255, 255, 255, .01);
  background-color:rgba(255, 255, 255, 1);
}

Change Log

v2.1.0 (Sep 10, 2015)

Add startOn tips. and startOn bugs.

v2.0.7 (Jul 15, 2015)

Add 3 Global API. (addSuffix, removeSuffix, toggleSuffix)

v2.0.5 (Jun 15, 2015)

Fix IE7 bug <a> click does not respond. And add animation of PNG image to demo page.

v2.0.3 (Apr 5, 2015)

Support bower and npm install. And some bug fixes.

v2.0.2 (Jan 31, 2015)

Fix IE7 slide transition bugs.

v2.0.1 (Jan 27, 2015)

Support the option specified in the custom data attributes.

v2.0.0 (Jan 4, 2015)

First release.

Author

tsuyoshi wada