Narrative web: lightbox feature (#1410)
Deature request: #012801 Discourse: https://gramps.discourse.group/t/narrated-website-browsing-media-in-person-page/3195
This commit is contained in:
Serge Noiraud
GitHub
158
data/css/lightbox.css
Normal file
158
data/css/lightbox.css
Normal file
@@ -0,0 +1,158 @@
|
||||
/*
|
||||
#
|
||||
# Gramps - a GTK+/GNOME based genealogy program
|
||||
#
|
||||
# Copyright 2023- Serge Noiraud
|
||||
#
|
||||
# This program is free software; you can redistribute it and/or modify
|
||||
# it under the terms of the GNU General Public License as published by
|
||||
# the Free Software Foundation; either version 2 of the License, or
|
||||
# (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU General Public License for more details.
|
||||
#
|
||||
# You should have received a copy of the GNU General Public License
|
||||
# along with this program; if not, write to the Free Software
|
||||
# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
#
|
||||
|
||||
**************************************************************************************************
|
||||
GRAMPS cascading style sheet for common lightbox
|
||||
Style Name: n/a (used by many different styles)
|
||||
Style Author: Serge Noiraud based on W3C: https://www.w3schools.com/howto/howto_js_lightbox.asp
|
||||
**************************************************************************************************/
|
||||
|
||||
.MediaRow {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.MediaRow > .MediaColumn {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.MediaRow:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.MediaColumn {
|
||||
float: left;
|
||||
width: 15%;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
/* The Modal (background) */
|
||||
.ModalClass {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 900;
|
||||
padding-top: 5px;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/* Modal Content */
|
||||
.ModalContent {
|
||||
position: relative;
|
||||
background-color: #fefefe;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
/* The Close Button */
|
||||
.MediaClose {
|
||||
color: black;
|
||||
position: absolute;
|
||||
z-index: 960;
|
||||
top: 10px;
|
||||
right: 1%;
|
||||
font-size: 48px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.MediaClose:hover,
|
||||
.MediaClose:focus {
|
||||
color: #999;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.MediaSlide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.MediaCursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Next & previous buttons */
|
||||
.MediaPrev,
|
||||
.MediaNext {
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
width: auto;
|
||||
top: 300px;
|
||||
padding: 16px;
|
||||
margin-top: -50px;
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
font-size: 48px;
|
||||
transition: 0.6s ease;
|
||||
border-radius: 0 3px 3px 0;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Position the "next button" to the right */
|
||||
.MediaNext {
|
||||
right: 2%;
|
||||
border-radius: 3px 0 0 3px;
|
||||
}
|
||||
|
||||
/* On hover, add a black background color with a little bit see-through */
|
||||
.MediaPrev:hover,
|
||||
.MediaNext:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* Number text (1/3 etc) */
|
||||
.MediaNumber {
|
||||
font-size: 36px;
|
||||
font-weight: bold;
|
||||
padding: 8px 12px;
|
||||
position: absolute;
|
||||
color: black;
|
||||
background-color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
/* Less whitespace on smaller real estate. */
|
||||
@media only screen and (max-width: 1080px) {
|
||||
.MediaNumber {
|
||||
font-size: 12px;
|
||||
}
|
||||
.MediaPrev,
|
||||
.MediaNext {
|
||||
top: 100px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.MediaClose {
|
||||
font-size: 36px;
|
||||
}
|
||||
}
|
||||
|
||||
img.hover-shadow {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.hover-shadow:hover {
|
||||
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
||||
}
|
||||
60
data/css/lightbox.js
Normal file
60
data/css/lightbox.js
Normal file
@@ -0,0 +1,60 @@
|
||||
/*
|
||||
#
|
||||
# Gramps - a GTK+/GNOME based genealogy program
|
||||
#
|
||||
# Copyright 2023- Serge Noiraud
|
||||
#
|
||||
# This program is free software; you can redistribute it and/or modify
|
||||
# it under the terms of the GNU General Public License as published by
|
||||
# the Free Software Foundation; either version 2 of the License, or
|
||||
# (at your option) any later version.
|
||||
#
|
||||
# This program is distributed in the hope that it will be useful,
|
||||
# but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
# GNU General Public License for more details.
|
||||
#
|
||||
# You should have received a copy of the GNU General Public License
|
||||
# along with this program; if not, write to the Free Software
|
||||
# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
#
|
||||
|
||||
**************************************************************************************************
|
||||
GRAMPS javascript for lightbox feature
|
||||
Style Name: n/a (used by many different styles)
|
||||
Javascript Author: Serge Noiraud based on W3C: https://www.w3schools.com/howto/howto_js_lightbox.asp
|
||||
**************************************************************************************************/
|
||||
|
||||
// Open the Modal
|
||||
function openModal() {
|
||||
document.getElementById("MediaModal").style.display = "block";
|
||||
}
|
||||
|
||||
// Close the Modal
|
||||
function closeModal() {
|
||||
document.getElementById("MediaModal").style.display = "none";
|
||||
}
|
||||
|
||||
var slideIndex = 1;
|
||||
showSlides(slideIndex);
|
||||
|
||||
// Next/previous controls
|
||||
function plusSlides(n) {
|
||||
showSlides(slideIndex += n);
|
||||
}
|
||||
|
||||
// Thumbnail image controls
|
||||
function currentSlide(n) {
|
||||
showSlides(slideIndex = n);
|
||||
}
|
||||
|
||||
function showSlides(n) {
|
||||
var i;
|
||||
var slides = document.getElementsByClassName("MediaSlide");
|
||||
if (n > slides.length) {slideIndex = 1}
|
||||
if (n < 1) {slideIndex = slides.length}
|
||||
for (i = 0; i < slides.length; i++) {
|
||||
slides[i].style.display = "none";
|
||||
}
|
||||
slides[slideIndex-1].style.display = "block";
|
||||
}
|
||||
Reference in New Issue
Block a user