Change theme
This commit is contained in:
Achilleas Pipinellis
+2306
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,74 @@
|
||||
/*
|
||||
Put this file in /static/js/load-photoswipe.js
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
|
||||
/* TODO: Make the share function work */
|
||||
$( document ).ready(function() {
|
||||
/*
|
||||
Initialise Photoswipe
|
||||
*/
|
||||
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
||||
// for every figure element on the page:
|
||||
$('figure').each( function() {
|
||||
if ($(this).attr('class') == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
|
||||
// get properties from child a/img/figcaption elements,
|
||||
var $figure = $(this),
|
||||
$a = $figure.find('a'),
|
||||
$img = $figure.find('img'),
|
||||
$src = $a.attr('href'),
|
||||
$title = $img.attr('alt'),
|
||||
$msrc = $img.attr('src');
|
||||
// if data-size on <a> tag is set, read it and create an item
|
||||
if ($a.data('size')) {
|
||||
var $size = $a.data('size').split('x');
|
||||
var item = {
|
||||
src : $src,
|
||||
w : $size[0],
|
||||
h : $size[1],
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
console.log("Using pre-defined dimensions for " + $src);
|
||||
// if not, set temp default size then load the image to check actual size
|
||||
} else {
|
||||
var item = {
|
||||
src : $src,
|
||||
w : 800, // temp default size
|
||||
h : 600, // temp default size
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
console.log("Using default dimensions for " + $src);
|
||||
// load the image to check its dimensions
|
||||
// update the item as soon as w and h are known (check every 30ms)
|
||||
var img = new Image();
|
||||
img.src = $src;
|
||||
var wait = setInterval(function() {
|
||||
var w = img.naturalWidth,
|
||||
h = img.naturalHeight;
|
||||
if (w && h) {
|
||||
clearInterval(wait);
|
||||
item.w = w;
|
||||
item.h = h;
|
||||
console.log("Got actual dimensions for " + img.src);
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
// Save the index of this image then add it to the array
|
||||
var index = items.length;
|
||||
items.push(item);
|
||||
// Event handler for click on a figure
|
||||
$figure.on('click', function(event) {
|
||||
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
|
||||
// Get the PSWP element and initialise it with the desired options
|
||||
var $pswp = $('.pswp')[0];
|
||||
var options = {
|
||||
index: index,
|
||||
bgOpacity: 0.8,
|
||||
showHideOpacity: true
|
||||
}
|
||||
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,138 @@
|
||||
// Dean Attali / Beautiful Jekyll 2016
|
||||
|
||||
var main = {
|
||||
|
||||
bigImgEl : null,
|
||||
numImgs : null,
|
||||
|
||||
init : function() {
|
||||
// Shorten the navbar after scrolling a little bit down
|
||||
$(window).scroll(function() {
|
||||
if ($(".navbar").offset().top > 50) {
|
||||
$(".navbar").addClass("top-nav-short");
|
||||
} else {
|
||||
$(".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");
|
||||
});
|
||||
$('#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;
|
||||
$.each($(".navlinks-parent"), function(key, value) {
|
||||
if (value == target) {
|
||||
$(value).parent().toggleClass("show-children");
|
||||
} else {
|
||||
$(value).parent().removeClass("show-children");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Ensure nested navbar menus are not longer than the menu header
|
||||
var menus = $(".navlinks-container");
|
||||
if (menus.length > 0) {
|
||||
var navbar = $("#main-navbar ul");
|
||||
var fakeMenuHtml = "<li class='fake-menu' style='display:none;'><a></a></li>";
|
||||
navbar.append(fakeMenuHtml);
|
||||
var fakeMenu = $(".fake-menu");
|
||||
|
||||
$.each(menus, function(i) {
|
||||
var parent = $(menus[i]).find(".navlinks-parent");
|
||||
var children = $(menus[i]).find(".navlinks-children a");
|
||||
var words = [];
|
||||
$.each(children, function(idx, el) { words = words.concat($(el).text().trim().split(/\s+/)); });
|
||||
var maxwidth = 0;
|
||||
$.each(words, function(id, word) {
|
||||
fakeMenu.html("<a>" + word + "</a>");
|
||||
var width = fakeMenu.width();
|
||||
if (width > maxwidth) {
|
||||
maxwidth = width;
|
||||
}
|
||||
});
|
||||
$(menus[i]).css('min-width', maxwidth + 'px')
|
||||
});
|
||||
|
||||
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
|
||||
|
||||
document.addEventListener('DOMContentLoaded', main.init);
|
||||
Reference in New Issue
Block a user
