You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
The latest version of WP-Juicebox (v1.5.1.2) now includes interface options to easily display or hide image titles and captions.
Just select (or deselect) the "Display Image Titles" and "Display Image Captions" checkboxes in the gallery settings window to display (or hide) the image titles and captions. (These new checkboxes are selected by default.)
WP-Juicebox can be downloaded from its own support page here.
@motoko
Finally helped deleting folder "JuiceboxBuilder-Pro" in User Documents:
"/Users/<your username>/Documents/JuiceboxBuilder-Pro/"I never changed anything in this folder, i have my own presets in other folder.
Thank you for sharing your solution.
I hope it helps others in a similar situation.
Here's a little more information which might help to shed some light on the problem.
JuiceboxBuilder-Pro creates a temporary folder named '.tempGallery' ('C:\Users\Username\Documents\JuiceboxBuilder-Pro\.tempGallery') whilst a gallery is being created or edited.
This folder is automatically deleted on closing JuiceboxBuilder-Pro.
If, for any reason, JuiceboxBuilder-Pro is unable to delete this folder, then the 'New Gallery...' and 'Open Gallery...' buttons on the 'Start' tab can become unresponsive.
The solution is to manually delete the '.tempGallery' folder.
It sounds like this is the problem that you have encountered and deleting the entire 'C:\Users\Username\Documents\JuiceboxBuilder-Pro\' folder has worked for you as it deleted the '.tempGallery' folder (along with some preset files).
The only scenario known to cause this problem is if a gallery is saved to (or opened from) an online synced file-sharing folder such as Google Drive or Dropbox (so the use of online synced file-sharing folder in conjunction with Juicebox-Pro is not recommended).
This is noted as Tip #12 in the Troubleshooting JuiceboxBuilder installation and usage problems forum post.
As long as you set screenMode="AUTO" (AUTO is the default value for screenMode) in JuiceboxBuilder-Pro's 'Customize -> General' section, then Juicebox will determine the best screen mode (SMALL vs LARGE) for the device being used to view the gallery.
Juicebox takes into account the device as well as the screen size when determining which screen mode to use.
Generally, with screenMode="AUTO", Juicebox will use Small Screen Mode on mobile devices (thumbnails and main images displayed on separate pages) and Large Screen Mode in desktop browsers (thumbnails and main images displayed together on the same page).
More information about screen modes can be found in the Gallery Tour.
If you have some unexpected results, then please let me know what you see and what you expect to see and what devices and browsers you use.
If there is a problem, then I might be able to help.
Otherwise, I might at least be able to confirm whether or not what you are seeing is expected behavior.
Thank you.
Can API add galleries or photos to gallery?
Unfortunately not.
The Juicebox-Pro API allows a gallery to interact with its web page. For example, you can add custom buttons to your gallery's web page (outside the gallery) to perform gallery functions (like navigating between images).
The API does not provide a way to automatically generate a gallery or to add images to an existing gallery.
(I should also note that it is not possible to add images to a gallery which is already being displayed. If you were to somehow programmatically add image entries to a gallery's 'confixg.xml' file, then the gallery would need to be reloaded to display the new images.)
I don't think there's an easy way to achieve what you're looking to do.
I think it would be a lot of work and, as far as I am aware, there is no script that you could use as a starting point to save you from writing everything from scratch.
I'm sorry it's not better news but I can't think of anything that might make your task a little easier.
You're welcome!
I'm glad my suggestion worked for you. Thank you for taking the time to post back to let me know. It's most appreciated.
Juicebox uses certain CSS z-index values for gallery elements to ensure that they are stacked in the correct order, for example to ensure that captions are stacked above images (and not obscured behind them).
The solution to your problem is to ensure that the z-index value for your menu system is greater than any used within the gallery itself so that your menu is always stacked above (and displayed on top of) the gallery.
In your web page's 'style.css' file, scroll down to line 71 and change the z-index of .nav-principal li to 9999.
Incidentally, you currently have two different z-index entries in this block (set to 10 and 298).
Just use one z-index entry and set it to 9999.
Your .nav-principal li block should now look like this:
.nav-principal li {
display: inline-block;
margin-right: -4px;
position: relative;
padding: 10px 20px;
font-family: 'Playball', cursive;
color:#fff;
z-index: 9999;
}If you do not see any difference immediately after making the change, then try clearing your browser's cache before reloading your gallery's web page.
This should hopefully resolve your problem.
Please see this forum post entitled "Config file not found." message whilst viewing a gallery locally".
The information within this post should help you to resolve your problem.
(Also, I have sent you an email containing the relevant information.)
You're welcome!
I hope my examples helped and that you'll be able to implement one of them into your own website.
Just let me know if you run into any difficulties and I'll do my best to help you out.
Thank you for posting the link to the forum post.
I don't remember posting that (although, in my defense, it was nearly five years ago)!
Here's an example using the method from the post in conjunction with firstImageIndex (which loads a gallery on the same page as the thumbnails).
It initially loads a gallery (with zero dimensions) to gather an array of thumbnail URLs.
It then displays all the thumbnails and assigns a click handler to each one so that, when a thumbnail is clicked, the gallery will load showing the corresponding main image. (You could, of course, do whatever you like when a thumbnail is clicked.)
As before, to see this example in action, just create a sample gallery with JuiceboxBuilder-Pro, replace the gallery's 'index.html' file with the code below and open the HTML file in a browser.
<!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;
var thumbs = [];
function loadGallery(fii, gh, gw) {
jb = new juicebox({
containerId: "juicebox-container",
firstImageIndex: fii.toString(),
galleryHeight: gh.toString(),
galleryWidth: gw.toString()
});
}
function thumbsFunction(value, index) {
index++;
$('#thumbs-container').append('<img src="' + value + '" alt="thumb" class="thumb" data-index="' + index + '" height="85" style="cursor: pointer; padding: 10px;" width="85" />');
}
$(document).ready(function() {
$('#thumbs-container').on('click', '.thumb', function() {
var index = $(this).attr('data-index');
loadGallery(index, 400, 600);
});
loadGallery(1, 0, 0);
jb.onInitComplete = function() {
var total = jb.getImageCount(), info, thumb;
for (var i = 1; i <= total; i++) {
info = jb.getImageInfo(i);
thumb = info.thumbURL;
thumbs.push(thumb);
}
thumbs.forEach(thumbsFunction);
};
});
</script>
<title>Test</title>
</head>
<body>
<div id="thumbs-container"></div>
<div id="juicebox-container"></div>
</body>
</html>Here's another example using the method from the post in conjunction with enableDirectLinks (which loads a gallery on a different page from the thumbnails).
There is no need for a click handler in this example as regular HTML <a> tags are used to link the thumbnails to their corresponding main images on the gallery page. (Incidentally, I could have just used 'onclick' in the example above but there are many ways to achieve a similar outcome.)
To see this example in action, create a sample gallery with JuiceboxBuilder-Pro, keep the gallery's 'index.html' file intact, create a new HTML file with the code below and open the new HTML file in a browser.
<!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;
var thumbs = [];
function loadGallery(fii, gh, gw) {
jb = new juicebox({
containerId: "juicebox-container",
firstImageIndex: fii.toString(),
galleryHeight: gh.toString(),
galleryWidth: gw.toString()
});
}
function thumbsFunction(value, index) {
index++;
$('#thumbs-container').append('<a href="index.html#' + index + '"><img src="' + value + '" alt="thumb" class="thumb" data-index="' + index + '" height="85" style="cursor: pointer; padding: 10px;" width="85" /></a>');
}
$(document).ready(function() {
loadGallery(1, 0, 0);
jb.onInitComplete = function() {
var total = jb.getImageCount(), info, thumb;
for (var i = 1; i <= total; i++) {
info = jb.getImageInfo(i);
thumb = info.thumbURL;
thumbs.push(thumb);
}
thumbs.forEach(thumbsFunction);
};
});
</script>
<title>Test</title>
</head>
<body>
<div id="thumbs-container"></div>
<div id="juicebox-container"></div>
</body>
</html>I hope these examples point you in the right direction.
I'm not sure where you saw that idea (can you provide a link to the post?) but it sounds quite complicated and my own suggestion above would almost certainly be easier to implement and might work OK for you.
You could certainly create your own index page of thumbnail images (however you like) and then link each thumbnail image to its corresponding main image in a Large Screen Mode gallery (either by passing an index number to be used as a firstImageIndex to a JavaScript function which would load the gallery or by setting enableDirectLinks="TRUE" and using a link to load the gallery page at the corresponding main image).
I'm really not sure how you'd go about doing what you propose, though.
Maybe if I could see the post you are referring to, I'd have a better idea of what you think might be possible, although it sounds like it would involve some manual work (to create an index of thumbnails), whereas my suggestion above is automated and would work for any gallery.
If you are using a Juicebox object to somehow create a list of thumbnails that need to be displayed, then it seems logical to allow Juicebox to display the thumbnails (initially in Small Screen Mode) rather than to manually create an index page (using the data gathered from the Juicebox object).
However, a manual index page (with custom links using either of the firstImageIndex or enableDirectLinks methods) might function more cleanly than my suggestion above (overriding Juicebox's own thumbnail handling).
I still think it might be wroth a shot, though. It should be fairly quick and easy to implement and it might work well enough within your website to not have to go down the more complex and time-intensive manual-coding route.
Related FAQs:
FAQ: When I view my gallery locally, I see the message "Juicebox can not display locally in this browser". Why?
FAQ: When I view my gallery I see the message 'Config file not found'. How do I fix this?
If you receive the "Config file not found." message whilst viewing a gallery locally (from your computer's hard drive rather than from a web server) in Firefox or Safari, then please read on.
Recently, both Firefox and Safari have introduced security restrictions which prevent the loading of local files, resulting in the inability to preview Juicebox galleries from your computer's hard drive.
Because these security restrictions were introduced after the current version of Juicebox was released, Juicebox is unaware of the problem and displays the "Config file not found." message (instead of a more descriptive message).
There are, however, workarounds for the problems in these browsers:
Firefox (68 to 94):
Enter about:config in your Firefox browser's address bar.
Click past the warning via the "I accept the risk!" button.
Enter privacy.file_unique_origin in the search bar.
Double-click the Preference Name to change the Value from 'true' to 'false'.
Firefox (95 or later):
Enter about:config in your Firefox browser's address bar.
Click past the warning via the "Accept the Risk and Continue" button.
Enter security.fileuri.strict_origin_policy in the search bar.
Single click the Toggle button or double-click the Preference Name or Value to change the Value from 'true' to 'false'.
Safari (11 to 15):
Pull down the 'Safari' menu and choose 'Preferences'.
Click on the 'Advanced' tab.
Check the box next to 'Show Develop menu in menu bar'.
Close 'Preferences'. The 'Develop' menu will now be visible between Bookmarks and Window menus.
Pull down the 'Develop' menu and choose 'Disable Local File Restrictions'.
Safari (16 or later)
Go to 'Safari -> Settings'.
Click the 'Advanced' tab.
Select the 'Show features for web developers' checkbox.
Go to the 'Developer' tab.
Select the 'Security: Disable local file restrictions' checkbox.
Screenshots for Safari 16 or later can be found in this forum thread.
Please note that relaxing browser security restrictions should be done at your own risk (but it should be no more of a risk than using the previous versions of the browsers before the security restrictions were introduced).
Incidentally, it is not possible to preview galleries locally in browsers which use the Chromium web engine (Chrome, Edge and Opera). Please use either Firefox or Safari (using the tweak above) to preview galleries locally.
Also, it is important to note that this problem applies only to previewing galleries locally (from your computer's hard drive).
There is no problem once the galleries have been uploaded to a web server where they can be viewed without issue in any modern browser.
An alternative would be to set up a local web server environment on your computer using a program such as MAMP or XAMPP.
This is not as simple as just changing a browser setting but it would allow you to view a gallery locally in any browser you like (without the need to change any browser settings).
I've written short instructions for using XAMPP here.
Juicebox-Pro does what it can to prevent users from easily downloading images but, ultimately, anything that is visible on the internet can be saved.
Right-clicking is disabled within a Juicebox gallery (so a visitor will not be able to save gallery images via the right-click context menu) and you can choose to not display the Open Image Button or the Download Button in a gallery by setting showOpenButton="FALSE" (in the 'Lite' options section) and showDownloadButton="FALSE" (in the 'Button Bar' options section) respectively, as noted in this FAQ:
How do I allow or prevent users from saving gallery images?
Unfortunately, there's nothing you can do to prevent users from taking screenshots of your galleries but, as a deterrent, you might like to watermark your images.
If you create a gallery with JuiceboxBuilder-Pro and use the Watermark functionality, then the chosen watermark image is actually embedded into the main images at the time the images are resized for the gallery, so if a user does find the URL to an image on your web server, the image will be watermarked.
I'd also recommend that you keep your image resolution as low as possible (high enough for web gallery use but too low for other uses such as printing).
This should hopefully discourage visitors from trying to download your images.
Anything more that you do to prevent a user from downloading an image from your web server will more than likely also prevent Juicebox-Pro from displaying it.
Unfortunately, it is not possible for a gallery to switch screen modes after it has been loaded.
A gallery uses only one set of configuration options (e.g. one value for screenMode) which are loaded when the gallery is initially displayed. Configuration options cannot be changed afterwards.
If you want to switch screen modes, then you would need to reload the gallery with the new screenMode value.
For your scenario, you would need to initially load the gallery in Small Screen Mode, override Juicebox's own thumbnail handling and, when a thumbnail is clicked, determine which thumbnail was clicked and reload the gallery in Large Screen Mode passing the correct image for use as the firstImageIndex value (so that the correct image is displayed when the gallery is reloaded in Large Screen Mode).
I have tried to do this myself but it gets very messy very quickly.
There are delay issues (a need to wait for thumbnails to be drawn before overriding their functionality) and the override needs to be performed each time a new thumbnail page is displayed.
I've been unable to get this working cleanly, otherwise I would post some code which you might have been able to use.
I'd recommend just setting screenMode to one of its official values (SMALL, LARGE, AUTO) and letting Juicebox run as intended.
It might not be exactly as you'd like it to be but it'll be a lot less hassle (and doesn't involve manual coding and overriding core Juicebox functionality).
Edit:
Here's the best I've been able to do.
Please note that it is not fully tested and such modifications (which override core Juicebox functionality), whilst you are free to try, are not officially supported. Also, please be aware that there is a short delay (500ms) before the override kicks in. As long as a user does not click a thumbnail within half a second of loading the page (or changing the thumbnail page), everything should hopefully be fine.
To see this example in action, just create a sample gallery with JuiceboxBuilder-Pro, replace the gallery's 'index.html' page with the code below and open the HTML file in a browser.
I hope that you can use this as a starting point and perhaps integrate it into your own web 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 type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb;
function loadGallery(fii, sm) {
jb = new juicebox({
containerId: "juicebox-container",
firstImageIndex: fii.toString(),
screenMode: sm,
showsmallthumbnav: 'TRUE'
});
}
$(document).ready(function() {
loadGallery(-1, 'SMALL');
jb.onThumbPageChange = function() {
var mode = jb.getScreenMode();
if (mode === 'SMALL') {
window.setTimeout(function() {
$('.jb-idx-thumb').off('click');
$('.jb-idx-thumb').click(function() {
var index = $(this).attr('data-position');
var position = parseInt(index, 10);
var fii = position + 1;
loadGallery(fii, 'LARGE');
});
}, 500);
}
};
});
</script>
<title>Test</title>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>It sounds like you might be using the Juicebox plugin for Lightroom (Lightroom has a button labelled 'Export...' unlike JuiceboxBuilder-Pro). If not, then please let me know.
After clicking 'Export', either:
(1) Navigate to the parent folder where you'd like to save your gallery folder to, enter a name for your gallery folder and click 'Save'. The gallery will be saved to this new folder.
... or:
(2) Select an existing folder that you'd like to save your gallery to and click 'Choose Selected'. You will then see an 'Overwrite Confirmation' dialog box and, after agreeing (by clicking 'Proceed'), any existing files within the folder with similar filenames will be overwritten. (There should be no duplicate files with different filenames within the folder.) The gallery will be saved to the selected folder.
(Incidentally, this export procedure is core Lightroom functionality rather than any code specific to the Juicebox plugin.)
I hope this helps to clarify things.
However, if this does not help with your problem, then please let me know and I'll try to help further.
Please let me know what program you are using to create your Juicebox gallery and the names of the files that appear in your gallery folder. Are all gallery files (and/or folders) duplicated (including 'index.html', 'config.xml' and 'jbcore') or just image files? How are the duplicate files named (do they have suffixes such as (1), (2) or _1, _2? Knowing how the duplicate files are named might help to figure out what program is renaming them.
Thank you.
Your solution, to use absolute paths for the baseUrl and themeUrl entries in your gallery's embedding code, makes some sense.
As you suspect, the paths to the 'theme.css' and 'config.xml' files are built dynamically within the 'juicebox.js' JavaScript file (taking into account baseUrl, configURL and themeURL entries from the embedding code if used), rather than just being regular HTML links in the gallery's web page (like the path to the 'juicebox.js' file itself), and the code within the 'juicebox.js' file is obfuscated and cannot be modified by a user.
I'm glad you've found a solution to your problem. Thank you for sharing your troubleshooting steps and findings.
I'll mark this thread as [SOLVED].
Thanks for the response Steven.
You're welcome!
Is it still being actively developed?
Yes! Development is admittedly slow at the moment but Juicebox is still alive and well.
The next version is likely to be a bugfix release (rather than a major release introducing new features) although I do not know when it might be released.
Unfortunately, this bug was first reported after Juicebox v1.5.1 was released and there have been no versions released since then.
As such, this bug has not yet been fixed and is present in the current versions of both JuiceboxBuilder-Lite and JuiceboxBuilder-Pro.
However, it is a known bug that the developers are aware of and it should hopefully be fixed in a future version (although I do not know when this might be).
In the meantime, if your images need to be rotated twice, then I'd recommend doing so in an imaging program (such as Adobe Photoshop) before feeding them to JuiceboxBuilder.
I realise that this will create an extra step in your workflow but, unfortunately, it is unavoidable until the bug is fixed.
I've tried using Chrome's Javascript console to see what is going on, but nothing is shown - is there any way that I can see what the JB code is actually doing?
Try checking the 'Network' tab in your browser's developer tools to see the URLs that are actually being loaded (or attempting to be be loaded).
I was going to suggest that you try explicitly adding a themeURL entry to your gallery's embedding code but, as you already do this, maybe you could try removing it (and allow Juicebox to load the default theme from its default location) to see if this makes a difference. (You might need to reinstate a stock 'jbcore' folder within your gallery to try this.)
If a theme CSS file cannot be found, then the result is usually a blank gallery (like you describe) so it's worth a shot (at least for troubleshooting purposes). (The problem might be the URL to the theme CSS file rather than the URLs to the image files.)
At present, the SE friendly URL re-writing on this site is off - let me know if you want to take a look at the problem, and I'll turn it on, or I'm happy to give you administrator access to the backend of the site, if you wish, so that you can turn it on or off.
I'd really need to see the problem so if you can switch on the URL rewriting that would be great, although I may not be at my computer for a short while so if you'd rather send me (via email) access to your site's backend and instructions on how to switch the URL rewriting on and off, then I'll take a look as soon as I can.
Thank you.
JuiceboxBuilder (both Lite and Pro versions) has the ability to extract IPTC data for use as image titles and captions via the 'Images -> Titles -> Use IPTC Title' and 'Images -> Captions -> Use IPTC Caption' options from the drop-down menu at the top.
If you are entering IPTC data in an Adobe program (such as Lightroom or Photoshop), then the label you'll need to use for the image title is IPTC Document Title and the label you'll need to use for the image caption is IPTC Description.
If you'd like to confirm that your downloaded zip files are not corrupt, then here are filesizes and hashes for the current (v1.5.1.2) Juicebox-Lite and Juicebox-Pro zip files.
Juicebox-Lite:
Name: juicebox_lite_1.5.1.2.zip
Filesize: 1,891,211 bytes
MD5: 7aea2fa3fe11019f0b0bd794c96ce85a
SHA1: 87b5da8cf23ef5b36a003468c8abc6037123166f
SHA256: 3a38333181f38806e18f45604e64fac067525f25c16fb836288160d145a5c7a9
Name: JuiceboxBuilder-Lite.air (v1.5.1.2)
Filesize: 1,386,533 bytes
MD5: c00e6323c08438f3fc069f10199e63f6
SHA1: 81f902352a1c077c653e61d9c46288723995c751
SHA256: 2ba340cbe7cc9824f5324bf6f238b194be17524e4a2cef71a9230d68578414ec
Juicebox-Pro:
Name: juicebox_pro_1.5.1.2.zip
Filesize: 1,907,008 bytes
MD5: 18dcb1666d93a4d24da1e7eff8138470
SHA1: 5b369b377a35293e9cd0055f622acb594eeddc2e
SHA256: 70cacb58d8d45fd347d599e4835d5dfec1c9ee9cf10786f5d7b2219e626acc4a
Name: JuiceboxBuilder-Pro.air (v1.5.1.2)
Filesize: 1,390,776 bytes
MD5: 6714ed9b9790beec4eb46dbe2000a656
SHA1: 0790b8df79efaf6f0b89624884252fd07001149e
SHA256: a26ff24c35c825e316ab7aa509d574dc6585d201da5260ab1df74a020315f591
[Edited 17 November 2023.]
I do not know how Joomla's URL rewriting works but if a URL is rewritten and changed, then it will no longer point towards the same location (and things will break).
Do you have an example of URL within your Juicebox embedding code before and after the rewriting so that I can see what's going on? Thanks!
Two things immediately spring to mind which might help...
(1) Manually change all the paths in your Juicebox embedding code (and the gallery's 'config.xml' file) from relative paths to absolute paths (i.e. paths starting with http:// or https://). A few copy and pastes (or some search and replace actions) in a plain text editor should take care of this.
(2) If the rewriting functionality allows for it (I do not know if you are using a core Joomla feature or a plugin), make an exception for your Juicebox gallery page (within Joomla or the plugin's settings) so that rewriting is not performed on that page.
If you continue to experience difficulties, then please post back with a link to your gallery's web page so that I can see the problem for myself and hopefully help further. Thank you.
(If you do not want to post the link publicly here in the forum, just send em an email. My email address is in the column to the left of this post.)
As Shopify is not a regular web host, they do not provide FTP access to the web space that they provide (which would be required to upload the gallery files) unless you have a Shopify enterprise plan.
This is noted in this Shopify forum thread.
Due to Shopify not providing FTP access to the web space that they provide, you would need to find an alternative host for your Juicebox gallery and then load the gallery into an iframe in your Shopify page following the Embedding in a Web Template Site instructions here.
There are many web hosts that offer free web space which would be suitable for hosting Juicebox galleries. Juicebox galleries do not require any special web server requirements (with the exception of Password Protection and the Download Button which require PHP 5.2.0 or later). Please see the System Requirements for details.
Try a web search with terms such as 'free web hosting' but please bear in mind that with a free hosting account, you may get little or no support, less reliability (more server down-time) and fewer features than with a paid support account.
A couple of free web hosts that I have personally used in the past and that you might like to take a look at are AwardSpace and x10hosting.
Please note that we are not affiliated with these web hosts at all. They are merely suggestions (and not recommendations).
If you do have a Shopify enterprise plan with FTP access, then you should be able to log into your Shopify web space, upload the complete Juicebox gallery folder via FTP (using a dedicated FTP program such as Filezilla) and then embed the gallery into your Shopify page using the baseUrl method of embedding documented here.
The baseUrl method of embedding is essentially the same the regular method of embedding but with a baseUrl entry in the embedding code pointing towards the gallery folder.
I hope my notes above help to clarify things and point you in the right direction.
No problem! I'm glad that everything seems to be working as expected.
Just give me a shout if you see anything odd happening and I'll look into it further.
Thanks!
You're welcome! Your gallery certainly looks fine.
Incidentally, everything seems to be working as expected when I view your gallery in Firefox (on my laptop) and use Responsive Design Mode ('Tools -> Web Developer -> Responsive Design Mode').
At default settings (Screen Dimensions 360px by 740px, Device Pixel Ratio 1), small images are used (checked on the developer tools 'Network' tab).
If I then change the Device Pixel Ratio to 2 (to simulate a retina screen), medium images are used.
Everything seems to be working as expected.
(It's possible that your Chrome browser was simulating a device with a retina screen.)
Just in case you've not yet seen it, the Multi-Size Image Support page can be found here.
Unfortunately, using a browser's developer tools is not always the most accurate way of replicating a particular browsing experience.
Changing the effective screen size might not be enough to emulate a mobile device and trigger a certain image size to be used.
When deciding which image size to use (or more specifically which screen mode to use, which has a bearing on the choice of image size), Juicebox also takes into account the user agent string (used to identify the browser) and the pixel density of the screen (i.e. retina or not).
As noted on the Multi-Size Image Support page, Small images are used when the gallery is displayed in Small Screen Mode on a non-retina screen but Medium images are used when the gallery is displayed in Small Screen Mode on a retina screen.
I have a set of images with 'SMALL', 'MEDIUM' and 'LARGE' text emblazoned across them which I use for testing (so that I can visually determine which image size is being used at a glance without needing to delve into the network report).
I have just checked a Small Screen Mode gallery on my non-retina laptop and small images are being used.
I have also checked an Auto Screen Mode gallery on my retina iPhone and medium images are being used.
Both these results are expected and things seem to be working OK (at least in my own tests).
I hope this helps (at least a little).
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.