DOMmy.Cycle.js Back to Riccardo Degni

DOMmy.Cycle.js - A lightweight, multi-effect image gallery based on DOMmy.js

Version 1.0 is OUT!

What is DOMmy.Cycle.js? top

DOMmy.Cycle.js is a lightweight, multi-effect image gallery based on DOMmy.js. Setting up things with the power of Vanilla Javascript and the aim of DOMmy.js is incredibly simple.
With DOMmy.Cycle.js you can set up image galleries with a multitude of high-quality animations based on CSS3/DOMmy.js engine.

What are the features of DOMmy.Cycle.js?

  • does not require any Javascript framework. It is entirely based on Vanilla Javascript enhancement DOMmy.js
  • allows to set up a professional image gallery based on a cyclic animations in a few minutes
  • offers different kind of animations (see the demo below) that you can customize
  • written with some of the new amazing Javascript features, like 'classes'
  • you can add your custom animations in no time
DOMmy.Cycle.js is designed to be modern and future-oriented, so very old browser versions are NOT supported.

Using DOMmy.Cycle.js top

Using DOMmy.Cycle.js is really very simple. Just set up a simple HTML markup, choose the effect you desire, and it's done. You can add as many images as you want. The following are some examples:

Setting up HTML markup:
<div id="el">
 <img src="images/1.jpg" alt="img 1">
 <img src="images/2.jpg" alt="img 2">
 <img src="images/3.jpg" alt="img 3">
</div>
Cycle Slide Linear:
$('el').cycleSlideLinear('toLeft');
$('el').cycleSlideLinear('toRight');
$('el').cycleSlideLinear('toUp');
$('el').cycleSlideLinear('toDown');
Cycle Slide Diangonal:
$('el').cycleSlideDiagonal('toUpLeft');
$('el').cycleSlideDiagonal('toUpRight');
$('el').cycleSlideDiagonal('toDownLeft');
$('el').cycleSlideDiagonal('toDownRight');
Cycle Shrink:
$('el').cycleShrink('toLeft');
$('el').cycleShrink('toRight');
$('el').cycleShrink('toUp');
$('el').cycleShrink('toDown');

$('el').cycleShrink('x');
$('el').cycleShrink('y');
Cycle Fade, Cycle Zoom:
$('el').cycleFade();

$('el').cycleZoom('in');
$('el').cycleZoom('out');
Cycle Shuffle
$('el').cycleShuffle([-100,-100]);
$('el').cycleShuffle([100,100]);
$('el').cycleShuffle([-300,-20]);
$('el').cycleShuffle([-300,200]);
Cycle Shift
$('el').cycleShift('skew');
$('el').cycleShift('rotate');
$('el').cycleShift('shrink');
$('el').cycleShift('flip');

Installation top

Installing DOMmy.Cycle.js is very simple, just add DOMmy.js and the Cycle plug-in and here you go:
<script src="http://www.riccardodegni.com/projects/dommy/dommy-min.js"></script>
<script src="http://www.riccardodegni.com/projects/dommy/dommy-cycle-min.js"></script>
<script>
    // do some DOMmy stuff
    $$$(function() {
        // ...
    });
</script>

A simple demo top

Click here to see the power of DOMmy.Cycle.js.

Download DOMmy.Cycle.js top

You can download the uncompressed version of DOMmy.Cycle.js and the minified version.

Author and License top

DOMmy.Cycle.js is developed by Riccardo Degni and it is released under the MIT License.
If you need support, have any question or want to get in touch with me, feel free to send me a mail.