You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
That's a good tip, ukblairs. Thank you.
However, it may not be a suitable solution for all users. PayPal have different policies in different countries and users in certain countries (such as Germany) may need to have a PayPal account in order to pay via Credit Card (and not all users have or want to sign up for a PayPal account which is why we introduced Gumroad as an alternative method of payment).
Unfortunately, there are no startAudio() and stopAudio() methods in the Juicebox-Pro API, just toggleAudio().
Also, there is no Juicebox-Pro API event which is fired when the audio is toggled so that you can keep track of whether the audio is playing or not.
However, you could check the 'title' attribute of the Audio Button (which, unless you change the languageList, will be 'Play Audio' when the audio is paused and 'Pause Audio' when the audio is playing) and then use the Juicebox-Pro API method toggleAudio() to stop the audio only if the 'title' attribute is 'Pause Audio'.
To see an example of this in action, create a sample gallery in JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file (changing the audio URLs as appropriate). Click the 'Stop Audio' button to stop the audio.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<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({
audioUrlMp3: "music.mp3",
audioUrlOgg: "music.ogg",
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600",
showAudioButton: "TRUE"
});
$(document).ready(function() {
$('#stop').click(function() {
var title = $('.jb-bb-btn-audio').first().attr('title');
if (title === 'Pause Audio') {
jb.toggleAudio();
}
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="input">
<input id="stop" type="button" value="Stop Audio" />
</div>
<div id="juicebox-container"></div>
</body>
</html>Please note that my suggestion above uses jQuery. Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if your web page uses any jQuery code at all, I would recommend including a separate jQuery JavaScript file (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).
Have you tried running your gallery's URL through the Facebook debugger yet? https://developers.facebook.com/tools/debug/
Click 'Fetch new scrape information' and see what image Facebook displays for the og:image entry.
I also have another issue with the button bar - it never completely aligns to the center of the image.
Please post the URL to your gallery so that I can take a look at the problem for myself and hopefully help further.
In the meantime, please make sure that you are using the latest version of Juicebox-Pro (v1.4.3) to ensure that any bugs which were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, instructions for upgrading Juicebox-Pro can be found here.
(1) Make sure that you enter the Share URL (in JuiceboxBuilder-Pro's 'Customize -> Sharing' section) as the absolute URL of the gallery, starting with http:// or https:// (e.g. http://www.example.com/gallery/), so that the og:image entry is an absolute URL.
Please see the description of shareURL in the Config Options page for more details.
Alternatively, you could just manually edit the gallery's 'index.html' page and make sure that the og:image entry looks something like this: http://www.example.com/gallery/images/image01.jpg
Also, you may need to clear Facebook's own cache of your gallery's web page by entering your gallery's URL into Facebook's debugger here: https://developers.facebook.com/tools/debug/
(2) Please make sure that you are using the current version of JuiceboxBuilder-Pro (v1.3.6).
If necessary, instructions for upgrading can be found here.
If you enter a Gallery Title (in the 'Lite' section) and a Gallery Description (in the 'General' section) then the Gallery Title will be used for the <title> tag and the og:title and the Gallery Description will be used for the <meta> description and the og:description.
If the Gallery Title is left empty, then the default text 'Juicebox Gallery' is used (for the <title> tag and the og:title).
As long as you enter your own Gallery Title and clear Facebook's cache of your gallery's web page, then the text 'Juicebox Gallery' should not appear.
I'm not sure what logs you are looking at which might suggest that your 'jbcore' files are being stolen but is it possible that what you are seeing is just evidence of browsers downloading the files in order to display the gallery? Ordinarily, browsers will download and cache all resource files in order for a web page to be displayed in full.
You could disable browser caching for your web site (try a web search for 'disable browser caching' for suggestions) which will prevent browsers from storing local copies of your files (they will have to re-download them from the web server each time the web page is loaded) but browsers still need to access and download the core Juicebox files in order to display the gallery. (Please be aware that disabling browser caching has been known to cause flickering when FADE or CROSS_FADE image transition types are used.)
I just thought I'd mention this in case it accounts for what you might be seeing.
So, is there any way to achieve what I asked for in the first post. I.e. on the iPhone it would jump directly into SSM without any splashing and directly show the thumbnails, without two additional clicks, or more precisely taps, on the touchscreen.
Gallery #3 seems to do this (going straight to the thumbnail page without a Splash Page).
gall03 works like Gall01 on PC (LSM), but on iPhone it locks into LSM,
On my iPod Touch, Gallery #3 displays in Small Screen Mode (not Large Screen Mode). Only Small Screen Mode displays the thumbnails and main images on different pages. (Large Screen Mode would display the thumbnails and images on the same page.)
and everything is way too small.
Try scaling your web page for mobile devices by using the following <meta> 'viewport' tag in the <head> section of your page (rather than the one you currently use):
<meta name="viewport" content="width=device-width, initial-scale=1">The 6 Plus has a Full HD screen, way bigger than the SSM 1024x768 threshold, but Juicebox went into SSM.
Juicebox takes into account the device itself as well as the screen size when deciding which Screen Mode to use. It is not possible to change the internal logic which determines the Screen Mode but you can force a certain Screen Mode to be used via the screenMode configuration option (although I understand that you do not want to do this).
What also happened, was that there was no way to hide Safari's own top and bottom bars
Apple removed 'minimal-ui' from iOS 8 (which was used to remove the bars from the screen in previous versions of iOS).
Your web page still includes 'minimal-ui' (in the <meta> 'viewport' tag) which is why the bars still disappear on devices running versions of IOS prior to 8 (but not on the iPhone 6 Plus which I expect is running iOS 8).
Is it necessary to create the small images at all? My iPhone has a 960x640 display, and does not use the small pics for anything.
This is entirely up to the author of the gallery to decide and might be somewhat dependent on the target audience for your web site. For example, if it is highly likely that visitors to your web site will be viewing your web pages on large desktop monitors (rather than small mobile devices), then you could perhaps get away with not having to provide small images in your galleries.
Incidentally, as you switch between galleries using links in a header, you might like to take a look at the Using a Resizable Gallery with a Header support section.
The View Resizable Gallery with Top Menu Example uses a header with links to different galleries (like your web pages do) and the remainder of the browser window space is used for the galleries without the need for any vertical scroll bars (which your web pages currently use).
You could view the source of the demo web pages in a browser and copy/modify them to suit your own needs.
Unfortunately, any files that are uploaded for use on the internet (ie. files that can be publicly accessed by a browser) can be downloaded. The 'jbcore' folder must remain unmodified (with regard to structure and filenames) so it is not possible to rename the core files and spread them out strategically throughout your web site to make life more difficult for others to download.
You could try hotlink protecting your 'jbcore' files (to prevent direct access from sites other than your own).
You should be able to achieve this using rewrite rules in an .htaccess file or via your web hosting account's online CPanel.
Try a web search with terms such as 'hotlink protect resource files' for more information.
If you have evidence of anyone of stealing and using your Juicebox-Pro files, then please let us know at contact@juicebox.net.
Thank you.
JuiceboxBuilder-Pro and the Juicebox-Pro Lightroom plugin are similar in that they both have individual controls for all Pro configuration options and they both have a live preview window which displays the gallery as the options are being changed.
However, JuiceboxBuilder-Pro has some additional features that are not found in any plugin.
JuiceboxBuilder-Pro has the ability to open and edit an existing gallery (whether it was created with JuiceboxBuilder-Pro or the Lightroom plugin).
Also, JuiceboxBuilder-Pro has Multi-Size Image Support. (The Lightroom plugin is unable to export multiple different sizes of images at once so does not feature this functionality.)
It is also easier to input custom image titles and captions using JuiceboxBuilder-Pro (on the 'Images' tab) but the Lightroom plugin allows the extraction of more EXIF and IPTC metadata fields (for use as titles and captions) than JuiceboxBuilder-Pro does.
There may be a few other subtle differences but these are the main points.
More information about JuiceboxBuilder can be found in the following links:
JuiceboxBuilder Tour: http://www.juicebox.net/tour/juiceboxbuilder/
JuiceboxBuilder User Guide: http://www.juicebox.net/support/juiceboxbuilder/
The Lightroom plugin's support page can be found here:
Lightroom Plugin: http://www.juicebox.net/support/lightroom/
When you click 'Buy with Credit Card' (the alternative to purchasing with PayPal), the transaction is processed by Gumroad and they accept American Express so, ideally, you should not be experiencing any problems.
Please see this Gumroad help page which deals with the query "Why did my payment fail?" and offers suggestions of help.
https://help.gumroad.com/customer/porta … ment-fail-
Hopefully this will help.
Please post the URL to your gallery so that I can take a look and help further.
Thank you.
(Also, please make sure that your gallery does not set screenMode="LARGE" which would force the gallery to be displayed in Large Screen Mode on all devices and in all browsers.)
In Juicebox Lite Embedded is responsive Or not?
There are essentially two ways to make a Juicebox gallery responsive (with its dimensions dynamically changing with the size of the user's browser window).
Scenario #1:
A Juicebox gallery will be responsive (and will dynamically scale with the size of the user's browser window) if the gallery's own dimensions and the dimensions of all parent containers are expressed as percentages. If there is a fixed value anywhere up the chain, then the gallery's size will become fixed (e.g. 100% x 100% x 800px = 800px).
Please note that when using percentage heights, you may need to implement the suggestion noted here.
Scenario #2:
You could use JavaScript to listen for a change in the size of the user's browser window and assign new dimensions to the Juicebox gallery if and when this happens.
An example of this can be found in the resizable galleries support section here.
Take a look at the source of this sample gallery in your browser to see how this might be achieved.
Both scenarios above apply equally to Juicebox-Lite and Juicebox-Pro.
and how to remove dropshadow effect in thumbnail?
Set thumbShadowBlur="0" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section).
Please note that this is a Pro configuration option which is not supported by Juicebox-Lite (the free version).
Now when I enter this gallery with my iPhone 4S, I first land on an LSM page displaying the first pic, and some unreadable small text in the downleft corner.
What you are describing sounds like the Splash Page.
The Splash Page is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a page alongside other content (rather than displayed on a page of its own with dimensions of 100% x 100%, filling the browser window).
When the user taps the Splash Page, the gallery is expanded to fill the user's browser window.
For more information about the Splash Page and how Juicebox adapts to different devices and screen sizes, please see here.
You can choose to not use the Splash Page by setting showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Alternatively, you can force the gallery to be displayed in Large Screen Mode (which, by default, does not use the Splash Page) on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').
If you choose to continue to use the Splash Page, you can customize it using the Splash Page configuration options.
I'm glad your problem has been resolved.
Thank you for posting back to let me know.
All you need to do is start your backButtonUrl with 'http://' and the entry will be treated as an absolute path.
Change:
backButtonUrl="www.yosemitecollection.com"... to:
backButtonUrl="http://www.yosemitecollection.com"If the backButtonUrl does not start with either 'http://' or 'https://', then the entry is treated as a relative path (relative to the HTML page containing the gallery's embedding code).
Setting your backButtonUrl to 'http://www.yosemitecollection.com' should solve your problem.
@wspollack
These default values (644 and 755) look to be fine and should not produce a forbidden 403 error.
@dmeriwether
I hope that you and your web host are able to resolve the issue on your web server.
Your gallery seems to display and function fine for me at the moment.
It looks like you might have solved your problem (or perhaps there was a temporary glitch with either your web server or internet connection which was contributing to your problem).
If you currently cannot see the gallery on your web page, try clearing your browser's cache before reloading your web page to see if this makes a difference.
If you continue to experience difficulties, then please let me know and I'll try to help further.
Bluehost suggests I return to Juicebox to have you examine the link in the gallery html call to config.xml. Where is this call? How can I help you verify it is correct?
In the gallery's embedding code (in the HTML web page which contains the gallery), Juicebox can use a configUrl (to point towards a specific XML file) or a baseUrl (to point towards a specific gallery folder). If neither a configUrl nor a baseUrl are used, then Juicebox, by default, will look for a file named 'config.xml' within the same directory as the HTML web page which contains the gallery.
However, the problem is not with Juicebox but with direct access to the 'config.xml' file on your web server.
When you open the 'config.xml' file (http://morethansnapshots.com/LRGallerie … config.xml) directly in a browser (taking Juicebox out of the equation), you should see the contents of the file (like when viewing this sample 'config.xml' file directly in a browser). However, in your case, you see an error 403 (forbidden) message. It is incidental that the 'config.xml' file in question happens to be part of a Juicebox gallery.
Please ask your web host specifically why your http://morethansnapshots.com/LRGallerie … config.xml file is not publicly accessible and why trying to access it directly in a browser results in an error 403 (forbidden) message. This is certainly the root of the problem.
In the meantime, try deleting the 'config.xml' file from your web server and re-upload it (and double-check its permissions afterwards) in case something happened during the initial upload which resulted in a corrupt file which might somehow be contributing to your problem.
It may still be possible to open images with a lightbox script other than Shadowbox but Shadowbox made it easy by allowing its lightbox to be opened via a custom JavaScript call.
If you are still interested in using Shadowbox, then you should be able to download the files from the GitHub page here: https://github.com/mjackson/shadowbox
Try installing another AIR application from a different source/author to see if this installs correctly or fails.
There are some sample AIR applications on this Adobe page: http://www.adobe.com/devnet/air/samples_javascript.html
This should tell us if there is an underlying problem with Adobe AIR on your system or if the problem is isolated to JuiceboxBuilder-Lite on your system.
If you are unable to install any AIR applications, then perhaps searching through and posting in the Adobe AIR forum might prove useful: https://forums.adobe.com/community/air
If you can install other AIR applications but JuiceboxBuilder-Lite fails to install, then please double-check that all JuiceboxBuilder-Lite files (from any failed installs) have been deleted from your system before reattempting the installation.
Make sure that none of the following folders exist:
C:\Program Files (x86)\JuiceboxBuilder-Lite
C:\Users\Username\AppData\Roaming\Adobe\AIR\ELS\JuiceboxBuilder-Lite
C:\Users\Username\AppData\Roaming\JuiceboxBuilder-Lite
C:\Users\Username\Documents\JuiceboxBuilder-Lite
You may need to show hidden files to find some of the above locations in Windows Explorer.
Then, search your hard drive for the term 'JuiceboxBuilder' and delete any and all entries found.
Adobe released AIR v17.0 on 12 March 2015 so you might like to try updating AIR (if you have not already done so) to see if this makes a difference.
Also, have you tried creating a new User Account and installing JuiceboxBuilder-Pro under the new account to see if this works?
It should certainly be possible to load a Juicebox gallery into a lightbox as long as the lightbox script in question supports displaying HTML pages (rather than just images) as a Juicebox gallery needs to be embedded in an HTML web page.
As far as I am aware, Lightbox does not support displaying HTML pages.
An alternative to Shadowbox for this purpose would be SimpleModal.
To see an example in action, create a sample gallery with JuiceboxBuilder-Pro, use the following code for the gallery's 'index.html' file and include the jQuery and SimpleModal JavaScript files in your gallery folder.
Then, open the 'index.html' page in a browser and click the 'Gallery' button to open the gallery in a SimpleModal overlay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<style type="text/css">
body {
margin: 0px;
}
#juicebox-container {
display: none;
}
.simplemodal-wrap {
overflow: hidden !important;
}
#simplemodal-container {
background-color: #333333;
border: 8px solid #444444;
height: 400px;
padding: 12px;
width: 600px;
}
#simplemodal-container a.modalCloseImg {
background: url('simplemodal/x.png') no-repeat;
cursor: pointer;
display: inline;
height: 29px;
position: absolute;
right: -16px;
top: -15px;
width: 25px;
z-index: 3200;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="jquery.simplemodal.js"></script>
<script>
$(document).ready(function() {
$('#link').click(function() {
$('#juicebox-container').modal({
onClose: function (dialog) {
dialog.data.fadeOut('slow', function() {
dialog.container.hide('slow', function() {
dialog.overlay.fadeOut('slow', function() {
$.modal.close();
});
});
});
},
onOpen: function (dialog) {
dialog.overlay.fadeIn('slow', function() {
dialog.data.hide();
dialog.container.show('slow', function() {
dialog.data.fadeIn('slow');
new juicebox({
containerId: "juicebox-container",
galleryHeight: "100%",
galleryWidth: "100%"
});
});
});
},
overlayCss: {
backgroundColor: "rgba(0,0,0,0.5)"
}
});
return false;
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="header">
<input type="button" id="link" value="Gallery" />
</div>
<div id="juicebox-container"></div>
<div id="footer">
<span>Other content</span>
</div>
</body>
</html>If you want to open an image from within a gallery in a lightbox script, then this would be more complex and I have only had success doing so with Shadowbox (as noted in my posts above).
Perhaps other users have tried this with other lightbox scripts and can help out further.
I'm glad my suggestion worked.
Thank you for posting back to let me know.
Out of interest, what version of Windows are you using?
Is there anything out of the ordinary about your setup?
Do you use multiple hard drives? If you do, then try to ensure that both Adobe AIR and JuiceboxBuilder-Lite are installed on the same drive (the drive containing your operating system).
Also, try creating a fresh Admin User Account and try installing JuiceboxBuilder-Pro under the new account, just in case there is something wrong with your current user profile which is contributing to your problem.
The imageScaleMode values will change how the image is scaled within the gallery's image area.
Images will not be cropped if imageScaleMode is set to either SCALE or SCALE_DOWN.
However, imageScaleMode will not affect the responsiveness of the gallery itself.
If you want the gallery's size (and therefore the image area within the gallery, too) to resize with the size and shape of the user's browser window, then you could either:
(1) Set your gallery's dimensions to be percentages (rather than fixed pixel values) and ensure that all your gallery's parent containers also have percentage dimensions. If there is any fixed pixel value anywhere up the chain, then the gallery's size will become fixed, e.g. 100% x 100% x 800px = 800px.
(2) Use JavaScript to listen for a change in the size of the user's browser window, determine new dimensions for the gallery and assign them to the gallery's container. There are examples of this technique in the Using a Resizable Gallery with a Header support section. You could view the source of the sample web pages in your browser and copy or modify the code as required.
I hope this helps.
You currently have WP-Juicebox installed and activated.
The plugin is loading the 'juicebox.js' v1.4.1 file into the <head> section of your page and your manual embedding code loads the 'juicebox.js' v1.4.3.2 file into your page. The two different versions of the 'juicebox.js' file may be conflicting with each other.
When embedding a gallery manually into a WordPress page or post using the baseUrl method, it is not necessary to have WP-Juicebox installed and activated at all so try deactivating the plugin to see if this help.
All you need to do to upgrade a Lite gallery to Pro is swap your gallery's existing Lite 'jbcore' (on your web server) with the Pro 'jbcore' folder from the Juicebox-Pro download zip package ('juicebox_pro_1.4.3.2/web/jbcore/').
(Alternatively, you could open the Lite gallery in JuiceboxBuilder-Pro and save it on the 'Publish' tab.)
Full instructions for upgrading can be found here.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.