diff --git a/REST/PhotoFrame/app.js b/REST/PhotoFrame/app.js
index fa20f08..cb2c84d 100644
--- a/REST/PhotoFrame/app.js
+++ b/REST/PhotoFrame/app.js
@@ -142,7 +142,7 @@ app.use(
'/fancybox',
express.static(
fileURLToPath(
- new URL('./node_modules/@fancyapps/fancybox/dist/', import.meta.url)
+ new URL('./node_modules/@fancyapps/ui/dist/', import.meta.url)
),
)
);
@@ -201,9 +201,11 @@ app.get('/', (req, res) => {
// GET request to log out the user.
// Destroy the current session and redirect back to the log in screen.
app.get('/logout', (req, res) => {
- req.logout();
- req.session.destroy();
- res.redirect('/');
+ req.logout(function(err) {
+ if (err) { return next(err); }
+ req.session.destroy();
+ res.redirect('/');
+ });
});
// Star the OAuth login process for Google.
@@ -238,6 +240,9 @@ app.get('/album', (req, res) => {
renderIfAuthenticated(req, res, 'pages/album');
});
+app.get('/fancyboxcfg', (req, res) => {
+ res.json( config.fancybox );
+});
// Handles form submissions from the search page.
// The user has made a selection and wants to load photos into the photo frame
diff --git a/REST/PhotoFrame/config.js b/REST/PhotoFrame/config.js
index 84ca5e2..ba7bcce 100644
--- a/REST/PhotoFrame/config.js
+++ b/REST/PhotoFrame/config.js
@@ -47,3 +47,10 @@ config.albumPageSize = 50;
// The API end point to use. Do not change.
config.apiEndpoint = 'https://photoslibrary.googleapis.com';
+
+config.fancybox = {
+ Slideshow: { playOnStart: true, timeout:20e3 },
+ Thumbs: { showOnStart: false },
+ Fullscreen: { autoStart: true },
+ hideScrollbar: true,
+};
\ No newline at end of file
diff --git a/REST/PhotoFrame/package-lock.json b/REST/PhotoFrame/package-lock.json
index ae1b460..172a1fb 100644
--- a/REST/PhotoFrame/package-lock.json
+++ b/REST/PhotoFrame/package-lock.json
@@ -9,7 +9,7 @@
"version": "1.0.0",
"license": "Apache-2.0",
"dependencies": {
- "@fancyapps/fancybox": "^3.5.7",
+ "@fancyapps/ui": "^5.0.36",
"body-parser": "^1.19.1",
"ejs": "^3.1.7",
"express": "^4.18.1",
@@ -44,13 +44,10 @@
"kuler": "^2.0.0"
}
},
- "node_modules/@fancyapps/fancybox": {
- "version": "3.5.7",
- "resolved": "https://registry.npmjs.org/@fancyapps/fancybox/-/fancybox-3.5.7.tgz",
- "integrity": "sha512-rcEtu8t+WnmqIDV/Wfm1yvy/nDdwc7YV25j9HLxGC2/WOsUhk9rcWg2nB8g1BrjRt9zaoADdjHTU6ILYTJzBBg==",
- "peerDependencies": {
- "jquery": ">=1.9.0"
- }
+ "node_modules/@fancyapps/ui": {
+ "version": "5.0.36",
+ "resolved": "https://registry.npmjs.org/@fancyapps/ui/-/ui-5.0.36.tgz",
+ "integrity": "sha512-GMygQzp1MBTFNTT6AzpbL6pXTD6bTxwjmmpI1fe8Ozmmiseu8/g82Sudl1YhcbZmS4bJgaBOF5THDFGpXQ1fDw=="
},
"node_modules/accepts": {
"version": "1.3.8",
@@ -1448,11 +1445,10 @@
"kuler": "^2.0.0"
}
},
- "@fancyapps/fancybox": {
- "version": "3.5.7",
- "resolved": "https://registry.npmjs.org/@fancyapps/fancybox/-/fancybox-3.5.7.tgz",
- "integrity": "sha512-rcEtu8t+WnmqIDV/Wfm1yvy/nDdwc7YV25j9HLxGC2/WOsUhk9rcWg2nB8g1BrjRt9zaoADdjHTU6ILYTJzBBg==",
- "requires": {}
+ "@fancyapps/ui": {
+ "version": "5.0.36",
+ "resolved": "https://registry.npmjs.org/@fancyapps/ui/-/ui-5.0.36.tgz",
+ "integrity": "sha512-GMygQzp1MBTFNTT6AzpbL6pXTD6bTxwjmmpI1fe8Ozmmiseu8/g82Sudl1YhcbZmS4bJgaBOF5THDFGpXQ1fDw=="
},
"accepts": {
"version": "1.3.8",
diff --git a/REST/PhotoFrame/package.json b/REST/PhotoFrame/package.json
index 9ab390d..89ebbb4 100644
--- a/REST/PhotoFrame/package.json
+++ b/REST/PhotoFrame/package.json
@@ -12,7 +12,7 @@
"main": "app.js",
"type": "module",
"dependencies": {
- "@fancyapps/fancybox": "^3.5.7",
+ "@fancyapps/ui": "^5.0.36",
"body-parser": "^1.19.1",
"ejs": "^3.1.7",
"express": "^4.18.1",
diff --git a/REST/PhotoFrame/static/css/frame.css b/REST/PhotoFrame/static/css/frame.css
index 900f8df..400b323 100644
--- a/REST/PhotoFrame/static/css/frame.css
+++ b/REST/PhotoFrame/static/css/frame.css
@@ -87,6 +87,10 @@ pre {
opacity: 1 !important;
}
+.fancybox__container {
+ background-color: rgba(24, 24, 27, 1.0)
+}
+
.loading-dialog {
position: fixed;
margin: 0;
diff --git a/REST/PhotoFrame/static/js/frame.js b/REST/PhotoFrame/static/js/frame.js
index 0948461..d40b1e9 100644
--- a/REST/PhotoFrame/static/js/frame.js
+++ b/REST/PhotoFrame/static/js/frame.js
@@ -47,6 +47,13 @@ function showPreview(source, mediaItems) {
$('startSlideshow').removeClass('disabled');
}
+ function shuffleArray(array) {
+ for (let i = array.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [array[i], array[j]] = [array[j], array[i]];
+ }
+ }
+ shuffleArray(mediaItems);
// Loop over each media item and render it.
$.each(mediaItems, (i, item) => {
// Construct a thumbnail URL from the item's base URL at a small pixel size.
@@ -78,8 +85,8 @@ function showPreview(source, mediaItems) {
.attr('data-height', item.mediaMetadata.height);
// Add the thumbnail image to the link to the full image for fancybox.
const thumbnailImage = $('![]()
')
- .attr('src', thumbnailUrl)
- .attr('alt', captionText)
+ // .attr('src', thumbnailUrl)
+ // .attr('alt', captionText)
.addClass('img-fluid rounded thumbnail');
linkToFullImage.append(thumbnailImage);
@@ -126,28 +133,16 @@ function loadQueue() {
$(document).ready(() => {
// Load the queue of photos selected by the user for the photo
loadQueue();
-
- // Set up the fancybox image gallery.
- $().fancybox({
- selector: '[data-fancybox="gallery"]',
- loop: true,
- buttons: ['slideShow', 'fullScreen', 'close'],
- image: {preload: true},
- transitionEffect: 'fade',
- transitionDuration: 1000,
- fullScreen: {autoStart: false},
- // Automatically advance after 3s to next photo.
- slideShow: {autoStart: true, speed: 3000},
- // Display the contents figcaption element as the caption of an image
- caption: function(instance, item) {
- return $(this).find('figcaption').html();
- }
+
+ $.get( "/fancyboxcfg", function( data ) {
+ // Set up the fancybox image gallery.
+ Fancybox.bind('[data-fancybox="gallery"]', data);
});
// Clicking the 'view fullscreen' button opens the gallery from the first
// image.
$('#startSlideshow')
- .on('click', (e) => $('#images-container a').first().click());
+ .on('click', (e) => Fancybox.fromSelector('[data-fancybox="gallery"]') )
// Clicking log out opens the log out screen.
$('#logout').on('click', (e) => {
diff --git a/REST/PhotoFrame/views/pages/frame.ejs b/REST/PhotoFrame/views/pages/frame.ejs
index 179f4a2..3547941 100644
--- a/REST/PhotoFrame/views/pages/frame.ejs
+++ b/REST/PhotoFrame/views/pages/frame.ejs
@@ -32,7 +32,8 @@
<%- include('../partials/dialogs') %>
<%- include('../partials/js') %>
-
+
+
<%- include('../partials/footer') %>
\ No newline at end of file
diff --git a/REST/PhotoFrame/views/partials/head.ejs b/REST/PhotoFrame/views/partials/head.ejs
index d64c3d5..e6e5f63 100644
--- a/REST/PhotoFrame/views/partials/head.ejs
+++ b/REST/PhotoFrame/views/partials/head.ejs
@@ -10,7 +10,8 @@
-
+
+