You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
The Download Button requires that PHP v5.2.0 (or later) is installed on your web server (please see the System Requirements for details) and it sounds like you might not have PHP installed on your server.
Please double-check with your web host that PHP is installed and active on your web space.
If it is, then please post back with the URL to your gallery's web page so that I can see the problem for myself and hopefully help further. Thank you.
For the Back Button to appear in Small Screen Mode, you'll need to set showSmallBackButton="TRUE" (in the Back Button section).
Please note that in Small Screen Mode, the Back Button will be displayed on the main image pages but not the thumbnail pages.
If you really need a link on the Small Screen Mode thumbnail pages, then you could use HTML formatting within the Gallery Title (as noted in this FAQ) to include an <a> tag. For example, you could enter a galleryTitle (in the 'Lite' options section) such as:
Click <a href="http://www.example.com/index.html">here</a> to return to main page.If you choose to use display a Gallery Title in your gallery, then it will be displayed in Large Screen Mode and on the thumbnail pages (but not the main image pages) in Small Screen Mode.
You can position the Gallery Title (for Large Screen Mode) using the galleryTitlePosition and galleryHAlign configuration options (in the 'General' options section).
This works really well.
That's great to hear! Thank you for letting me know.
Tried it out on this page:
Nicely done! I hope it doesn't take you too long to integrate it into the rest of your web pages.
It works but on the right-click, although a local menu appears, it's not possible to copy an image...
I thought this might be the case and mentioned it in a post above:
You could use JavaScript to enable right-clicking within a gallery but you'd likely find that it would not make downloading a gallery image any easier. Chances are you'd right-click on a gallery image but you'd actually be clicking on an invisible overlay (including gallery elements such as the hit areas for navigation) so you'd not see the 'Save Image As...' option.
There really is no way to allow right-clicking to save an image in a Juicebox gallery and, if you want to allow users to be able to download images from a Juicebox gallery, the best options would be to display the Open Image and/or Download Button on the gallery's Button Bar (via showOpenButton="TRUE" and/or showDownloadButton="TRUE").
... and it's still not possible to highlight text outside of IE 11.
Unfortunately, it looks like it's just not possible to copy text from within a Juicebox gallery (across all browsers) and there's no easy way around this.
If it is really important for visitors to your website to be able to copy and paste image titles and/or image captions, you could use the Juicebox-Pro API to fetch the image title and caption for the currently displayed image and use JavaScript to display the text elsewhere on the web page (in a separate <div> container outside the gallery) where it can be copied with ease.
Here's as example of how this can be achieved.
<!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 type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600"
});
jb.onImageChange = function(e) {
var index = e.id;
var info = jb.getImageInfo(index);
var title = info.title;
var caption = info.caption;
$('#text').html('<p>Image Title: ' + title + '</p><p>Image Caption: ' + caption + '</p>');
};
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
<div id="text"></div>
</body>
</html>Also when other galleries on the same page are selected, no right-click is possible.
On your 'decBirds&Flowers.asp' page, when the page is initially loaded, I can right-click on your 'Birds & Flowers' gallery.
If I then switch galleries (to your 'Tiles on the Wall' gallery), the right-click functionality is still available.
It's only when I change pages (for example, to your 'decFarmyard.asp' page) that the right-click functionality disappears (and that's because the re-enabling code is not present in those other gallery pages).
If you find that switching galleries on the same page disables the right-click functionality, then try replacing the following code in your loadGallery(a, b, c, y, z) function:
if (tracker === false) {
jb.onInitComplete = function() {
var element = document.getElementById('juicebox-container');
element.oncontextmenu = null;
};
}... with this alternative (which should re-enable the right-click menu for all elements on the web page every time a gallery is selected):
jb.onInitComplete = function() {
var elements = document.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
elements[i].oncontextmenu = null;
}
};Even though it's not possible to right-click and save an image or highlight and copy text from within a Juicebox gallery, I hope my suggestions and workarounds are useful (and thanks for posting your suggestions in the Feature Requests thread).
That should certainly work (as the browser never moves away from the 'index.html' page whilst switching between different galleries).
My suggestion should still come in useful for anyone who assigns a different audio track for each individual gallery within an album (via Juicebox's own audio functionality) but adding a single audio track to the album's 'index.html' page (using an HTML 5 <audio> tag) is a great solution for a continuous audio track which does not change when different galleries are selected.
Thanks for sharing!
It looks like you have placed the code in the correct place in your 'index.html' file so it should work fine.
I have just double-checked my suggestion and it seems to work OK for me.
I created a multi-gallery album with jAlbum 15.1.3 and the Juicebox skin v1.5.1, giving each gallery an audioUrlMp3 and setting playAudioOnLoad to TRUE.
Without any modifications, the audio tracks play over each other when new galleries are selected from the side menu (as expected).
After adding the code:
if (jb) {
$('.jb-bb-btn-audio').each(function() {
if ($(this).hasClass('jb-status-playing')) {
jb.toggleAudio();
}
});
}... at the very beginning of the loadContent(galleryPath, galleryCount) function, the audio track from the current gallery stops before the audio from the newly selected gallery starts (again, as expected).
Try clearing your browser's cache to be sure that your browser is using your updated 'index.html' file.
I have just viewed the album page you posted in your original post above and it seems to work OK. I can clearly hear the audio from one gallery stop before the audio from a new gallery starts.
Please remember that the audio tracks are linked to individual galleries and there is no easy way to have a single audio track play (and continue to play) whilst switching between different galleries. (You'd need to manually embed a third-party audio player into your 'index.html' file to do this.)
As I suspected (and noted in my post above), index.html is generated by the Juicebox skin but index2.html onwards have been created by a different skin (but I do not know which one).
It looks like you may have created an album with a certain (unknown) skin, then switched to the Juicebox skin and remade your album (without changing your output directory). The Juicebox skin generated a new index.html file (overwriting the original index.html file from having made the album with the original skin) and stopped there (as the Juicebox skin does not need any more HTML pages). The additional index2.html, index3.html, etc. files are redundant remnants from the use of the original skin and can safely be deleted (or just ignored). They do not play a part in the Juicebox album.
If you make a fresh album with the Juicebox skin (and use a new empty folder as your output directory), you'll see that index2.html, index3.html, etc. files are not generated.
As I noted above, just open your album's 'index.html' file and place the following code immediately after the function loadContent(galleryPath, galleryCount) { line:
if (jb) {
$('.jb-bb-btn-audio').each(function() {
if ($(this).hasClass('jb-status-playing')) {
jb.toggleAudio();
}
});
}This should hopefully work fine.
Try the following. Replace your current loadgallery() function with the following code. You can use your existing tracker variable to ensure that the right-click removal code is run just once (and not each time a new gallery is loaded).
function loadGallery(a, b, c, y, z) {
var jb = new juicebox({
backgroundColor: "rgba(255,255,255,1)",
thumbShadowBlur: "rgba(255,255,255,1)",
imageShadowColor: "rgba(255,255,255,1)",
textShadowColor: "rgba(255,255,255,1)",
captionBackTopColor: "rgba(0,0,0,0)",
containerId: "juicebox-container",
baseUrl: y,
galleryHeight: z,
maxThumbColumns: a,
maxThumbRows: b,
thumbsPosition: c
});
if (tracker === false) {
jb.onInitComplete = function() {
var element = document.getElementById('juicebox-container');
element.oncontextmenu = null;
};
}
tracker = true;
}This should work fine. (I tested it myself before posting.)
I have viewed your 'HMM Aerial Photography' gallery on my iPod Touch 6 running iOS 11.2.2 in Mobile Safari and Mobile Firefox 10.4 and the results look very similar in both browsers.
If you are referring to the browser address bar in horizontal orientation, then I think the difference you are seeing may simply be due to the different design choices that the browser developers have made. Apple (Safari) chooses to hide both the address bar and the navigation bar whereas Mozilla (Firefox) chooses to hide the navigation bar but not the address bar.
Also, please bear in mind that Juicebox is not tested on Mobile Firefox and so mobile Firefox is not an officially supported browser (although viewing galleries in Mobile Firefox should not normally cause any problems).
We support (and test in) the browsers which come bundled with mobile devices (Mobile Safari on iOS and the stock browser on Android) and also Mobile Chrome (both platforms).
Mobile Chrome is more mature (and thus more stable and predictable in its behavior) than Mobile Firefox currently is.
If you let me know some more about your problem, I might be able to help further.
Please let me know what iPhone you have, what version of iOS you are running and what version of Mobile Firefox you have installed.
Please also let me know what gallery you are referring to so that I can try to replicate the issue you are describing and see the problem for myself.
I cannot be sure that I'll be able to help further (what you are seeing might just be down to the different ways that different browsers work) but I'm certainly happy to help further if I can.
You're welcome.
Just for clarification, when trying to view a gallery locally in Chrome, the "Juicebox can not display locally in this browser." message should be displayed (as noted in the FAQ below), not the "Config file not found." message.
When I view my gallery locally, I see the message "Juicebox can not display locally in this browser". Why?
If you continue to experience difficulties, just let me know and I'll do my best to help you out.
Incidentally, if you are still using Juicebox-Pro v1.5.0, you might like to upgrade to the latest version (v1.5.1) as many bugs have been fixed in the latest release. (Please see the Version History for a full list of changes.)
Upgrades are free within the same major version number and download links always point towards the latest version rather than the version you purchased so you could use your existing download link (from your purchase email) to download the latest version.
If you cannot find your purchase email or your link has expired, then just fill in the Download Link Request Form and I'll send you a new link.
Full instructions for downloading the latest version and for upgrading JuiceboxBuilder-Pro and existing galleries can be found on the Upgrading Juicebox support page.
You're welcome!
If you encounter the "Config file not found." message whilst trying to view a gallery locally in Safari 11, then please see this forum post for a full explanation and a workaround.
Unfortunately, Safari 11 (released 19 September 2017) introduced a new security restriction which prevents local viewing of Juicebox galleries by default. This issue is specific to viewing galleries locally (from your computer's hard drive) and there is no such issue once the galleries have been uploaded to a web server (where they can be viewed in any modern browser).
Selecting 'Disable Local File Restrictions' from Safari 11's 'Develop' menu (full instructions in the link above) should, once again, allow you to view your galleries locally in Safari 11.
If you are not using Safari 11, then please see this FAQ for more general information on the "Config file not found." message:
When I view my gallery I see the message 'Config file not found'. How do I fix this?
I hope these notes help.
However, if you continue to experience difficulties, please let me know and I'll try to help further.
Let me know if you encounter the error whilst trying to view a gallery locally or after the gallery has been uploaded to your web server. Also, let me know what browser(s) you see the message in and, if your gallery has been uploaded to your web server, please post a link to the gallery so that I can see the problem for myself.
Once I'm able to see the gallery on your web server, I should hopefully be able to determine the cause of the problem and propose a solution.
Is there any JavaScript that can over-ride this?
You could use JavaScript to enable right-clicking within a gallery but you'd likely find that it would not make downloading a gallery image any easier. Chances are you'd right-click on a gallery image but you'd actually be clicking on an invisible overlay (including gallery elements such as the hit areas for navigation) so you'd not see the 'Save Image As...' option.
You'd need to use the Juicebox-Pro API (specifically the onInitComplete event) to wait for Juicebox-Pro to disable the right-click functionality before re-enabling it.
Try the following:
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600"
});
jb.onInitComplete = function() {
var element = document.getElementById('juicebox-container');
element.oncontextmenu = null;
};
</script>
<div id="juicebox-container"></div>Maybe a good fix for the next release would be to allow right click in the gallery area...
Please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.
No problem!
I've tried to use Jb Builder Pro but balked at the restriction of 4095 px (as I recall).
Unfortunately, as you are aware, JuiceboxBuilder has a maximum upper limit for the resolution of source images.
Just for clarification (and for any other users reading this thread), JuiceboxBuilder can handle images of no more than 4095px x 4095px when creating a gallery. This is a limitation of Adobe AIR (the platform on which JuiceboxBuilder runs). Adobe AIR uses Adobe Flash Player as its runtime environment and the largest image size which Adobe Flash Player can handle is 16,777,215 pixels. This equates to a square image of 4095 x 4095. Please see this web page for details.
If I discover any reason why the Juicebox Photoshop Plugin should work differently in CC2017 and CC2018, I'll be sure to post back in this thread.
Can Juicebox link to and display my photos from Dropbox?
Unfortunately not. Dropbox is a file sharing service rather than a regular web host.
If you uploaded an image to Dropbox, you'd need to be able to just view the image on its own but Dropbox wraps the image within its own 'download this image' web page and it is not possible to just view the image in isolation.
Other than hosting the images on your own web site, you could use a Flickr account as a source of images for a Juicebox gallery. You could upload your images to a Flickr account and then select which images you want to display via Juicebox's Flickr options (see the Lite and Flickr Pro sections in the Config Options page).
Unfortunately, there are no configuration options available to enable the right-click context menu within a Juicebox gallery.
However, it should be possible to copy text within a gallery by highlighting it and using the Ctrl+C keyboard shortcut for the 'copy' action.
Also, if you want to allow users to download images within a gallery, then you can either:
(1) Set showOpenButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) so that visitors can click the 'Open Image Button' on the gallery's Button Bar to open the currently displayed image in a new tab where it can easily be saved.
... or:
(2) Set showDownloadButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section) so that visitors can click the 'Download Button' on the gallery's Button Bar to directly download the currently displayed image.
Please see this FAQ:
How do I allow or prevent users from saving gallery images?
Exactly the same plugin (with the same scaling routine) is used for both Photoshop CC 2017 and Photoshop CC 2018 so, assuming the settings and source images are the same, then I would certainly expect the output to be the same, too.
I see that the 1st image in your test gallery is larger (1500 x 1000) than the same image in your 'Chili Night' gallery (1024 x 683) so Juicebox has to dynamically resize the image to a different extent in both galleries when they are displayed.
Please double-check the 'Maximum Image Width, px:' and 'Maximum Image Height, px:' values in the script's interface in both Photoshop CC 2017 and Photoshop CC 2018 to make sure that you are using the same values in both programs.
If the source images are the same, the plugin is the same one and the setting are identical then the only other variable is Photoshop itself but I really cannot explain why CC 2017 and CC 2018 would be producing different results.
If you find that you are not getting the results you like from Photoshop CC 2018, then you might like to try creating your galleries by a different method, such as JuiceboxBuilder-Pro or the Juicebox Lightroom Plugin (if you have Adobe Lightroom).
I realise that this might not be as convenient for you as using Photoshop and you might need to change your workflow a little but if the results are improved, then it might be worthwhile.
You're welcome!
You can force the gallery to be displayed in Small Screen Mode (where thumbnails and main images are displayed on separate pages) by setting screenMode="SMALL" (in JuiceboxBuilder-Pro's 'Customize -> General' section).
Please see here for details on Screen Modes.
In Small Screen Mode, a grid of thumbnails is displayed and when one is selected, the large image is displayed (replacing the thumbnail page). The user can return to the thumbnail page via the Thumbnail Button on the gallery's Button Bar.
Click here for an example.
Thumbnails can be sized using the thumbWidth and thumbHeight options (all thumbnails in a gallery share the same dimensions).
Thumbnails in Small Screen Mode are displayed on pages. If there is not enough room to display all the thumbnails on a single page, then additional thumbnail pages are created and the user can scroll through the thumbnail pages via the thumbnail navigation arrows (by setting showSmallThumbNav="TRUE" in JuiceboxBuilder-Pro's 'Customize -> Thumbnail' section).
Try resizing your browser window whilst viewing the sample gallery to see how the thumbnail page reacts to different viewport sizes.
the dialogue boxes in Jb were fuzzy
I'm not exactly sure what you mean by this. Are you referring to the Juicebox Photoshop Plugin's interface?
If this is fuzzy (as well as your images), then maybe the problem is a graphics driver issue.
Please check that your graphics drivers are up to date.
Also, make sure that your computer is using a display scale of 100% and is not scaling content up or down at a percentage other than 100%.
Do you get the same fuzzy photos when creating a gallery by another method (for example, JuiceboxBuilder-Pro)?
Maybe you could provide a link to your gallery so that I could take a look at it for myself.
Also, if possible, please upload a couple of screenshots so that I can see what you are seeing. (You can attach them to a post here in the forum of upload them to a file sharing service such as Dropbox and provide links.)
Thank you.
If you have Showkase, then you could use it to create your complete website (without any manual coding).
You can create Juicebox gallery pages within the Showkase interface or you can create galleries with JuiceboxBuilder-Pro and them import them into your Showkase site (via the 'Site -> Import' functionality).
Showkase automatically generates a navigation menu with links to all your pages.
You can also create a gallery index page in Showkase (on the 'Pages' tab) and, to list gallery pages on the gallery index page, just drag-and-drop the names of the gallery pages (again, on the 'Pages' tab) on top of the gallery index page. Be sure to click 'Save' and 'Publish' afterwards.
If you are looking to link a few galleries together manually (with links at the top of the pages), then take a look at the examples in the Embedding Multiple Galleries support section.
It sounds like the Top Menu example is along the lines of what you are looking to achieve. You can view the source of the example in your browser and copy/modify it to suit your needs.
When you say that your navigation bar is currently positioned top left and you'd like it horizontally centered, applying the CSS rule text-align: center; (like we do in the Top Menu example above) might be all that is required.
I hope this points you in the right direction.
With Juicebox-Pro, you can set the thumbsPosition (TOP, BOTTOM, LEFT or RIGHT) and you can also specify the maxThumbColumns and maxThumbRows.
As an example, you could set thumbsPosition="LEFT", maxThumbColumns="2" and maxThumbRows="6" to have 2 columns of thumbnails to the left of the main image.
In such a configuration, there will always be 2 columns on thumbnails but the actual number of rows will depend on the space available in the user's browser window.
Here's a sample gallery with this configuration:
For reference, a complete list of Thumbnail Options can be found here.
I hope you get on OK with your research over the weekend.
If you have any further queries or I can be of any further assistance, please let me know.
I've never a great deal of luck with frames on mobile devices and there are also drawbacks to loading Juicebox galleries into frames (such as the inability to expand galleries beyond the frames) so I'd avoid frames if at all possible.
For other disadvantages of loading Juicebox galleries into iframes, please see the Using an External Gallery Folder support section (scroll down to "2) Using an iframe").
Thankfully, there are several alternatives that you might like to consider.
Suggestion #1
Take a look at the Side Menu Example in the Embedding Multiple Galleries support section.
The web page is laid out using CSS (instead of frames) and the gallery index is housed in a side menu.
In this example, there is a separate web page (including the side menu) for each gallery but you could perhaps use this layout in conjunction with the Switching between Multiple Galleries using JavaScript technique so that there is only ever one web page and the galleries are loaded into a <div> container (similar to targeting an iframe) on demand.
You can view the source of the example pages in your web browser and copy/modify them as required.
Suggestion #2
You might like to take a look at the Juicebox skin for jAlbum.
jAlbum is not free but the program is quite powerful in that you can point it towards an entire directory structure and the program will create a Juicebox gallery for each and every folder in the input, all at once. All galleries will be linked together by a navigation tree in a side menu. The resulting web page does not use frames (or iframes) and also uses the JavaScript baseUrl switching mechanism to load the galleries when the tree nodes (each representing a different gallery) are clicked.
Suggestion #3
Perhaps the easiest and best option for creating a complete portfolio website from scratch would be to use Showkase.
Showkase is a PHP web application which in installed on your web server and whose interface is accessed via a web browser.
Showkase has full support for Juicebox-Pro and the galleries can be created within the application itself via its interface (or created with JuiceboxBuilder-Pro and imported).
You can create Gallery Index pages and have as many galleries listed on each Gallery Index page as you wish.
Each gallery is represented by a thumbnail image with the gallery title displayed below and the gallery is opened when the user clicks on the image.
Demo sites created with Showkase can be found here and a sample Gallery Index page can be found here.
Showkase can also create non-gallery pages (About, Basic and Contact pages) where you can add information about yourself (or any other content you like).
All of this is done automatically within the Showkase interface without the need for any manual coding at all.
You can take a look around the Showkase interface by logging into the Live Demo Admin.
Showkase can be purchased as Showkase-Standard (which comes with Juicebox-Lite) or Showkase-Pro (which comes with Juicebox-Pro).
The only difference between Showkase-Standard and Showkase-Pro is the bundled viewer (Juicebox-Lite vs Juicebox-Pro).
I hope you find this information useful.
If you have any further queries, please let me know.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.