Topic: can mp4s be used in gallery pages?
Looking to add a mp4 into the gallery but can't see any updates that have the ability to support?
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → can mp4s be used in gallery pages?
Looking to add a mp4 into the gallery but can't see any updates that have the ability to support?
No, sorry. Juicebox-Pro only displays JPG, GIF and PNG files (as noted i the FAQ below).
FAQ: Will Juicebox load things other than images? - https://www.juicebox.net/support/faq/#misc-1
As you have a Showkase site, you could include videos in your Showkase pages (just not inside your Juicebox galleries).
If you want to host your own videos, then you could upload the video files to your web server and use the HTML 5 <video> tag to embed them in your Showkase web pages.
For example, if you had a MP4 video named 'movie.mp4' and uploaded it to a folder named 'videos' in your root directory, then you would enter code such as the following into the editor on your Showkase page:
<video width="640" height="480" controls>
<source src="/videos/movie.mp4" type="video/mp4">
</video>Otherwise, you could upload your video to a video hosting service such as YouTube or Vimeo and paste the <iframe> embedding code that the service provides into the Showkase editor. This is how the Vimeo videos have been embedded in the 'Motion' page of the 'Patrick Surace' Showkase demo site here.
Whether you use the <video> tag code or <iframe> embedding code, be sure to enter the code into the Showkase editor in 'Source' mode. (Just click the 'Source' button on the editor's toolbar.)
So I have tried something similar using information from an older post about linkURL. I link to a little html file which has the <video> code very similar to what you show above (I just add autoplay). Works great, starts the video in a new tab. All good ... except one thing. If the gallery is in full screen mode, the video link changes tabs away from the gallery. When you close that tab, in Chrome at least, you return to the splash page. Like there's an implied "esc" when you change tabs, which makes sense. Could be user error, I'm not an html or javascript expert. But if this is expected behavior, I'm wondering if some sort of popup is the answer, but not sure if it's possible to get anything more complicated than a filename in linkURL...
Thanks!
@andy-JB
not sure if it's possible to get anything more complicated than a filename in linkURL...
You could try using JavaScript in a linkURL such as the following. (You'd need to set linkTarget to _self for this to work.)
linkURL="javascript:window.open('https://www.juicebox.net', '_blank', 'width=600,height=400')"
linkTarget="_self"Alternatively, you could leave the linkURL as a regular absolute or relative URL, override the functionality of the gallery's Open Button (Juicebox's own use of the linkURL) and run some custom JavaScript code when the Open Button is clicked, fetching the linkURL from the gallery's configuration file using the Juicebox-Pro API).
This would give much more freedom over what you could do with your linkURL but it's rather complicated and I'm not sure how (or if) it would work for your scenario. Knowledge of JavaScript would be required and such modifications (overriding regular Juicebox functionality) are not officially supported. However, I hope that it points you in the right direction and gives you some food for thought.
I don't think it's possible to have a pop-up window on top of a fullscreen gallery display, though. The fullscreen display would likely close or the pop-up window would be hidden behind the fullscreen display.
Here's some code which might help to get you started. Please note that it is untested (and officially unsupported). Just leave your linkURLs as regular absolute or relative URLs and use the following as your gallery's 'index.html' page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
body {
margin: 0px;
}
</style>
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
buttonBarPosition: "TOP",
containerId: "juicebox-container",
showOpenButton: "TRUE"
});
jb.onInitComplete = function() {
$('.jb-bb-btn-open-url').empty();
$('.jb-bb-btn-open-url').off('click');
$('.jb-bb-btn-open-url').on('click', function() {
var index = jb.getImageIndex();
var info = jb.getImageInfo(index);
var title = info.title;
var url = info.linkURL;
var win = window.open('', '_blank');
win.document.write('<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>' + title + '</title></head><body><video width="600" height="400" controls><source src="' + url + '" type="video/mp4"></video></body></html>');
win.document.close();
});
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>Thanks, Steven, I will give this a try. On the fullscreen, maybe some sort of hook like a bookmark where on exit of the video window one could restore fullscreen and return to the image that was being viewed... That would be cool.
It would certainly be possible to listen for when the pop-up window is closed and then run some custom JavaScript (see here) but I don't think it's possible to programmatically force fullscreen mode.
As far as I'm aware, going fullscreen (using the Fullscreen API) needs user-interaction. A jQuery click will do the trick (e.g. a user clicking a button) but a jQuery trigger('click') (programatically simulating an actual click) is not enough (and closing a pop-up window is definitely not going to be enough to persuade a browser to go fullscreen in the parent window). I've tried (without success).
Juicebox Support Forum → Juicebox-Pro Support → can mp4s be used in gallery pages?
Powered by PunBB, supported by Informer Technologies, Inc.