This bug has now been fixed in v1.4.1. Please see the Upgrading Juicebox support page for details.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
This bug has now been fixed in v1.4.1. Please see the Upgrading Juicebox support page for details.
This bug has now been fixed in v1.4.1. Please see the Upgrading Juicebox support page for details.
@Blumzue
If you follow the steps in the Using Custom Icons support section, you should find a suitable email icon in the 'IcoMoon - Free' library (there is an 'envelope' icon) which you can use to replace the 'Open Image' icon.
In order to upgrade JuiceboxBuilder-Pro, it is necessary to first uninstall any existing version.
Please try the tips in the Installation Issues section of the JuiceboxBuilder User Guide.
Hopefully this will help.
Set screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section) rather than using its default value of AUTO and the gallery will be displayed in Large Screen Mode on all devices and in all browsers (with the thumbnails and main images displayed on the same page).
For more information about Juicebox and Screen Modes, please see the Screen Modes support section.
Please note that screenMode is a Juicebox-Pro only configuration options which is not available in Juicebox-Lite.
Implementing the above (to have a lightbox open to display an image when it is clicked) into galleries created by WP-Juicebox can be done but would require quite a bit of work as the plugin does not have any built-in lightbox-style functionality, does not have interface support for linkURL or linkTarget and the embedding code that the plugin provides would have to be modified to include the custom JavaScript code required.
(1) Install and activate WP-Juicebox.
(2) Upgrade WP-Juicebox to Juicebox-Pro following the instructions here (required for setting imageClickMode="OPEN_URL" and for using the Juicebox-Pro API).
(3) Install and activate the Shadowbox JS plugin (and download the Shadowbox source files from within the plugin's settings page).
(4) Open the 'wp-juicebox/config.php' file in a plain text editor and change all three instances (on lines 47, 74 and 98) of:
$image_element->setAttribute('linkURL', $image_url);
... to:
$image_element->setAttribute('linkURL', 'javascript: func();');
(5) Also, in the same file, change all three instances (on lines 48, 75 and 99) of:
$image_element->setAttribute('linkTarget', '_blank');
... to:
$image_element->setAttribute('linkTarget', '_self');
(6) Open the 'wp-juicebox/wp-juicebox.php' file in a plain text editor and change lines 240-251 (the $string_builder section) to the following:
$string_builder = '<!--START JUICEBOX EMBED-->' . PHP_EOL;
$string_builder .= '<script type="text/javascript">' . PHP_EOL;
$string_builder .= ' var jb;' . PHP_EOL;
$string_builder .= ' jQuery(document).ready(function () {' . PHP_EOL;
$string_builder .= ' jb = new juicebox({' . PHP_EOL;
$string_builder .= ' backgroundColor: "' . $background_color . '",' . PHP_EOL;
$string_builder .= ' configUrl: "' . $config_url . '",' . PHP_EOL;
$string_builder .= ' containerId: "juicebox-container-' . $gallery_id . '",' . PHP_EOL;
$string_builder .= ' galleryHeight: "' . $gallery_height . '",' . PHP_EOL;
$string_builder .= ' galleryWidth: "' . $gallery_width . '"' . PHP_EOL;
$string_builder .= ' });' . PHP_EOL;
$string_builder .= ' });' . PHP_EOL;
$string_builder .= ' function func() {' . PHP_EOL;
$string_builder .= ' var index = jb.getImageIndex();' . PHP_EOL;
$string_builder .= ' var info = jb.getImageInfo(index);' . PHP_EOL;
$string_builder .= ' var url = info.imageURL;' . PHP_EOL;
$string_builder .= ' var title = info.title;' . PHP_EOL;
$string_builder .= ' Shadowbox.open({' . PHP_EOL;
$string_builder .= ' content: url,' . PHP_EOL;
$string_builder .= ' player: "img",' . PHP_EOL;
$string_builder .= ' title: title' . PHP_EOL;
$string_builder .= ' });' . PHP_EOL;
$string_builder .= ' }' . PHP_EOL;
$string_builder .= '</script>' . PHP_EOL;
$string_builder .= '<div id="juicebox-container-' . $gallery_id . '"></div>' . PHP_EOL;
$string_builder .= '<!--END JUICEBOX EMBED-->' . PHP_EOL;
(7) Enter imageClickMode="OPEN_URL" in the Pro Options text area of your gallery's settings window.
Please note that the procedure above has not been tested extensively and I cannot vouch for the robustness of the solution or the stability of WP-Juicebox itself after making these modifications.
However, I hope it help and at least points you in the right direction.
[The line numbers above refer to the current version of WP-Juicebox (v1.4.0.1).]
Sorry about that. I am glad that you were able to find the correct file to modify.
I have now corrected my post above.
When using a Picasa Web Album as the source of image, WP-Juicebox uses the Picasa image 'title' as the Juicebox image title (which by default is the image filename) and the Picasa image 'summary' as the Juicebox image caption.
If you want to prevent WP-Juicebox from displaying the Picasa image 'title', please do the following.
(1) Open the 'wp-juicebox/config.php' file in a plain text editor.
(2) Change line 101 from:
$title_text = $dom_doc->createCDATASection($attachment->title);
... to:
$title_text = $dom_doc->createCDATASection('');
Please note that the line number above refers to the current version of WP-Juicebox (v1.4.0.1).
You could perhaps increase the stagePadding (in JuiceboxBuilder-Pro's 'Customize -> General' section) to introduce a certain amount of padding all around the gallery) and reduce the height of the caption area, using maxCaptionHeight ('Customize -> Caption'). (As your gallery uses captionPosition="BOTTOM", the maxCaptionHeight will be the actual height of the caption area.)
Otherwise, you could reserve enough space at the top of your web page for your logo (in a header area) and display the gallery in the remainder of the browser window. Please see the View Resizable Gallery with Top Menu Example in the Resizable Gallery support section for an example of how this can be done. You can view the source of the web page in a browser and copy /modify the code to suit your own needs (removing the footer, replacing the content of the header with your own logo and swapping the sample gallery for your own).
Alternatively, there are other suggestions regarding how and where to place a logo in a Juicebox gallery in the Adding a Logo support section. One possible solution would be to use your logo in the Gallery Title and then set galleryTitlePosition="TOP" and galleryTitleHAlign="CENTER".
On a single monitor, when useFullScreenExpand="TRUE", it is not possible to move the cursor outside an expanded gallery so that the overlay fades out.
One possible alternative would be to set showInfoButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section) and you can then toggle the overlay on and off using the Info Button on the Button Bar. The Button Bar will be displayed on screen all the time (allowing access to the Info Button) but all other components on the overlay (for example the caption area and the main image navigation buttons) will be toggled on and off.
I have viewed your gallery (and the demo gallery) in Chrome on an iPod Touch 4 and the gallery seems to display and function as expected. On first loading the gallery, the address bar disappears from view and the gallery takes up as much screen real estate as possible (similar to what I see in Mobile Safari).
Because your gallery is 100% x 100%, the Expand Button is not displayed (the gallery cannot be displayed any larger than it already is) and useFullscreenExpand has no effect on an iPhone (where the browser window always covers the entire screen).
Could you please explain in further detail what you mean when you say "neither of them will go/work in Full Screen Mode"?
Maybe if I understood your query better, I could help further. Thank you.
The XML file used for the http://sandbox.castarchitecture.com/pro … homes.html gallery is not the one you quoted.
The gallery uses this XML file which does not set the two configuration options from my post above: http://sandbox.castarchitecture.com/pro … config.xml
If you want your gallery to use the http://sandbox.castarchitecture.com/TEM … config.xml file, then you can point towards it in your gallery's embedding code using a configURL configuration option or, alternatively, as your 'TEMP_JUICEBOX_FOLDER' folder seems to be a complete gallery folder, you can use a baseUrl, for example:
<!--START JUICEBOX EMBED-->
<script src="/TEMP_JUICEBOX_FOLDER/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: '/TEMP_JUICEBOX_FOLDER/jbcore/classic/theme.css',
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: 'rgba(255,255,255,1)'
});
</script>
<div id="juicebox-container">
</div>
<!--END JUICEBOX EMBED-->
If you do not specify either a configUrl or a baseUrl, Juicebox will look for a file named 'config.xml' in the same directory as the page containing the embedding code. In your case, there is such an XML file in that location but it is not the XML you want your gallery to use.
(Alternatively, you could replace the http://sandbox.castarchitecture.com/pro … /config.xm file with http://sandbox.castarchitecture.com/TEM … config.xml on your web server.)
There are two relatively easy solutions to your problem. Either:
(1) Use an opaque (rather than transparent) expandedBackgroundColor. For example, try setting expandedBackgroundColor="rgba(255,255,204,1)" rather than expandedBackgroundColor="rgba(255,255,204,0.2)". This will ensure that no elements from your web page are visible when the gallery is expanded.
... or:
(2) Set expandInNewPage="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section). When the gallery is expanded from the Splash Page, it will be displayed on a page of its own rather than on top of the embedding page.
@Tiphaine
On JuiceboxBuilder-Pro's 'Images' tab, you can select multiple images (using Ctrl+Click and/or Shift+Click) and then delete the selection using the 'Images -> Delete' option from the drop-down menu at the top (Ctrl+D).
Use the following configurations in your galleries:
showThumbsButton="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section)
showThumbsOnLoad="FALSE" (in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section)
Please see the Multiple Galleries on One HTML Page example in the Embedding Multiple Galleries support section. You can view the source of the web page in your browser and copy/modify it to suit your own needs.
Essentially, you would keep each gallery in its own separate folder (to avoid the risk of duplicate file names in the same directory), upload the complete gallery folders to your web server and embed the galleries in your web page using the baseUrl method of embedding as documented here.
If you run into any problems, please post the URL top your web page so that I can take a look and help further.
Please check the source of your web page in a browser to ensure that there is a div with id="viewsstyle--vista-galeria--default" on your page.
The Juicebox module for Drupal is responsible for creating the code which goes on your web page.
It should create a container for your gallery and embed the gallery into it.
It sounds like the container's id is being used in the JavaScript embedding code but that the container itself does not exist on your web page.
Please note that we did not write the Juicebox module for Drupal ourselves and as this query seems to be directly related to the module's code (rather than Juicebox itself), I would recommend that you post your query in the Drupal forum where the author of the module should be able to help you out further.
In the meantime, please post the URL to your web page. I will be happy to take a look and help further if I can but the author of the module (who is more familiar with its code than myself) is likely to be the best source of help.
For reference (and others reading this post), instructions for installing the Juicebox plugin for Lightroom can be found here.
It sounds like your 'juicebox.lrwebengine' folder may be in an incorrect location. (You are certainly looking in the right place in the Lightroom interface. Once installed, 'Juicebox' should be displayed as an option in the 'Web -> Layout Style' section.)
As you are using a Mac, you should be able to just double-click the 'juicebox.lrwebengine' package to install the plugin (rather than manually copying it to the correct folder). Please note that this will not work for Windows users.
There are also instructions for installing Web Engines (such as the Juicebox plugin for Lightroom) here (with instructions on how to access hidden folders if necessary to find the correct path).
Hopefully the information above will help.
You gallery online is a Juicebox-Pro gallery and the Juicebox branding is not present in the lower-right corner.
If you still see the branding, then please clear your browser's cache before reloading your web page. It sounds like your browser might have cached and be using the original Lite 'jbcore' folder which is no longer on your web server.
@Bchristensen
It is no longer possible to have the shared image's thumbnail displayed in the pop-up share window due to limitations imposed by Facebook on what data can be passed via their share URL. Only one thumbnail can be used per gallery. (The link will still point towards the correct image within your gallery, though.)
The image used in the Facebook sharing pop-up window can be set using an Open Graph og:image <meta> tag in the <head> section of your web page, such as the following:
<meta property="og:image" content="http://www.example.com/images/thumbnail.jpg" />
If you create a gallery with JuiceboxBuilder-Pro, an og:image tag will be automatically generated and included in the gallery's 'index.html' file. If you are embedding your gallery in an existing web page alongside other content, then you will need to add an og:image tag manually.
Twitter does not use a thumbnail image in its sharing pop-up window. Twitter shares only text (the gallery title, the image title and the image caption) and a link (to the specific image in your gallery).
I'm playing around experimenting with the multisize but it does NOT seem to serve any different images - in fact I'm only getting whatever is defined in imageURL.
The Multi-Size Image Support seems to work fine but perhaps not as you expect it to.
If you are adding the extra image sizes to your gallery's XML file manually, the attribute names are case-sensitive so take care to use smallImageURL and largeImageURL entries (instead of, for example, smallImageUrl or largeimageurl).
Try opening an image in a new window (with the Open Image button on the Button Bar) and you should see the largeImageURL being used.
the config itself specified THE EXACT SAME IMAGE for each size!
Each image (small, medium and large) in the Multi-Size demo gallery is unique. All three sizes for each entry have the same file name but they are stored in different folders and are different sizes (though I agree it can be hard to tell which image is being used just by viewing the gallery).
Would it not make sense to define a screen resolution threshold?
The logic used to determine which image to use can be found in the Multi-Size Image Support section.
To a certain extent, Juicebox does take into account the screen resolution. The size of images used in the gallery is partly dependent on the Screen Mode used to display the gallery and as long as screenMode="AUTO", the Screen Mode is dependent on the screen resolution (amongst other factors).
Unfortunately, it is not possible to change this logic (for example, to introduce your a custom screen resolution threshold into the mix). If you would like to suggest this for a future version of Juicebox, then please post in the Feature Requests thread. I do not know how likely it is that your suggestion will be incorporated into a future version of Juicebox but at least it will be in the right place and will not be overlooked by the developers.
An alternative to using Multi-Size Image Support would be to use a single image of high enough resolution that it would still look OK on the highest resolution screen that you expect your gallery's target audience to use. The image would still be dynamically scaled down appropriately for use on smaller screens.
I hope this helps clarify things.
The 'full.html' file is used to display the gallery when it is expanded in a new page, either when expandInNewPage="TRUE" or when expandInNewPage="AUTO" and Juicebox determines that the configuration option should be TRUE (such as when the gallery is displayed on iOS devices). Please see the Expand Gallery Behavior support section for more information.
Please note that expanding in a new page will work only when the gallery has been uploaded to a web server.
If your gallery does not expand correctly on your iPad (showing a blank screen), then please post the URL to your gallery so that I can take a look and help further.
This is possible only with Juicebox-Pro (not with Juicebox-Lite) by setting thumbsPosition="TOP". (thumbsPosition is a Pro-only configuration option).
For a list of all Pro Thumbnail Options, please see here.
As long as you can view your gallery in a browser using either the http:// or https:// protocol, the expand in new page functionality should work OK.
That's great! Thanks for letting me know.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.