[rz] Rollover Layers *** UPD 2016-Oct-06 ***

[[RZ]]

[rz] Rollover Layers v1.2.1

The lightweight solution to rollover layers.
Similar to the rollover extension, this one allows you to rollover almost any object!
It can be fully handled only by the keyboard (tab keys and so on) and solves the lack of the mouseover event in touch devices.
Sample project file included.


HTML 4.01 Transitional
W3C compliant


DEMO


Some features:

Move your mouse over the slideshow panels to see it in action or press the tab key until objects get the focus.
Fully keyboard support with smart mouse/keyboard detection and handling.
Touch devices are supported to workaround the lack of mouseover event.
The "over" layer can even have advanced scripting such as slideshows or images with effects.
Multi-instance.
Multi-objects-couples of ids for even easier setup.
Automated startup.


* New in version 1.2.1

- Improved core.
- Added optional blur to the effects.

Please note: Some browsers may not support or may partially support the above zoom/rotate/blur features.

* New in version 1.2.0.4

- Workaround for iOS 9 refresh issues.

* New in version 1.2.0.3

- Improved startup and compatibility with other [rz] extensions.
- Improved backward focus control compatibility.
- Fixed a timing error that prevents "over" layers to be shown correctly on some events.

* New in version 1.2.0.2

- Zoom: Selectively zoom-in for the base-layer contents.
- Rotate: Selectively rotate for the base-layer contents.
- Time in for the zoom/rotate effect.
- Time out for the zoom/rotate effect.

Please note: Some browsers may not support or may partially support the above mentioned features.

* New in version 1.2.0.1

- Improved iPad time/cycle handler.
- Smoother overall performance.

* New in version 1.2

- Fade-in delay factor.
- Fade-out delay factor.
- Opacity level.

(no jQuery required)

* New in version 1.1

- Added support for RWD.

* New in version 1.0.2

- Workaround for smoother performance in IE and solved an unstable mouse-click behavior under certain conditions.
- Workaround for better performance in tablets and other touch devices.
- Improved startup and keyboard handled navigability.
- Optimized the chained objects process.

* New in version 1.0.1

- Now the z-index is not internally swapped for the base and over layers (gives more design freedom to the developer).
- Improved tab/keyboard handling when the layers have links or not.
- Automatically synchronized for multi-instance and multi-access (simultaneous mouse and keyboard handling! Please note: in that case, the layers must be grouped/chained; see the notes at the bottom of this text).
- Improved functionality/performance on tablets.
- More autoresize options.
- More autoalign options.
- Enable/disable images dragging.
- Enable/disable text selection.


How to use?

1. build your 'base' layer as you usually do; it can have an images, texts, slideshows and so on...
2. build your 'over' layer as you usually do; it can also have links!
3. drag and drop the this extension.
4. setup the required parameters:
a) Layer1: is the 'base' layer.
b) Layer2: is the 'over' layer that will be shown over the 'base' layer.
5. setup the optional parameters if you want to customize some behavior details...

Enjoy!


Notes:

You can setup chained layers entering their ids separated by commas; in that case, you must enter the same number of 'base' and 'over' layers ids.

Layer1: MyBaseLayer
Layer2: MyOverLayer
or
Layer1: MyFirstBaseLayer, MySecondBaseLayer, MyThirdBaseLayer
Layer2: MyFirstOverLayer, MySecondOverLayer, MyThirdOverLayer

[[RZ]]

hope you meant you love the extension...

[maxime]

i try to understand..

should we place the layer number 2 over the layer number 1 or it dosent matter.

[[RZ]]

it depends on what you want to accomplish...

[tommy888]

Great work RZ.

[[RZ]]

@tommy
thank you!
btw, an update is available...

[[RZ]]

New in version 1.0.1.0

- Now the Z-index is not internally swapped for the base and over layers (gives more design freedom to the developer).
- Improved tab/keyboard handling when the layers have links or not.
- Automatically synchronized for multi-instance and multi-access (simultaneous mouse and keyboard handling! Please note: in that case, the layers must be grouped/chained; see the notes at the bottom of this text).
- Improved functionality/performance on tablets.
- More autoresize options.
- More autoalign options.
- Enable/disable images dragging.
- Enable/disable text selection.

[[RZ]]

New in version 1.0.2.0

- Workaround for smoother performance in IE and solved an unstable mouse-click behavior under certain conditions.
- Workaround for better performance in tablets and other touch devices.
- Improved startup and keyboard handled navigability.
- Optimized the chained objects process.

[fotogian]

is there someone that uses this extension?

I would like to create an effect like the one on the right in the demo http://www.zerajia.com/demo/rollover/main.html but I don't understand how to do it. It would be useful a little manual

[[RZ]]

what do you want?
the rollover itself or the images slider?
please refer to the 1st post to see how to you use (the rollover)

[fotogian]

it seems to me that in the right example there are both: the images are "moving" and there is a slide. My problem is how to obtain this effect...

[[RZ]]

the images sliding extension in the online sample is not related with the rollover layers extension itself.
the images sliding extension is not free.
the rollover extension has two versions, free and paid.
please contact here: www.magnawebstudio.com/developer for more details.
best regards

[[RZ]]

UPGRADE AVAILABLE

New in version 1.1.0.0

- Added support for RWD.

[[RZ]]

New in version 1.2

- Fade-in delay factor.
- Fade-out delay factor.
- Opacity level.

(no jQuery required)

[zinc]

RZ You NEVER let me down! Thank you!

[[RZ]]

[[RZ]]

New in version 1.2.0.1

- Improved iPad time/cycle handler.
- Smoother overall performance.

[[RZ]]

* New in version 1.2.0.2:

- Zoom: Selectively zoom-in for the base-layer contents.
- Rotate: Selectively rotate for the base-layer contents.
- Time in for the zoom/rotate effect.
- Time out for the zoom/rotate effect.

Please note: Some browsers may not support or may partially support these features.

[zinc]

This is a fantastic gem with a very powerful hidden gem that I was introduced by RZ. Highly recommend!!!! Well done RZ always manage to surprise me!!!!

[[RZ]]

lol, this is a funny feedback! thank you for your words

[[RZ]]

* New in version 1.2.0.3:

- Improved startup and compatibility with other [rz] extensions.
- Improved backward focus control compatibility.
- Fixed a timing error that prevents "over" layers to be shown correctly on some events.

[[RZ]]

* New in version 1.2.0.4:

- Workaround for iOS 9 refresh issues.

[[RZ]]

* New in version 1.2.1

- Improved core.
- Added optional blur to the effects.

Please note: Some browsers may not support or may partially support the above zoom/rotate/blur features.