JImageRotator

2016-02-18 -> 2021-03-05

simple image rotator for jquery.

JImageRotator is part of the universe framework.

Install

Using the planet installer via light-cli

lt install Ling.JImageRotator

Using the uni tool

uni import Ling/JImageRotator

Features

lightweight, less than 100 lines of code
decoupled css and js (you can use your own css transitions)
simple to use

How to?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="/libs/jimagerotator/js/jimagerotator.js"></script>
    <title>Html page</title>
    
    <style>

        .image_rotator {
            position: relative;
            background-color: black;
            width: 400px;
            height: 200px;
        }

        .image_rotator  img {
            position: absolute;
            top: 0;
            z-index: 1;
            opacity: 0;
            transition: all 0.750s ease;
        }

        .image_rotator  .active {
            z-index: 2;
            opacity: 1;
            transition: all 0.4s ease;
        }
    </style>
</head>

<body>


<div class="image_rotator">
    <img src="http://lorempixel.com/400/200/abstract">
    <img src="http://lorempixel.com/400/200/animals">
    <img src="http://lorempixel.com/400/200/business">
</div>


<script>
    (function ($) {
        $(document).ready(function () {
            $('.image_rotator').imageRotator({
                timer: 2200
            });
        });
    })(jQuery);
</script>

</body>
</html>

Options

{
    /**
     * @param timer - int, the time to wait before fire the next rotation
     */
    timer: '2200',
    /**
     * @param activeClass - string, the css class of the current active element.
     */
    activeClass: 'active'
}

Methods

freeze: to pause the rotation of items
unfreeze: to resume the rotation of items

Conception notes

The image rotator plugin counts how many elements (images) you have inside the given container (.image_rotator in the example).

If there is more than one element, the rotation occurs.

A rotation switches the active class from one element to another, and that's it, that's all the plugin does: switching the active state.

Then with help of css, you build on that fact to achieve the desired effect.

History Log

1.1.4 -- 2021-03-05
- update README.md, add install alternative
1.1.3 -- 2020-12-08
- Fix lpi-deps not using natsort.
1.1.2 -- 2020-12-04
- Add lpi-deps.byml file
1.1.1 -- 2016-02-20
- fix unfreeze not working
- add double checking on an if block to avoid warning
1.1.0 -- 2016-02-19
- add freeze/unfreeze methods
1.0.0 -- 2016-02-18
- initial commit

lingtalfi/jImageRotator