Easy Front-end Framework

Initial pause added for $.easy.rotate() and $.easy.cycle

Now we are able to define initial pause (timeout) for starting rotating child elements within functions $.easy.rotate() and $.easy.cycle()

The value of the parameter called initPause will define how long (in milliseconds) the script will wait before starting to rotate child elements. Default value for this option is zero, that means that both functions will act as they did before this update - they’ll start to rotate child elements instantly. But if you choose to hold off the rotation, now you can! :)

I find this particularly useful when you have several neighboring elements, all of them have rotating content, but you wish to create a rotation “wave” instead of synchronized transitions.

Here’s the sample usage:

$.easy.cycle({ selector: '#intro li:nth-child(1) .image', initPause:0 });
$.easy.cycle({ selector: '#intro li:nth-child(2) .image', initPause:200 });
$.easy.cycle({ selector: '#intro li:nth-child(3) .image', initPause:400 });

Gallery functionality

This functionality was actually intended to be a part of the first release of the Easy front-end framework, but due to a lack of time I decided to publish Easy without it. I added it now, so all of you, dear user can now create galleries.

Gallery functionality is built on top of the $.easy.popup() function. It is actually a way of “connecting” a group of thumbnails into gallery by simply adding one more class name called gallery. If you want to have multiple galleries on one page you need to add additional class name for each group. The value of the class attribute should look something like this class=”popup gallery cars”.

I wrote an article on CSS Globe about how to create a gallery and you can also visit the demo page.

Cycle option added

This is still in it’s experimental, not fully functional phase, but I added a new functionality called cycle. This function is very similar to already existing rotate() function. The syntax for this would be:

$.easy.cycle();

This function is similar to the rotate only in the long(er) run it will allow me to add more transition effects. At the moment it is possible to use this, only fade in effect is active. The effect is different from rotate() in a way that rotate fully fades out the element while cycle overlaps them.

One large difference between $.easy.rotate() and $.easy.cycle() is that cycle function positions child elements absolutely so you need to be extra careful with element’s heights.