nemunaire/nemhugo
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

Browse Source 
You may add a "background-position" value to a [[Params.bigimg]] entry if a big image needs positioning different from the default.
This commit is contained in:
Bernhard Fürst 2017-11-12 18:49:42 +01:00
parent 84843f40f9
commit 6af0708975
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
exampleSite/config.toml
View File

@ -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"

22
static/js/main.js
View File

@ -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 {