LogoLogo
  • Home
  • Projects
  • About
  • Contact

Magnify – a jQuery Plugin

Devon O. · December 11, 2011 · Actionscript · 5 comments
9

Let me begin by saying right up front, I have not given up on Flash. Despite Adobe’s recent PR debacle which I’m sure if you’re reading this, you’re familiar with, I still love Flash and it’s still my bread and butter. When my wife wanted to put together a portfolio site to show off her fantastic photography and collage work, though, I figured it was as good a time as any to pick up some new skills. So I delved into the land of jQuery and HTML. Sort of 2001: A Javascript Odyssey.

While building the site (which still isn’t complete, but it’s coming along) I discovered I needed some sort of tool to magnify images. Now there are a lot of good jQuery zooming plugins out there, but seeing as how this was supposed to be a learning experience, I decided to write my own. You can check out the results here.

You’re welcome to use this, if you’d like (it’s available under MIT license), but here are a few caveats. First, it only works with single images that have been scaled down in the html page (the ‘magnified’ image is actually the size of the original image). Second, the image must be fully loaded (so that it has width, height, and src properties) and correctly positioned (so that its offset property is not simply {0, 0}). To use it, just say:

$(someImageSelector).magnify(originalImageWidth, originalImageHeight, optionsObject);

The optionsObject may contain the following properties:

  • width    the width of the ‘magnifying glass’    defaults to 200
  • height    the height of the ‘magnifying glass’    defaults to 200
  • useBorder    a boolean that determines whether or not to display a border around ‘magnifying glass’    defaults to true
  • borderSize    the size in pixels of the border    defaults to 1
  • borderColor    a string specifying the color of the border    defaults to ‘black’
  • useCrosshair    a boolean that determines whether or not to show a crosshair cursor    defaults to false
  • useShadow    a boolean that determines whether or not to show a dropshadow behind ‘magnifying glass’ (doesn’t work in IE)    defaults to true
  • animate    a boolean that determines whether or not ‘magnifying glass’ should fade in and out    defaults to true
  • hideMouse    a boolean that determines whether or not to show the mouse pointer (doesn’t work in Safari)    defaults to false

If you do a view source on the demo you can see in the site.js file how two different option objects are used. The download contains both the original commented file and a minified version (roughly 1.5 k in size).

DEMO    |    DOWNLOAD

Now, I am by no means a javascript or jQuery expert so I’m sure there may be better ways of doing some things. If anyone has any tips, don’t hesitate to post them. Happy early Christmas…

Incidentally, although my wife’s portfolio site isn’t done, take the time to check out her work over on Society 6 ( photography | collage ). You’ll be glad you did.

 

  Facebook   Pinterest   Twitter   Google+
javascriptjquery
  • Quick Morse Code Generator
    April 27, 2009 · 6 comments
    4115
    5
    Read more
  • 3D Scanner (Kinda Sorta)
    October 07, 2009 · 4 comments
    2247
    6
    Read more
  • Animated Particles, Books, and Code – It’s a New Year
    January 01, 2014 · 3 comments
    5366
    22
    Read more
5 Comments:
  1. Good job! Works very well.

    I’ve also recently been starting to do more with javascript/jQuery, but still looking for a good IDE. What do you use?

    Hendrik · December 16, 2011
  2. Hey Hendrik – I’ve actually been using FlashDevelop as a js IDE. Ain’t ideal for it, but it’s something I’m used to and comfortable with…

    Devon O. · December 16, 2011
  3. Hi Hendrik-
    That was a good work.One concern with the post is that will it work on ipad?

    pradeep · March 24, 2012
  4. hi !! thanks a lot !!
    my question is: can I add a link or a jscript funcion to onclick ??
    or a simple link to a website?

    greetins from chile!!

    BDHiv · January 15, 2013
  5. Hi!

    To make the script working after window resizes add the following line in the mousenter handler

    $this.mouseenter(function(event) {
    // fix to make plugin resize safe
    offset = $this.offset();
    // end of fix to make plugin resize safe

    Rafael · March 11, 2013

Leave a Comment! Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
  • Actionscript (95)
  • AIR (16)
  • Flash (99)
  • Games (7)
  • Liberty (13)
  • Life (53)
  • Shaders (20)
  • Unity3D (21)
Recent Comments
  • MainDepth on Unity Ripple or Shock Wave Effect
  • Devon O. on Unity Ripple or Shock Wave Effect
  • Feral_Pug on Unity Ripple or Shock Wave Effect
  • bavvireal on Unity3D Endless Runner Part I – Curved Worlds
  • Danielius Vargonas on Custom Post Processing with the LWRP
Archives
  • December 2020 (1)
  • December 2019 (1)
  • September 2019 (1)
  • February 2019 (2)
  • December 2018 (1)
  • July 2018 (1)
  • June 2018 (1)
  • May 2018 (2)
  • January 2018 (1)
  • December 2017 (2)
  • October 2017 (1)
  • September 2017 (2)
  • January 2017 (1)
  • July 2016 (1)
  • December 2015 (2)
  • March 2015 (1)
  • September 2014 (1)
  • January 2014 (1)
  • August 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • March 2013 (2)
  • December 2012 (1)
  • November 2012 (1)
  • September 2012 (3)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • December 2011 (2)
  • October 2011 (3)
  • September 2011 (1)
  • August 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • April 2011 (2)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • December 2010 (3)
  • October 2010 (5)
  • September 2010 (1)
  • July 2010 (2)
  • May 2010 (5)
  • April 2010 (2)
  • March 2010 (7)
  • February 2010 (5)
  • January 2010 (5)
  • December 2009 (3)
  • November 2009 (1)
  • October 2009 (5)
  • September 2009 (5)
  • August 2009 (1)
  • July 2009 (1)
  • June 2009 (2)
  • May 2009 (6)
  • April 2009 (4)
  • March 2009 (2)
  • February 2009 (4)
  • January 2009 (1)
  • December 2008 (5)
  • November 2008 (2)
  • September 2008 (1)
  • August 2008 (6)
  • July 2008 (6)
  • June 2008 (9)
  • May 2008 (4)
  • April 2008 (3)
  • March 2008 (4)
  • February 2008 (9)
  • January 2008 (7)
  • December 2007 (6)
Copyright © 2021 Devon O. Wolfgang