JavaScript Library For Zoomable & Pannable Html Elements - Big Picture

bigpicture.js is a jQuery based JavaScript library which allows you to zoom in/out, pan and live-edit a group of Html elements with mouse and keyboard interactions.

Features:

• Search : F3 or CTRL+F
• Pan : click and drag
• Move text : CTRL+click and drag
• Zoom In : PageDown  or CTRL+ or mousewheel  or double-click
• Zoom Out : PageUp  or CTRL- or  mousewheel  or CTRL+double-click
• Biggest picture : F2 

How to use it:

1. Include jQuery library and the bigpicture.js library in the document.

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="bigpicture.js"></script>

2. Wrap your Html elements into DIV elements as follows. Use Html5 data-* attributes to specify the size & position options for each element.

<div id="bigpicture-container">
  <div id="bigpicture" data-zoom="1" data-x="721" data-y="480">
    <div contenteditable="true" class="text" data-size="57" data-x="941" data-y="735">Element 1</div>
    <div contenteditable="true" class="text" data-size="11" data-x="977" data-y="812">Element 2</div>
    ...
  </div>
</div>

---

This awesome jQuery plugin is developed by josephernest. For more Advanced Usages, please check the demo page or visit the official website.