You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
The <div> into which the gallery is embedded is placed in your web page above the <table> containing your links.
Move the code:
<div id="juicebox-container"></div>... to below the closing </table> tag in your page.
Incidentally, you have two 'juicebox-container' <div>s on your page next to each other. You can safely delete one of them.
Is there a way to avoid triggering the juicebox.js script too early when using it within a WYSIWYG editor?
You can defer the loading of a JavaScript file until after the page has been parsed by adding the defer="defer" attribute to the <script> tag. However, doing so with the 'juicebox.js' file will break the Juicebox gallery, not only within your editor but also in all browsers.
The problem seems to be with CKEditor's rendering of the page (in that it does not seem to be able to find the 'juicebox-container' <div> which, presumably, is included in your embedding code).
If you are currently using the baseUrl method of embedding, try switching to using an <iframe>, documented as Step #2 here, to see if this makes a difference. Conversely, if you are currently using an <iframe>, try the baseUrl method instead.
If using WordPress, perhaps something like the Google Analytics for WordPress plugin would be a good solution.
Otherwise, try searching the WordPress Plugin Directory with search terms such as 'hit counter' for other suggestions.
A Juicebox gallery's 'index.html' page is just a regular HTML page and you can insert tracking code (for example from Google Analytics, StatCounter or YellowTracker) into the page like you would any other page.
If you are embedding your galleries into existing web pages alongside other content using the recommended embedding code, then insert your tracking code into those pages instead of the gallery 'index.html' pages (which would become redundant).
Try the following as your gallery's 'index.html' page.
In a gallery with 12 images, the URL: index.html?id=12 will display the first image, index.html?id=11 will display the second image, etc. and index.html?id=1 will display the last image.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="This is a Juicebox-Pro Gallery. Get yours at www.juicebox.net" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script src="jbcore/juicebox.js"></script>
<script src="jquery-1.8.1.min.js"></script>
<script type="text/javascript">
var jb, imageCount;
$(document).ready(function () {
jb = new juicebox({
containerId : 'juicebox-container'
});
jb.onInitComplete = function() {
imageCount = jb.getImageCount();
if (location.search) {
var queryString = unescape(location.search), queryArray = {}, re = new RegExp("([^?=&]+)(?:=([^&]*))?", "g"), queryComponent, queryInteger;
while (queryComponent = re.exec(queryString)) {
queryArray[queryComponent[1]] = queryComponent[2];
}
queryInteger = parseInt(queryArray["id"]);
if (!isNaN(queryInteger) && queryInteger > 0 && queryInteger <= imageCount) {
jb.showImage(imageCount - queryInteger + 1);
}
}
};
});
</script>
</head>
<body>
<div id="juicebox-container"></div>
</body>
</html>When I attempt to access the http://www.southerncinema.com/gallery/jbcore/full.html, I gain access and it states "config XML file not found," which was what it stated when I had it working earlier.
You should not access the 'full.html' page directly. (If you do, you will see the 'Juicebox Error: Config XML file not found.' message.) It is used internally by Juicebox when the gallery is displayed fullscreen on mobile devices.
The page you should open in your browser is the HTML document into which you are embedding your galleries.
Taking one of your galleries as an example:
<div id="juicebox-container2">
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : "juicebox-container2",
galleryWidth: "600px",
galleryHeight: "500px",
backgroundColor: "#222222",
baseURL: "gadesign"
});
</script>If your entire gallery is contained in the 'gadesign' folder, then:
(1) The page containing the embedding code (above) should be in the same directory as the 'gadesign' folder.
(2) Your 'gadesign' folder should contain a 'jbcore' folder and the path to the 'juicebox.js' file should be:
<script src="gadesign/jbcore/juicebox.js"></script>(3) There should be a trailing slash in your baseUrl:
baseUrl: 'gadesign/'If you continue to experience difficulties, please post the URL to the HTML page containing the galleries so that I can take a look.
Not at present but the addition of such an API event is on the roadmap and should hopefully be included in a future release.
Reading over the Yola Tutorial Using the File Manager, you will not be able to upload JavaScript files if you are a Yola Bronze user:
Yola Bronze
You have 2GB of storage available per site.
You can upload individual files up to 15MB each.
You are not able to upload .js or .html files.
Even if you are a Yola Silver or Gold user, it looks like the Yola File Manager simply allows you to upload files into a container from which you can then drag and drop individual files into your web page.
It does not seem to allow you to upload a number of files (such as those required for a Juicebox gallery) and have a publicly accessible URL for each one (like web space on a regular web server).
Therefore, it would appear that Yola is an unsuitable host for a Juicbox gallery and you would have to host your Juicebox gallery elsewhere and embed the gallery into your Yola webpage using an <iframe> (documented as Option #2 here).
If you do not have an account with a regular web host which allows you to upload files and folders to web space via FTP, a suitable host for a Juicebox gallery would be Dropbox.
(1) Download and install the Dropbox client program (from this web page)
(2) Create your Juicebox gallery with the method of your choice (e.g. JuiceboxBuilder-Pro)
(3) Drag and drop the entire gallery folder (not just the contents) into the 'Public' folder within the newly created Dropbox folder on your computer
(4) Navigate towards your gallery's 'index.html' file (within 'username/Dropbox/Public/gallery_folder/'), right-click it and select 'Dropbox -> Copy public link'
(5) Embed your gallery in your Yola web page (using Yola's HTML Widget) by inserting an <iframe> whose 'src' attribute points towards the 'index.html' page within your gallery folder (the URL you copied in Step #4 above), e.g.
<iframe src="URL_to_gallery_index_page" width="800" height="600" frameborder="0" scrolling="no"></iframe>I hope you do not mind me asking you to please post feature requests in this forum thread.
It keeps them all together and ensures that they are not overlooked.
Also, other users may see your feature request and be inspired to post saying that they, too, would like such a feature to be included in a future version.
With enough interest, there is more likelihood that a feature would be implemented in a future release.
Thank you.
Adding custom nodes to the XML file may break Juicebox as it will not be expecting new tags or attributes to be introduced.
Even if the new nodes did not break the gallery, they would not be accessible via the Juicebox API as Juicebox would not know anything about them. You would have to parse the XML file manually using DOM techniques to extract the information you require.
One thing I couldn't find is, how are updates to a gallery handled?
Most methods of creating a gallery involve generating the gallery on your computer and then uploading the gallery to your web server via FTP.
Updating a gallery would, therefore, involve editing the gallery on your computer and then uploading the new gallery folder to your web server, replacing the existing one.
An alternative would be to use svManager , a PHP web application which allows you to create, edit and manage images online via a web browser interface.
Another alternative to this would be to use a dynamic method of creating your gallery's XML file (for example using PHP) at the time the gallery is viewed rather than at the time the gallery is created.
For example, you could have a setup whereby Juicebox displays all images in a specified folder (see this post for details).
In order to update the gallery, all you would need to do is upload new images to that folder.
Another question is if there are recursive galleries supported, something like
The Juicebox Skin for jAlbum allows you to create a multiple-gallery album in a single action (and includes support for folders within other folders).
When using the Juicebox skin, you can drag and drop a complete folder structure into jAlbum's main window and click 'Make Album'.
The resulting album will have a separate Juicebox gallery for each and every folder/subfolder in your input structure and all the galleries will be linked together via a JavaScript navigation tree.
Here is a sample album created by jAlbum and the Juicebox Skin.
.jb-caption-title is, indeed, for the <title>. For the <caption>, use:
.jb-caption-desc {
color: #ffffff;
}One method to achieve this might be to reverse the image numbering so that #1 always refers to the first image added to the gallery, which will always be displayed last in your gallery.
You could use JavaScript to get the image number from a query string in the URL, check the total number of images in the gallery using the getImageCount(): int Juicebox API method and then use the showImage( index: int ) method to display the relevant image:
Index Of Image To Be Displayed = Total Image Count - Image Number From URL + 1
Expand the gallery: The onImageChange doesn't fire.
Thank you for reporting.
This is a known bug which has already been logged and will hopefully be fixed in the next version. Unfortunately, I do not know when this will be.
Try adding the Pro Option:
textColor="rgba(255,255,255,1)"... in the WP-Juicebox 'Pro Options' text area of your gallery's settings.
Otherwise, your could add the following code to the end of the 'wp-juicebox/jbcore/classic/theme.css' file:
.jb-caption-title {
color: #ffffff;
}You can also change the color of each caption individually by entering HTML code such as the following into the 'Caption' text fields of your Media Library images:
<span style="color: #ffffff;">Caption Text Goes Here</span>
I think this is due to your unordered list <ul> below the gallery.
All elements of your web page (html, body, 'gallery' div, 'I1' iframe and the gallery itself) have been given heights of 100% so the gallery should fill the browser window (assuming there is no other content on the page).
However, there is an extra element on the page (the <ul>) which takes up height and Mobile Safari is having trouble rendering content which takes up more than 100% of the height of the browser window.
Either give your gallery a fixed pixel height or reduce its height to a smaller percentage and allocate the remainder (100% - gallery height %) to the <ul>.
Sorry. I should have pointed out that the Splash Page and Screen Mode options are Juicebox-Pro options only and are not available to Juicebox-Lite users. Apologies for not making this clear earlier.
Juicebox-Lite galleries use the default values for Pro configuration options (listed on the Config Options page) and, as such, Juicebox-Lite galleries will always display a Splash Page on mobile devices when the gallery is embedded in a web page alongside other content.
On every mobile device I have looked at the gallery on the splash page image is not showing correctly.
The Splash Page image is cropped due to the height of the gallery being less than the height of the Splash Page image.
With this in mind, your Splash Page displays OK on my iPod Touch 4 and should, therefore, also display OK on an iPhone 4S.
The 'full.html' file is still missing from your gallery's 'jbcore' folder.
It should be located here: http://www.southerncinema.com/gallery/jbcore/full.html
... but going directly to that URL in a browser results in an error 404 (file not found).
Try completely deleting the existing 'jbcore' folder from the gallery folder on your web server first and then extract a fresh 'jbcore' folder from your Juicebox-Lite download zip file (to ensure that all files are present and correct) before uploading it to your gallery folder.
Because your gallery is embedded in a web page alongside other content, Juicebox displays a Splash Page in Small Screen Mode as a placeholder where the gallery would otherwise be in Large Screen Mode. When the user clicks the Splash Page, the gallery opens up in a new tab.
When I view your gallery on my iPod Touch 4, the Splash Page is the correct width (displaying the first image in teh gallery as a background image) and when I click on the Splash Page, the gallery opens up in a new tab, filling the available space correctly.
If you do not wish to use a Splash Page, set showSplashPage="NEVER" in your gallery's XML file.
You could change other aspects of the Splash Page via the Splash Page Options.
Alternatively, if you wanted to force the gallery to be displayed in Large Screen Mode on all devices and in all browsers, you could set screenMode="LARGE".
For more information about Screen Modes, please see here.
As an aside, your 'wrapper' <div> does not seem to be closed on your page.
There are 57 opening <div> tags on your page but only 56 closing </div> tags.
I'm glad you have resolved your problem.
Thank you for posting back to let me know and for sharing the link to the Artisteer forum thread as it may help other Artisteer users who face a similar problem.
How do I make the captions not hide. I would like the captions to show at all times. Any way to do this?
This is possible with Juicebox-Pro, but not with Juicebox-Lite, by setting certain Juicebox-Pro Caption Options.
If the captions are positioned on the overlay (as they are by default), then you can have the captions always be displayed by setting the showImageOverlay="ALWAYS".
Alternatively, you could set captionPosition="BELOW_IMAGE" or captionPosition="BOTTOM".
Is there any chance that this may be an customisable option in future versions of Juicebox Pro...?
Please post feature requests in this forum thread.
It keeps them all together and ensures that they are not overlooked.
Also, posting feature requests in the forum may inspire other users to post saying that they, too, would like such a feature to be included in a future version.
With enough interest, there is more likelihood that a feature would be implemented in a future release.
I tried the plugin, but it seem to have that conflict I read about with Contact Form.
There should be no conflict between the current versions of Contact Form 7 (v3.2.1) and WP-Juicebox (v1.1.1).
If you can't tell from just this, let me know and I will make the post visible so it can be seen.
It would certainly help to see the web page into which the gallery is being embedded. Please post the URL so that I can take a look.
In the meantime, the following suggestions may help.
If you have not modified or moved the 'theme.css' file, then there is no need to include the themeUrl in the embedding code.
Also, if your gallery's XML file is named 'config.xml' and is located directly inside your gallery folder, then there is no need to include the configUrl in the embedding code (just leave the baseUrl entry).
For the record, the gallery itself (located at http://www.sikhfoundation.org/wp-conten … index.html) displays fine in Chrome 21 on my PC.
I believe the main image is positioned absolutely within the image area by code within the 'juicebox.js' file.
However, this file is packed an obfuscated and, therefore, cannot be modified.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.