Merge pull request #98 from fuerst/master

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

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

@@ -14,7 +14,7 @@ var main = {
             $(".navbar").removeClass("top-nav-short");
         }
     });
-    
+
     // On mobile, hide the avatar when expanding the navbar menu
     $('#main-navbar').on('show.bs.collapse', function () {
       $(".navbar").addClass("top-nav-expanded");
@@ -22,7 +22,7 @@ var main = {
     $('#main-navbar').on('hidden.bs.collapse', function () {
       $(".navbar").removeClass("top-nav-expanded");
     });
-  
+
     // On mobile, when clicking on a multi-level navbar menu, show the child links
     $('#main-navbar').on("click", ".navlinks-parent", function(e) {
       var target = e.target;
@@ -60,12 +60,12 @@ var main = {
       });
 
       fakeMenu.remove();
-    }      
+    }
 
-    // show the big header image  
+    // show the big header image
     main.initImgs();
   },
-  
+
   initImgs : function() {
     // If the page was large images to randomly select from, choose an image
     if ($("#header-big-imgs").length > 0) {
@@ -77,58 +77,72 @@ 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 desc = imgInfo.desc;
-      
+      var position = imgInfo.position;
+
     var prefetchImg = new Image();
       prefetchImg.src = src;
     // if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
-    
+
       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); 
+      }, 1000);
-        //});   
+        //});
       }, 6000);
       };
-    
+
     // If there are multiple images, cycle through them
     if (main.numImgs > 1) {
         getNextImg();
     }
     }
   },
-  
+
   getImgInfo : function() {
     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 {
-    $(".img-desc").hide();  
+    $(".img-desc").hide();
   }
   }
 };