Add background-position to bigimg's configurable per image.

You may add a "background-position" value to a [[Params.bigimg]] entry if a big image needs positioning different from the default.

exampleSite/config.toml

@@ -25,6 +25,8 @@ pygmentCodeFences = true
 #[[Params.bigimg]]
 #  src = "img/sphere.jpg"
 #  desc = "Sphere"
+#  # position: see values of CSS background-position.
+#  position = "center top"
 #[[Params.bigimg]]
 #  src = "img/hexagon.jpg"
 #  desc = "Hexagon"

static/js/main.js

@@ -77,13 +77,15 @@ var main = {
     var imgInfo = main.getImgInfo();
     var src = imgInfo.src;
     var desc = imgInfo.desc;
-      main.setImg(src, desc);
+    var position = imgInfo.position;
+      main.setImg(src, desc, position);
 
     // For better UX, prefetch the next image so that it will already be loaded when we want to show it
       var getNextImg = function() {
       var imgInfo = main.getImgInfo();
       var src = imgInfo.src;
       var desc = imgInfo.desc;
+      var position = imgInfo.position;
 
     var prefetchImg = new Image();
       prefetchImg.src = src;
@@ -91,13 +93,16 @@ var main = {
 
       setTimeout(function(){
                   var img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
+        if (position !== undefined) {
+          img.css("background-position", position);
+        }
         $(".intro-header.big-img").prepend(img);
         setTimeout(function(){ img.css("opacity", "1"); }, 50);
 
       // after the animation of fading in the new image is done, prefetch the next one
         //img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
       setTimeout(function() {
-        main.setImg(src, desc);
+        main.setImg(src, desc, position);
       img.remove();
         getNextImg();
       }, 1000);
@@ -116,15 +121,24 @@ var main = {
     var randNum = Math.floor((Math.random() * main.numImgs) + 1);
     var src = main.bigImgEl.attr("data-img-src-" + randNum);
   var desc = main.bigImgEl.attr("data-img-desc-" + randNum);
+  var position = main.bigImgEl.attr("data-img-position-" + randNum);
 
   return {
     src : src,
-    desc : desc
+    desc : desc,
+    position : position
   }
   },
 
-  setImg : function(src, desc) {
+  setImg : function(src, desc, position) {
   $(".intro-header.big-img").css("background-image", 'url(' + src + ')');
+  if (position !== undefined) {
+    $(".intro-header.big-img").css("background-position", position);
+  }
+  else {
+    // Remove background-position if added to the prev image.
+    $(".intro-header.big-img").css("background-position", "");
+  }
   if (typeof desc !== typeof undefined && desc !== false) {
     $(".img-desc").text(desc).show();
   } else {