Changeset View
Changeset View
Standalone View
Standalone View
js/main.js
// Dean Attali / Beautiful Jekyll 2016 | // Dean Attali / Beautiful Jekyll 2016 | ||||
var main = { | var main = { | ||||
bigImgEl : null, | |||||
numImgs : null, | |||||
init : function() { | init : function() { | ||||
// Shorten the navbar after scrolling a little bit down | // Shorten the navbar after scrolling a little bit down | ||||
$(window).scroll(function() { | $(window).scroll(function() { | ||||
if ($(".navbar").offset().top > 50) { | if ($(".navbar").offset().top > 50) { | ||||
$(".navbar").addClass("top-nav-short"); | $(".navbar").addClass("top-nav-short"); | ||||
$(".navbar-custom .avatar-container").fadeOut(500); | $(".navbar-custom .avatar-container").fadeOut(500); | ||||
} else { | } else { | ||||
$(".navbar").removeClass("top-nav-short"); | $(".navbar").removeClass("top-nav-short"); | ||||
▲ Show 20 Lines • Show All 42 Lines • ▼ Show 20 Lines | if (menus.length > 0) { | ||||
maxwidth = width; | maxwidth = width; | ||||
} | } | ||||
}); | }); | ||||
$(menus[i]).css('min-width', maxwidth + 'px') | $(menus[i]).css('min-width', maxwidth + 'px') | ||||
}); | }); | ||||
fakeMenu.remove(); | fakeMenu.remove(); | ||||
} | } | ||||
// 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) { | |||||
main.bigImgEl = $("#header-big-imgs"); | |||||
main.numImgs = main.bigImgEl.attr("data-num-img"); | |||||
// 2fc73a3a967e97599c9763d05e564189 | |||||
// set an initial image | |||||
var imgInfo = main.getImgInfo(); | |||||
var src = imgInfo.src; | |||||
var desc = imgInfo.desc; | |||||
main.setImg(src, desc); | |||||
// 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 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 + ')'); | |||||
$(".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); | |||||
img.remove(); | |||||
getNextImg(); | |||||
}, 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); | |||||
return { | |||||
src : src, | |||||
desc : desc | |||||
} | |||||
}, | }, | ||||
setImg : function(src, desc) { | |||||
$(".intro-header.big-img").css("background-image", 'url(' + src + ')'); | |||||
if (typeof desc !== typeof undefined && desc !== false) { | |||||
$(".img-desc").text(desc).show(); | |||||
} else { | |||||
$(".img-desc").hide(); | |||||
} | |||||
} | |||||
}; | }; | ||||
// 2fc73a3a967e97599c9763d05e564189 | // 2fc73a3a967e97599c9763d05e564189 | ||||
document.addEventListener('DOMContentLoaded', main.init); | document.addEventListener('DOMContentLoaded', main.init); | ||||
// sub navigation toggle | // sub navigation toggle | ||||
$(function() { | $(function() { | ||||
Show All 12 Lines |