Thank you for clarifying your request.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Thank you for clarifying your request.
Juicebox-Pro does not support videos.
Please see this FAQ: Will Juicebox load things other than images?
The only way to split the thumbnails and images onto separate pages is to use Small Screen Mode.
As I mentioned above:
The separate thumbnails and main image screens are unique to Small Screen Mode.
In Large Screen Mode, the thumbnails and main image are always displayed together on the same screen
In my other post here, I was trying to say that if it were possible to split the thumbnails and images onto separate pages in Large Screen Mode (which it is not), then the result would essentially be Small Screen Mode and you can use Small Screen Mode to achieve the result you are looking for (separate thumbnail and main image pages) by setting screenMode="SMALL".
With regard to the problem navigating between thumbnail pages in Small Screen Mode in desktop browsers when showImageNav="FALSE", I have now logged a bug report with the developers and this should be fixed in the next version of Juicebox-Pro. (Keyboard controls should allow the user to navigate between thumbnail pages when showImageNav="FALSE".)
In the meantime, the workaround would be to set showImageNav="TRUE".
@ryan
As far as I am aware, there are no plans to introduce the ability to allow users to define multiple image sources for a Juicebox gallery.
However, thank you for your suggestions.
@gfs
If you split the Large Screen Mode's display (of thumbnails and main imags on the same page) into separate thumbnail and main image pages, then that essentially is Small Screen Mode (and you can force Small Screen Mode by setting screenMode="SMALL").
Could you perhaps be more specific about what you are looking to achieve (if neither Small Screen Mode nor Large Screen Mode give you the result you are looking for)? Thank you.
The separate thumbnails and main image screens are unique to Small Screen Mode.
In Large Screen Mode, the thumbnails and main image are always displayed together on the same screen (though you can position and arrange the thumbnails using the available thumbnail configuration options).
You would need to set showImageNav="TRUE". Setting showImageNav="FALSE" (as your gallery currently does) hides the navigation arrows on the thumbnail and main image pages.
I will notify the developers that there is currently no way to navigate through thumbnail pages in Small Screen Mode in desktop browsers when showImageNav="FALSE".
Thank you for pointing this out.
Create a Juicebox Gallery page, upload your images on the 'Upload' tab, then go to the 'Images' tab and deselect the checkboxes in the '_blank' column. This will change the linkTarget from the default value of '_blank' to '_self' and the links will be opened in the same (rather than a new) browser window.
This functionality was introduced in Showkase v1.1.0. For a list of changes, please see the Version History.
If you want to force Juicebox-Pro to display your gallery in Small Screen Mode in desktop browsers (to allow users to browse through pages of thumbnails on all devices and in all browsers), set screenMode="SMALL" (in JuiceboxBuilder-Pro's 'Customize -> General' section).
In Small Screen Mode, the number of thumbnails displayed depends on the space available in the user's browser window.
If there is not enough space to display all the thumbnails in the gallery on a single page, thumbnail navigation arrows are displayed to allow users to navigate back and forth through the pages of thumbnails.
If you do not see these thumbnail navigation arrows in your own gallery, please post the URL to your gallery so that I can take a look.
You can introduce a space around the entire gallery (which will separate the thumbnails from the edge of the browser window) by increasing the value of the stageBorder configuration option (in JuiceboxBuilder-Pro's 'Customize-> General' section).
Increasing the thumbPadding will also separate the thumbnails from the edge of the browser window (but will increase the space around all the thumbnails which you may not want).
Set showImageNumber="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Caption' section) to show the image numbers.
To remove all other image titles and captions, go to 'Images -> Titles -> Use None' and 'Images -> Captions -> Use None' from the drop-down menu at the top.
The image numbers (which form part of the caption) can be positioned using the captionPosition configuration option.
Check that your image filenames use only web-safe characters (uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde) and not other characters such as commas or apostrophes.
If you have manually deleted any images or modified the gallery's XML file outside JuiceboxBuilder, open the 'config.xml' file in a plain text editor and check that each <image> entry corresponds to a file in the 'images' folder.
If neither of the above suggestions help, please post the URL to your gallery so that I can take a look and help further.
I do have a follow-up question on how to display "all" tagged photos in my flickr photostream in my gallery as that will be the default view of her portfolio.
If all of your images are tagged, then you can display all your images by just using flickrUserName="username" (and not using the flickrTags option).
If only some of your images are tagged and you want to display only the tagged images, then set flickrTagMode="ANY" and include all your tags in a comma-separated list using the flickrTags option, e.g. flickrTags="tag1, tag2, tag3".
Or should I just create a tag named "all" and assign it to every photo?
That will work, too.
For reference, descriptions of the 'Flickr Pro Options' can be found here.
The color of the Button Bar icons can be set via the buttonBarBackColor, buttonBarIconColor and buttonBarIconHoverColor configuration options (descriptions of which can be found in the Color Options section of the Config Options page.
I'm not sure if I should create a new page with a new gallery for each room
This would certainly be the easiest approach and would be the only solution which could be achieved with WP-Juicebox (the Juicebox plugin for WordPress).
(You could still use Flickr tags for each gallery.)
or if I can create one gallery and use some javascript in the links to have the gallery reload showing only certain photos with those tags
This would certainly be possible but might be difficult to achieve in a WordPress environment (and it would not be possible with WP-Juicebox).
Here is an example of how it could be achieved using a sample gallery's 'index.html' file as a template. (The loadGallery function's parameter is the actual Flickr tag you would like to use for each gallery.)
You could manually upload your gallery files to your web server and copy and paste the relevant code from below into a WordPress page or post (modifying it as required to suit your needs).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script src="jbcore/juicebox.js"></script>
<script type="text/javascript">
function loadGallery(tags) {
new juicebox({
galleryWidth: '800',
galleryHeight: '600',
containerId: 'juicebox-container',
useFlickr: 'true',
flickrUserName: 'your_flickr_user_name',
flickrTags: tags
});
}
$(document).ready(function() {
loadGallery('tag1');
});
</script>
</head>
<body>
<div id="juicebox-container"></div>
<div id="links">
<a href="#" onclick="javascript: loadGallery('tag1'); return false;">Tag 1</a>
<a href="#" onclick="javascript: loadGallery('tag2'); return false;">Tag 2</a>
<a href="#" onclick="javascript: loadGallery('tag3'); return false;">Tag 3</a>
</div>
</body>
</html>If you want to update an existing gallery on your web server, you just need to replace the original gallery files with your modified ones.
If the typo you noticed is in a title or caption, then you need only replace the 'config.xml' file.
If you are in any doubt as to whether or not the original gallery files are being overwritten with your new versions, try deleting the original gallery files from your web server first before uploading the new files in their place.
After uploading the new files to your web server, you may need to clear your browser's cache before reloading the gallery to ensure that your browser is not hanging onto and using older versions of your gallery files.
I'd like to put a Pintrest button centered below the large portfolio image instead of having it appear top right.
The Pinterest button is part of the Button Bar which can be positioned using the buttonBar configuration option (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section). Possible values for this option can be found in the description of the option here. (The Button Bar cannot be positioned below the main image and the Pinterest button cannot be separated from the Button Bar.)
I'd also like to change the button itself to be a different one.
You can change the icons used in the gallery by following the Using Custom Icons instructions in the Theming support section.
I have gone with a setting of Max image Size of 1024x768 and let it resize my images down from the larger files I have started with.
This sounds ideal. When creating a gallery with JuiceboxBuilder-Pro using the default settings (of 1024px x 768px at 80% quality), the resulting images will be approximately 120KB each.
This is usually a good compromise between file size and image quality for web gallery use.
By doing so isn't it discarding any excessive resolution that is not needed to support more than that?
That is correct.
Is there anything that should be done to assist with faster download times without sacrificing too much visual quality?
The default settings usually work well for most images (and it sounds like you are happy with your own results) but you may want to tweak the quality setting (on JuiceboxBuilder-Pro's 'Images -> Image Size -> Change...' section) if your resized images do not look visually pleasing.
You could also try changing the imagePreloading configuration option (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) from the default value of 'PAGE' to either 'NEXT' or 'NONE' to prevent the browser from initially caching all the main images on the first thumbnail page. This should speed up the initial loading of your gallery if it seems slow.
However, if your gallery loads quite quickly already, you may not need to do this and keeping imagePreloading="PAGE" may be beneficial.
It sounds like a temporary glitch with either your web host or internet connection may have contributed to a timeout when Juicebox was fetching the XML file from your web server.
Your gallery displayed OK when I viewed it just now.
Try upgrading your gallery from Juicebox-Pro v1.1.1 to the current version (v1.3.2) as many bugs have been fixed since v1.1.1. Please see the Version History for a full list of changes.
For details on how to get the latest version and instructions on how to upgrade existing versions, please see the Upgrading Juicebox page.
Incidentally, I notice that some your gallery's images are rather large. (Some are over 1.5MB each.)
Try reducing the file size of your images and they should load faster in your gallery.
When creating a gallery with JuiceboxBuilder-Pro using the default settings (of 1024px x 768px at 80% quality), the resulting images will be approximately 120KB each.
This is usually a good compromise between file size and image quality for web gallery use.
Where do I put the code?
Just replace your gallery's current embedding code in the 'index.html' file (or whatever HTML file you have embedded your gallery in) with the code above (and rename your audio files as I noted above and place them in your gallery folder alongside the HTML file).
at the top of the config.xml file?
The only modification you should make to the XML file is to remove the audioUrlMp3 and audioUrlOgg entries as they are now being set (randomly) in the embedding code.
Loading each gallery when each new tab is selected should work fine.
Try the following as your 'sample.html' file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="css/jquery-ui-1.8.22.custom.css" />
<link rel="stylesheet" href="css/peracon_main.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="preceremony/jbcore/juicebox.js"></script>
<script>
$(function() {
/* $("#tabs").tabs(); */
$("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix");
});
function loadGallery(container, base) {
new juicebox({
containerId : container,
baseUrl : base,
galleryWidth: "760",
galleryHeight: "380",
backgroundColor: "rgba(255,255,255,1)"
});
}
$(document).ready(function() {
loadGallery('juicebox-container1', 'preceremony/');
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1" onclick="javascript: loadGallery('juicebox-container1', 'preceremony/'); return true;">Preceremony</a></li>
<li><a href="#tabs-2" onclick="javascript: loadGallery('juicebox-container2', 'ceremony/'); return true;">Ceremony</a></li>
<li><a href="#tabs-3" onclick="javascript: loadGallery('juicebox-container3', 'locations/'); return true;">Locations</a></li>
<li><a href="#tabs-4" onclick="javascript: loadGallery('juicebox-container4', 'reception/'); return true;">Reception</a></li>
</ul>
<div id="tabs-1">
<br />
<div id="juicebox-container1"></div>
</div>
<div id="tabs-2">
<br />
<div id="juicebox-container2"></div>
</div>
<div id="tabs-3">
<br />
<div id="juicebox-container3"></div>
</div>
<div id="tabs-4">
<br />
<div id="juicebox-container4"></div>
</div>
</div>
</body>
</html>First of all, please check that you are using the most recent version of Juicebox-Pro (v1.3.2) to ensure that any bugs that were present in previous versions but which have since been fixed are not contributing to your problem.
If necessary, please see the Upgrading Juicebox page for details.
Also, you can check the validity of your web page's code with the W3C Markup Validation Service and fix any HTML errors reported.
Do the first images in the galleries display if you select different images in the gallery and then go back?
If not, then double-check the paths to the first images in each gallery and make sure that the images themselves have been uploaded to the correct locations on your web server.
If the suggestions above do not help, please post the URL to your web page so that I can take a look.
You could try incorporating the solution found in this forum thread into the web page containing your gallery.
This Android Developers Blog page also describes how the default behavior of the long press can be overridden.
To help prevent unauthorized use of your images, you may like to watermark your images (a feature found on the 'Images' tab of JuiceboxBuilder-Pro) as, no matter what precautions you take, you cannot prevent users from taking a screenshot of your gallery.
Also, I would recommend keeping the file size and quality of your images to a level suitable for web gallery use but not high enough for other uses such as printing.
Yes. Do the same for the path to the 'juicebox.js' file.
Change:
<script src="http://www.fastlanetravel.com/flt-gallery/jbcore/juicebox.js"></script>... to:
<script src="/flt-gallery/jbcore/juicebox.js"></script>For now I would like to try the full version Full Browser but don't see how to accomplish this.
I did not notice in the Load Presets the drop down. Is this the only way to do this?
'Full Browser' (rather than 'Embedded') just refers to the size of the gallery being 100% x 100% (taking up the bull browser window by itself). You can set the gallery's dimensions to 100% x 100% (no matter what preset you load from the drop-down menu) in JuiceboxBuilder-Pro's 'Customize -> Lite' section.
After creating a 100% x 100% gallery, just open the gallery's 'index.html' page in a browser to view the gallery on a page of its own taking up the entire browser window.
If you were to embed the gallery in an existing web page alongside other content, then you could allow users to view the gallery fullscreen by setting showExpandButton="TRUE". On clicking the Expand Button on the Button Bar, the gallery will expand to fill the browser window.
I see, I need to link the menu item to the JB gallery page and then add the index.html URL to the home button. Perfect!
Yes. That will work fine.
Everything is great except the home button doesn't show on my phone.
Set showSmallBackButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Back Button' section) to show the Back Button in Small Screen Mode (which is used by Juicebox to display the gallery on small screen devices).
For more information about how Juicebox adapts to different devices and screen sizes, please see here.
Your gallery uses a baseUrl of http://www.fastlanetravel.com/flt-gallery/ but you quoted your web site address as http://fastlanetravel.com/flt-gallery.php (note the use of the 'www' subdomain in the baseUrl).
Your gallery will display fine if you visit your web page using the 'www' subdomain: http://www.fastlanetravel.com/flt-gallery.php
All the Juicebox gallery files must be on the same domain or subdomain as the JavaScript embedding code due to the same-origin policy. Please see this web page for further information.
Changing your baseUrl to use a leading slash to denote your root directory (rather than using an absolute URL with the 'www' subdomain) will work for both fastlanetravel.com and www.fastlanetravel.com.
baseUrl : '/flt-gallery/',Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.