enabling complex html as background slider

This appends a whole DOM element to the parallax mirror (utilizing the
same ".parallax-slider" class).

so far it only works properly when setting the naturalWidth and
naturalHeight options in the JS initialization. Somebody got a tip on
how to improve that?

I'm planning to implement a parallax carousel which should be possible
with that change.

also performance improvement suggestions from #71

Author: wstoettinger

parallax.js

@@ -114,7 +114,14 @@
     }
 
     this.$mirror = $('<div />').prependTo('body');
-    this.$slider = $('<img />').prependTo(this.$mirror);
+
+
+    var slider = this.$element.find('>.parallax-slider');
+
+    if (slider.length == 0)
+      this.$slider = $('<img />').prependTo(this.$mirror);
+    else 
+      this.$slider = slider.prependTo(this.$mirror)
 
     this.$mirror.addClass('parallax-mirror').css({
       visibility: 'hidden',
@@ -140,7 +147,7 @@
 
     this.$slider[0].src = this.imageSrc;
 
-    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete) {
+    if (this.naturalHeight && this.naturalWidth || this.$slider[0].complete || slider.length > 0) {
       this.$slider.trigger('load');
     }
 
@@ -263,22 +270,34 @@
 
       var $doc = $(document), $win = $(window);
 
+      var loadDimensions = function() {
+        Parallax.winHeight = $win.height();
+        Parallax.winWidth  = $win.width();
+        Parallax.docHeight = $doc.height();
+        Parallax.docWidth  = $doc.width();
+      };
+
+      var loadScrollPosition = function() {
+        var winScrollTop  = $win.scrollTop();
+        var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
+        var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
+        Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  winScrollTop));
+        Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
+        Parallax.overScroll = Math.max($win.scrollTop() - scrollTopMax, Math.min(winScrollTop, 0));
+      };
+
       $win.on('resize.px.parallax load.px.parallax', function() {
-          Parallax.winHeight = $win.height();
-          Parallax.winWidth  = $win.width();
-          Parallax.docHeight = $doc.height();
-          Parallax.docWidth  = $doc.width();
-          Parallax.isFresh = false;
-          Parallax.requestRender();
-        })
-        .on('scroll.px.parallax load.px.parallax', function() {
-          var scrollTopMax  = Parallax.docHeight - Parallax.winHeight;
-          var scrollLeftMax = Parallax.docWidth  - Parallax.winWidth;
-          Parallax.scrollTop  = Math.max(0, Math.min(scrollTopMax,  $win.scrollTop()));
-          Parallax.scrollLeft = Math.max(0, Math.min(scrollLeftMax, $win.scrollLeft()));
-          Parallax.overScroll = Math.max($win.scrollTop() - scrollTopMax, Math.min($win.scrollTop(), 0));
-          Parallax.requestRender();
-        });
+        loadDimensions();
+        Parallax.isFresh = false;
+        Parallax.requestRender();
+      })
+      .on('scroll.px.parallax load.px.parallax', function() {
+        loadScrollPosition();
+        Parallax.requestRender();
+      });
+
+      loadDimensions();
+      loadScrollPosition();
 
       this.isReady = true;
     },