Ability to specify a different scroll container than window

bower.json

@@ -1,5 +1,5 @@
 {
   "name": "jquery-unveil",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "main": ["jquery.unveil.js"]
 }

index.html

@@ -146,6 +146,25 @@ <h2>Callback</h2>
     &nbsp;&nbsp;&nbsp;&nbsp;this.style.opacity = 1;<br>
     &nbsp;&nbsp;});<br>
     });</code>
+
+    <h2>Scrollable Container</h2>
+    <p>When the images are within a scrollable container other than window, you'll need to provide it to unveil.</p>
+    <p>Here is an example where we find the parent with the class <code>scroll-container</code>:</p>
+    <code>$(<span class="red">"img"</span>).unveil(<br>
+    &nbsp;&nbsp;<span class="purple">200</span>,<br>
+    &nbsp;&nbsp;null,<br>
+    &nbsp;&nbsp;$(<span class="red">"img"</span>).closest(<span class="red">".scroll-container"</span>)<br>
+    );</code>
+
+    <h2>Specify an Image Source Directly</h2>
+    <p>When the image source is dynamically known, using data-src might not be practical.</p>
+    <p>Here is an example where we specify a url at runtime:</p>
+    <code>$(<span class="red">"img"</span>).unveil(<br>
+    &nbsp;&nbsp;<span class="purple">200</span>,<br>
+    &nbsp;&nbsp;null,<br>
+    &nbsp;&nbsp;null,<br>
+    &nbsp;&nbsp;<span class="red">"http://my-server/my-image.png"</span><br>
+    );</code>
 
     <h2>Trigger</h2>
     <p>You can still trigger image loading whenever you need.</p>

jquery.unveil.js

@@ -10,17 +10,18 @@
 
 ;(function($) {
 
-  $.fn.unveil = function(threshold, callback) {
+  $.fn.unveil = function(threshold, callback, target, url) {
 
     var $w = $(window),
+		trg = target || $w,
         th = threshold || 0,
         retina = window.devicePixelRatio > 1,
         attrib = retina? "data-src-retina" : "data-src",
         images = this,
         loaded;
 
     this.one("unveil", function() {
-      var source = this.getAttribute(attrib);
+      var source = url || this.getAttribute(attrib);
       source = source || this.getAttribute("data-src");
       if (source) {
         this.setAttribute("src", source);
@@ -33,8 +34,8 @@
         var $e = $(this);
         if ($e.is(":hidden")) return;
 
-        var wt = $w.scrollTop(),
-            wb = wt + $w.height(),
+        var wt = trg.offset().top;
+            wb = wt + trg.height(),
             et = $e.offset().top,
             eb = et + $e.height();
 
@@ -45,7 +46,8 @@
       images = images.not(loaded);
     }
 
-    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
+    trg.scroll(unveil);
+    $w.resize(unveil);
 
     unveil();
 

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "unveil",
+  "version": "1.0.0",
+  "description": "Most of us are familiar with the [Lazy Load](http://www.appelsiini.net/projects/lazyload) plugin by [Mika Tuupola](http://www.appelsiini.net/).\r This plugin is very useful and it boosts performance delaying loading of images in long web pages because images outside of viewport (visible part of web page) won't be loaded until the user scrolls to them.\r Lazy Load has some cool options such as custom effects, container, events or data attribute. If you're not gonna use any of them you can reduce the file size by leaving just the essential code to show the images.\r That's what I did and this is my lightweight version of Lazy Load with support for serving high-resolution images to devices with retina displays - less than 1k.",
+  "main": "jquery.unveil.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mediaclip/unveil.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/mediaclip/unveil/issues"
+  },
+  "homepage": "https://github.com/mediaclip/unveil#readme"
+}