Skip to content

Commit

Permalink
added lightbox for images
Browse files Browse the repository at this point in the history
  • Loading branch information
@VanDerLars
VanDerLars committed Mar 21, 2022
1 parent 3bb1b64 commit ca69887
Show file tree
Hide file tree
Showing 10 changed files with 489 additions and 182 deletions.
45 changes: 45 additions & 0 deletions app/themes/onepage_light/theme.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -576,4 +576,49 @@ figure .source {
background: #f1f1ef;
border: none;
box-shadow: 0 5px 20px #85858587;
}


.image,
.lightbox-opened{
transition: all 0.3s ease;
}
.lightbox-opened {
background-color: #ffffffe6;
cursor: pointer;
height: 100%;
left: 0;
overflow-y: scroll;
padding: 24px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
animation: lightbox-in 0.5s;
}

@keyframes lightbox-in {
0% {
opacity: 0.5;
padding: 100px;
}

100% {
opacity: 1;
padding: 24px;
}
}

.lightbox-opened img {
box-shadow: 0 0 6px 3px #33333352;;
}

.lightbox-opened img {
max-width: 100%;
border-radius: 10px;
max-height: calc(100% - 48px);
}

.no-scroll {
overflow: hidden;
}
89 changes: 53 additions & 36 deletions app/themes/onepage_light/theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,87 +15,104 @@ $(document).ready(function () {
// jump to selected page in sidebar
document.getElementById(elementid).scrollIntoView();

if(cl_splithash.length > 1){
if (cl_splithash.length > 1) {
// when internal jumo mark clicked also jump to this position
let elementid2 = cl_splithash[1];
document.getElementById(elementid2).scrollIntoView();
$('#' + elementid2).addClass('n2web_jumpmark_selected');
}
}
$( ".n2web_group" ).first().addClass('opened');
$( ".n2web_file.has_children" ).first().addClass('opened');

$(".n2web_group").first().addClass('opened');
$(".n2web_file.has_children").first().addClass('opened');


// menu functionality
$(".n2web_show_children").click(function () {
let n2webid = $(this).data( "n2webid" );
let n2webid = $(this).data("n2webid");
toggleMenuOpen(n2webid, true);
});
$("a.table_of_contents-link").click(function () {
let n2webid = $(this).attr('href');
let element = $(n2webid);
highlightJumpMark(element);
});
$(".n2web_header_mobile_menu_button").click(function (){
var element = $(".n2web_header_menu.menu_right");
if($(element).hasClass('opened')){
$(".n2web_header_mobile_menu_button").click(function () {
var element = $(".n2web_header_menu.menu_right");
if ($(element).hasClass('opened')) {
$(element).removeClass('opened');
$(element).removeClass('opened');
}else{
} else {
$(element).addClass('opened');
$(element).addClass('opened');
}
})



// Open Lightbox
$(".image a").on("click", function (e) {
e.preventDefault();
var image = $(this).attr("href");
$("html").addClass("no-scroll");
$("body").append(
'<div class="lightbox-opened"><img src="' + image + '"></div>'
);
});

// Close Lightbox
$("body").on("click", ".lightbox-opened", function () {
$("html").removeClass("no-scroll");
$(".lightbox-opened").remove();
});
});



function toggleMenuOpen(n2webid, manual){
function toggleMenuOpen(n2webid, manual) {
var cl = '';
if (manual == true){
$('#'+n2webid+'_dir').addClass('manual');
$('#'+n2webid+'_file').addClass('manual');
}else{
if (manual == true) {
$('#' + n2webid + '_dir').addClass('manual');
$('#' + n2webid + '_file').addClass('manual');
} else {
// cl = 'opened';
}

if($('#'+n2webid+'_dir').hasClass('opened')){
$('#'+n2webid+'_dir').removeClass('opened');
$('#'+n2webid+'_file').removeClass('opened');
}else{
$('#'+n2webid+'_dir').addClass('opened');
$('#'+n2webid+'_file').addClass('opened');
if ($('#' + n2webid + '_dir').hasClass('opened')) {
$('#' + n2webid + '_dir').removeClass('opened');
$('#' + n2webid + '_file').removeClass('opened');
} else {
$('#' + n2webid + '_dir').addClass('opened');
$('#' + n2webid + '_file').addClass('opened');
}
}

function openParentMenu(element, manual){
if ($(element).hasClass('n2web_group')){
let n2webid = $(element).data( "n2webid" );
function openParentMenu(element, manual) {
if ($(element).hasClass('n2web_group')) {
let n2webid = $(element).data("n2webid");
toggleMenuOpen(n2webid, manual);
openParentMenu($(element).parent(), manual);
}
}

function highlightJumpMark(element){
function highlightJumpMark(element) {
$('a').removeClass('n2web_jumpmark_selected');
$(element).addClass('n2web_jumpmark_selected');
}

//Smooth-Scrolling
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
$(function () {
$('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
}
});
});
});

46 changes: 45 additions & 1 deletion app/themes/sidebar_dark/theme.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

89 changes: 53 additions & 36 deletions app/themes/sidebar_dark/theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,87 +15,104 @@ $(document).ready(function () {
// jump to selected page in sidebar
document.getElementById(elementid).scrollIntoView();

if(cl_splithash.length > 1){
if (cl_splithash.length > 1) {
// when internal jumo mark clicked also jump to this position
let elementid2 = cl_splithash[1];
document.getElementById(elementid2).scrollIntoView();
$('#' + elementid2).addClass('n2web_jumpmark_selected');
}
}
$( ".n2web_group" ).first().addClass('opened');
$( ".n2web_file.has_children" ).first().addClass('opened');

$(".n2web_group").first().addClass('opened');
$(".n2web_file.has_children").first().addClass('opened');


// menu functionality
$(".n2web_show_children").click(function () {
let n2webid = $(this).data( "n2webid" );
let n2webid = $(this).data("n2webid");
toggleMenuOpen(n2webid, true);
});
$("a.table_of_contents-link").click(function () {
let n2webid = $(this).attr('href');
let element = $(n2webid);
highlightJumpMark(element);
});
$(".n2web_header_mobile_menu_button").click(function (){
var element = $(".n2web_header_menu.menu_right");
if($(element).hasClass('opened')){
$(".n2web_header_mobile_menu_button").click(function () {
var element = $(".n2web_header_menu.menu_right");
if ($(element).hasClass('opened')) {
$(element).removeClass('opened');
$(element).removeClass('opened');
}else{
} else {
$(element).addClass('opened');
$(element).addClass('opened');
}
})



// Open Lightbox
$(".image a").on("click", function (e) {
e.preventDefault();
var image = $(this).attr("href");
$("html").addClass("no-scroll");
$("body").append(
'<div class="lightbox-opened"><img src="' + image + '"></div>'
);
});

// Close Lightbox
$("body").on("click", ".lightbox-opened", function () {
$("html").removeClass("no-scroll");
$(".lightbox-opened").remove();
});
});



function toggleMenuOpen(n2webid, manual){
function toggleMenuOpen(n2webid, manual) {
var cl = '';
if (manual == true){
$('#'+n2webid+'_dir').addClass('manual');
$('#'+n2webid+'_file').addClass('manual');
}else{
if (manual == true) {
$('#' + n2webid + '_dir').addClass('manual');
$('#' + n2webid + '_file').addClass('manual');
} else {
// cl = 'opened';
}

if($('#'+n2webid+'_dir').hasClass('opened')){
$('#'+n2webid+'_dir').removeClass('opened');
$('#'+n2webid+'_file').removeClass('opened');
}else{
$('#'+n2webid+'_dir').addClass('opened');
$('#'+n2webid+'_file').addClass('opened');
if ($('#' + n2webid + '_dir').hasClass('opened')) {
$('#' + n2webid + '_dir').removeClass('opened');
$('#' + n2webid + '_file').removeClass('opened');
} else {
$('#' + n2webid + '_dir').addClass('opened');
$('#' + n2webid + '_file').addClass('opened');
}
}

function openParentMenu(element, manual){
if ($(element).hasClass('n2web_group')){
let n2webid = $(element).data( "n2webid" );
function openParentMenu(element, manual) {
if ($(element).hasClass('n2web_group')) {
let n2webid = $(element).data("n2webid");
toggleMenuOpen(n2webid, manual);
openParentMenu($(element).parent(), manual);
}
}

function highlightJumpMark(element){
function highlightJumpMark(element) {
$('a').removeClass('n2web_jumpmark_selected');
$(element).addClass('n2web_jumpmark_selected');
}

//Smooth-Scrolling
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
$(function () {
$('a[href*="#"]:not([href="#"])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
}
});
});
});

Loading

0 comments on commit ca69887

Please sign in to comment.