Simple jQuery Viewport Plugin For Web - Porthole

Porthole is a lightweight and easy-to-use jQuery plugin that adds a simple viewport which can be dragged to move by your mouse on your web site.

Basic Usage:

1. Include jQuery library and Porthole.js on your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.porthole.min.js"></script>

2. Markup Html structure

<div id="viewport" style="width: 500px; height: 400px;">
<div style="background: url(js_wiki.png); width: 600px; height: 600px;"> </div>

3. Call the plugin

<script>
$('#viewport').porthole();
</script>

4. Options

$('#viewport').porthole({ 

  // Show viewport with start position 20px from left and 50px from top
  start : [20, 50], 

  // callback function
  callback: function() { alert('loaded'); } 
  
});

Change log:

2015-04-03

• v2.0.0

---

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