Skip to content

Latest commit

 

History

History
68 lines (50 loc) · 2.34 KB

README.md

File metadata and controls

68 lines (50 loc) · 2.34 KB
Raw

Zoomable

A simple jQuery plugin for custom zooming

This jQuery plugin is designed to add zooming functionality of an element using zoom controls (increase, decrease, and reset zoom) or alt + mouse wheel scroll.

Demo on JSFiddle

Options

inheritScale

  • Accepts INT value
  • Default scale of the element (1 will keep the element the same size, 2 will double it on initial load)

increment

  • Accepts INT value
  • The percent increase or decrease between mouse wheel ticks

minScale

  • Accepts INT value (Interpreted as a percentage -- 0.2 will be 20%)
  • How far a user can zoom out the element

maxScale

  • Accepts INT value (Interpreted as a percentage -- 1.4 will be 140%)
  • How far a user can zoom into the element

feedback

  • Accepts BOOLEAN value (true or false)
  • Turn on or off the visual feedback of current zoom percentage

feedbackDuration

  • Accepts INT value (in milliseconds - For example, 1000 for 1 second)
  • Determines how long the visual feedback of the curren zom percentage lingers on screen

feedbackClass

  • Accepts a string
  • The class that is added the #zoomable-feedback element

origin

  • Accepts NULL or STRING ("mouse")
  • Used to overwrite the originX and originY values with the current position of the cursor

originX

  • Accepts INT value (interpreted as a percentage -- 40 will be 40%)
  • Determines the percent distance from the left edge of the window for horizontal zoom origin

originY

  • Accepts INT value (interpreted as a percentage -- 50 will be 50%)
  • Determines the percent distance from the top edge of the window for vertical zoom origin

zoomControls

  • Accepts BOOLEAN value (true or false)
  • Toggles the zoom controls on or off

zoomControlsClass

  • Accepts a string
  • The class that is added the #zoom-controls element

zoomControlsButtonClass

  • Accepts a string
  • The class that is added the buttons (reset, increase, and decrease) inside of the #zoom-controls element

zoomControlsAppendLocation

  • Accepts a jQuery selector (For example, $('#container') or $(document) )
  • Determines which element the #zoom-controls element will be appended to

zoomableArea

  • Accepts a jQuery selector (For example, $('#container') or $(document) )
  • Determines which element or section of the page allows for the mouse wheel scroll zoom