Scroll page back to the top

ssdZoom : Image Zoomer with jQuery

ssdZoom : Image Zoomer with jQuery

Today we will have a look at creating an Image Zoomer with jQuery called ssdZoom. The Image Zoomer allows you to mouse over the image and see the enlarged portion of the image, which reflects the position of your cursor.

JavaScript Tutorial

Sebastian Sulinski on 18th Oct 2011

Download Exercise FilesDemo

01 : Zoomer structure (03:12 min)


02 : New object (06:21 min)


03 : Process image method (03:00 min)


04 : Mouse move event (06:04 min)


05 : Mouse click event (03:38 min)


06 : Mouse out event (03:48 min)


07 : Mouse over event (05:31 min)


08 : Add zoom (02:20 min)


Discussion (4 comments)

  • pavlina

    pavlina on Friday, 28th October 2011

    Thank you for your generosity!
    These tutorials are wonderful tresore. Thank you so much!


  • Ali

    Ali on Saturday, 15th September 2012

    Very nice a example. Thanks for tutorial.


  • Sergio

    Sergio on Wednesday, 6th August 2014

    Hello Sebastian,

    I did upload the finished folder you supplied and the zoom doesn't works. I did change the css and js files for the ones you are using in the sample but it didn't fix the problem. So, I'm not sure if watching the complete tutorial I'll get a working zoomer.

    Any idea?

    Many thanks


  • Sebastian Sulinski

    Sebastian Sulinski : @designtutorials on Tuesday, 16th September 2014

    Hi Sergio,
    Chances are that you are viewing the project from within the directory rather than directly under domain - make sure you remove the first slash '/' from the paths to all css and javascript files.


  • Sergio

    Sergio on Wednesday, 6th August 2014

    Hi again,

    I did remove the "/" in front of the links to the files (in index.html). Now is working like a charm.

    Many Thanks.


Page 1 of 1
  • First
  • Previous
  • 1
  • Next
  • Last
Add a comment
Add Comment