magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] iRetina


This extension allows you to show standard images with the retina effect like in iPhones.


HTML 4.01 Transitional
W3C compliant


DEMO


* Just a brief about some of the changes that were made lately...

* New in version 1.2

- Optional fade-out effect of the element when the magnifying glass is activated.
- Custom color and intensity for the fade-out effect.

* New in version 1.1.1

- Fixed a Firefox 52+ "onmouseover" unstable behavior.
- Fixed an unstable behavior using images within table-cells with borders.

* New in version 1.1

- Removed deprecated properties and simplified organization.
- New 'auto' and 'onclick' open glass modes.
- Improved behavior on touch devices.
- Improved support for [rz] Preloaded Links.
- Fixed an introduced events collision on Chrome and Safari on quick movements.
- Fixed an onfocus distortion when the target image has a link.
- Fixed a misplacing on scrolled touch screens.

* New in version 1.0.2

- New core to workaround Chrome bugs handling the mouse and elements relocation.
- Touch support.
- Auto fade-in (no need to setup any extra value).

Notes about touch support:

- First tap on the image: the magnifying glass will be opened.
- Further taps on the image: the magnifying glass will be relocated.
- Tap on the glass: if a link or an event exists, it is followed.
- Tap anywhere else: the magnifying glass will be closed.

* New in version 1.0.1:

- Added RWD support.
- Fixed a sporadic issue in Chrome when handling some hidden images.
- Added customizable fade effect for a smoother behavior.
- Unobtrusive internal events handling that allows the image to have its own events.



How to use?

1. Drag and drop all the images you want.
2. Resize them (please note: reduce them proportionally and don't resample!).
3. Add the [rz] iRetina extension.
4. Enter the images IDs (comma-separated) you want to add the effect.
5. Set-up just a few parameters or leave them all as by default.
6. Preview or publish (and move the mouse over the image).

Enjoy!
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with