easyRetina jQuery

easyRetina jQuery

Released 6 years ago , Last update 5 years ago

This components adds a fancy retina-like zoom-effect onto your scaled images.

Just with a few lines of code you can add a magnifier effect to your scaled images. In most cases just ONE line will do the work!


  • just one line of code needed (at least)
  • very simple markup
  • customizable style
  • customizable behaviour when entering/leaving the retina image


The install is really simple! Download and unzip the demo and have a look at the demo.html for some examples. Their is only one important file you need to insert into your project to start with easyRetina. No extra CSS needed!!! The only thing easyRetina requires is jQuery - and of course your images to add the magnifiers :)


Add your images a CSS-class called "retina-able" and create the construct-call onto the selector:

jQuery('.retina-able').easyRetina({ });

A complex example you find here:

    style : {
        border : '3px solid #000',
        borderRadius : '300px',
        height : '300px',
        width : '300px',
        position : 'absolute',
        cursor : 'none'
    overflow : 'hidden',
    transitionSpeed : 2000,
    beforeEnter : function(obj) {
        // do something
    afterEnter : function(obj) {
        // do something

A custom mouseover image per easyRetina can be defined by adding a data-dash attribute named data-retina with the image name.

<img class="retina-able" data-retina="./mouse-over-image.jpg" src="./preview-image.jpg" style="width:500px;" />

For more options and the events which can be triggered have a look at the Live-Demo which you find by clicking the "View Demo" button on the right-hand side at the top of this page.

  • 5 1
  • 4 0
  • 3 0
  • 2 0
  • 1 0
1 Reviews Read Reviews


14 day 14-day money-back guarantee


Non-commercial License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Non-commercial use


Commercial License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use

Need custom services for this product? Get a quote
3 licenses, starting from From » FREE View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.

or Get a quote

for customization or integration services

Or enter your name and Email
  • L Luca 5 years ago
    Is it possible to use 2 different images, one small to show and the other one larger to show in the magnifier? Thank you.
    • DK Denis Krüger Publisher 5 years ago
      Hey Luca, yes this is possible. I already realized a project with that issue. I will have a look at it and reply to your question in some minutes.
    • DK Denis Krüger Publisher 5 years ago
      Ok - I've thought that I've done this in one of my projects but it seems that I had the idea of this some times ago. I will make a little update of this component this evening with the wanted feature ;)
    • L Luca 5 years ago
      Great, thank you so much!
    • DK Denis Krüger Publisher 5 years ago
      Hey Luca, I've updated the component ... check it out ;) By defining a data-dash "data-retina" to the image-tag you can define the image of the mouseover effect. But keep in mind that the mouseover image should have the same ratio/dimensions as the preview image. Hope to helped you - might it be possible to show the final implementation of it in your project?
    • L Luca 5 years ago
      Thank you so much Denis. i have to say that your code was so well written, I decided to give it a try and it worked! Now I will mix the two things, but there is something I must leave because your retina will work in a gallery that has some weird controls and behaviours. Anyway I must say that I have been impressed by your talent and your kindness. I will send the link to my new site as soon as I will publish it. Luca
  • VS Vassilios Samaras 6 years ago
    Nice feature