Juicebox v1.5.1 Released!

2014-03-29 11:01:50

If you set your gallery's height to a fixed pixel value (such as 600px), then it will be 600px in all devices and browsers.

You can change a Juicebox gallery's height in the gallery settings window.
By default, it is set to a fixed pixel value (600px) because setting a gallery's height to be a percentage (such as 100%) can cause problems if the gallery's parent container does not have a height set via CSS. Juicebox may then not be able to determine what its own height should be (100% of what?).

In a WordPress environment, you may have little control over the gallery's parent container which is generated by your theme. It is unlikely that a height will be set for the gallery's parent container as the theme has no way of knowing what content will be placed in the page or post and WordPress pages are designed to scroll vertically if necessary. (They are not intended to dynamically rescale vertically to fit within a user's browser window height).

You could try changing your gallery's height to a percentage but whether this works OK or not may be dependent on your theme.

2014-03-28 21:41:20

Hopefully the following notes will help.

- Picture in Fullframe

If you want the images in your gallery to be displayed in full (without cropping), set imageScaleMode to either SCALE_DOWN or SCALE (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).

- in the upper 1/3 a transparent Navbar wich generel Titel and Navigate to 3 other Sides (Home / Architecture / Nature / ... / imprint)

Please take a look at the Using a Resizable Gallery with a Header support section. The View Resizable Gallery with Top Menu Example has a header of fixed height and the gallery takes up the remainder of the user's browser window. You can view the source of the web page in a browser and copy/modify the code to suit your own needs (by swapping the sample header content for your own navigation menu).
It might not be exactly what you want but if you want to overlay a transparent navigation menu on top of a Juicebox gallery, then knowledge of HTML, CSS (and perhaps JavaScript) would be required. It would not be something that could be implemented within Juicebox itself.
You could, however, embed links into the Gallery Title or Back Button as noted in these FAQs:
How do I add HTML formatting to the Gallery Title or Back Button?

- main page (as home) should play the automatic

If you want a Juicebox gallery to start an automated slideshow as soon as it loads, set enableAutoPlay="TRUE" and autoPlayOnLoad="TRUE" ('Customize -> AutoPlay'). You may also want to set enableLooping="TRUE" ('Customize -> General').

- no Buttons

Use the following settings:

buttonBarPosition="NONE"
galleryTitlePosition="NONE"
backButtonPosition="NONE"
showImageNav="FALSE"
captionPosition="NONE"

- no thumbnails

Use the following settings:

showThumbsOnLoad="FALSE"
showSmallThumbsOnLoad="FALSE"
showThumbsButton="FALSE"
showSmallThumbsButton="FALSE"

- just the full picture ;)

Make sure that your gallery's dimensions match the aspect ratio of your images (so that there is no wasted space around your images within the gallery).

- special --- it is possible to link to the imprint so it come as overlay transparent layer at the side, so you can read it over the images?

I'm not entirely sure what you mean by this. You can set captionPosition="OVERAY_IMAGE" so that the image titles and captions appear on the image overlay (on top the the main image). However, the text will appear towards the bottom of the image, not the side.

2014-03-28 21:21:22

I have been unable to replicate the problem you report in a test gallery of my own.
Please post the URL to your gallery so that I can take a look for myself. (There may be a combination of configuration options which is causing the problem.)

2014-03-28 19:08:49

You'll need to set backButtonPosition to either TOP or OVERLAY.
If you do not set backButtonPosition, then Juicebox will use its default value of NONE and the Back Button will not be displayed (regardless of any of the other Back Button options which may have been set).
For reference, a list of all Back Button configuration options can be found here.

2014-03-26 21:41:10

As you have not explicitly set a configUrl or baseUrl in your gallery's embedding code, Juicebox will, by default, look for your gallery's XML file to be named 'config.xml' and to be located in the same directory as the HTML page which contains the embedding code.
Therefore, your gallery's XML file should be located here: http://www.website-design.ca/exhibition/config.xml
... but it does not seem to be there. Going directly to this location in a browser results in an error 404 (file not found).

Upload your 'config.xml' file to your 'exhibition' directory and your gallery should display fine (as long as the paths within the XML file are correct).

If you want to rename or relocate your gallery's XML file, you can do so using the configUrl configuration option.
For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
configUrl: "/gallery/custom.xml",
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

2014-03-25 16:33:16

Set showImageNumber="FALSE" in JuiceboxBuilder-Pro's 'Customize -> Caption' section.

2014-03-24 20:48:59

I'm glad you were able to get it working.
Thank you for sharing your code. Hopefully others will be able to benefit from it.

2014-03-23 12:01:26

I see a flash during the transitions on the embedded gallery and flikr gallery

One thing that these galleries have in common is that neither completely fills the browser window.
However, if this was somehow a contributing factor, then I would expect you to see the flickering in other galleries which do not completely fill the browser window (such as the Flat Design and Top-Left Alignment demo galleries).
The two galleries you see the flickering in have much in common with other demo galleries on the page which you do not report seeing the flickering in so, at the moment, I am unable to draw any conclusions as to what the problem might be.

I guess its a local issue to my computer.

It certainly seems to be.
Out of interest, what operating system and version of Safari do you use?
If you are not already using the latest version of Safari for your system, try updating it to see if this helps.

2014-03-22 09:57:17

I have just viewed your gallery in Safari 5.1.7 on my PC (and two other browsers which use the WebKit engine: Chrome 33 and Opera 20) and I see no flickering in transitions.

As I do not see the flickering in your gallery when I view it myself, it looks like the problem may not be with the gallery itself or due to a code conflict but it seems to be localized to your own browser/system.
Try clearing your browser's cache before reloading your gallery to see if this makes a difference.

Do you see the flickering in any of these demo galleries?
http://www.juicebox.net/demos/

2014-03-21 22:21:08

If you set a high enough 'z-index' value to your menu, it should be stacked on top of the gallery and function as expected.
Try adding the following code to the <head> section of your web page:

<style type="text/css">
.pure-menu ul {
    z-index: 9999 !important;
}
</style>

2014-03-20 15:09:57

There are known issues (which are currently being investigated) whereby flickering can occur in Chrome if the gallery is either loaded into an iframe or hosted on Dropbox rather than on a regular web server.
However, your gallery is not hosted on Dropbox and is embedded directly in your web page.

I have viewed your gallery in Chrome 33 (and Firefox 28.0, IE11, Safari 5.1.7 and Opera 19.0) on my PC and do not see any flickering during image transitions at all in any browser.

Here are a few things to check and try:

(1) Try clearing your browser's cache before reloading your gallery's web page to see if this makes a difference.

(2) Try fixing the HTML errors on your web page.
You can check the code on your web page with the W3C Markup Validation Service and then fix the errors that are reported.
(There is a closing </p> tag on your web page with no matching opening <p> tag.)

(3) Try viewing your gallery on its own web page (rather than embedded in your main web page) to see if the flickering still occurs (to see if there is perhaps a conflict with some CSS or JavaScript code on your main web page): http://www.paradiseblue.com/gallery1/

If none of the above helps , then please post back and let me know what operating system and version number do you use. It might give us a clue to the source of the problem.

2014-03-20 10:25:28

I do not know the original reason for giving WP-Juicebox its own shortcode but I guess it would allow for additional attributes to be added at a later date (perhaps for new functionality in future versions) without hijacking WordPress's own gallery shortcode.

2014-03-20 10:21:47

Thank you for posting the link to your gallery. I see the problem that you report in Chrome 33.
It looks like the problem is somehow related to the gallery being hosted on Dropbox.
I created a sample gallery using imageTransitionType="CROSS_FADE" and uploaded it to a Dropbox 'Public' folder and it also flickers between image transitions. However, I uploaded the same gallery to a couple of different regular web servers and the problem does not occur.
I have notified the developers of this issue but if the problem is with Dropbox and a solution cannot be achieved within the code of Juicebox itself, then the only workarounds at the moment would be to either change the imageTransitionType or to host your gallery on a regular web server.

2014-03-20 10:20:19

Please post suggestions for future versions of Juicebox in the Feature Request forum thread
It keeps them all together and ensures that they are not overlooked.
Thank you.

2014-03-19 21:59:53

Please see the answer to Question #3 in this forum thread.
Essentially, you could either:
(1) Set up a Juicebox gallery sourced by images in a Flickr account. You could then upload new image to your Flickr account and they would automatically be included in your gallery without the need to modify any gallery files.
... or:
(2) Use a server-side scripting language (such as PHP) to read the contents of a directory and dynamically generate a gallery's XML file on-the-fly when the gallery is displayed. You could then just upload new images to the designated directory as and when required.

2014-03-19 10:14:07

The previous version of the site was on WordPress using the same Juicebox gallery - I've just updated the template to use Foundation 5 to improve the site on mobiles. Scrolling wasn't a problem before.

It sounds like the problem is likely to be a JavaScript conflict between Juicebox and Foundation 5 (or a bug in the Windows Phone browser).

WordPress has its own wp_is_mobile() function so if you wanted to prevent the 'juicebox.js' JavaScript file from being loaded on your pages, then you could open the 'wp-juicebox/wp-juicebox.php' file in a plain text editor and wrap line 28 in the wp_is_mobile() function (allowing add_action() to be run only if wp_is_mobile() returns false):

if (!wp_is_mobile()) {
    add_action('wp_enqueue_scripts', array(&$this, 'add_scripts_wp'));
}

If you have a more specific function which checks for a Windows Phone, then you could use this instead of wp_is_mobile().

With regard to the Juicebox shortcode which is already in the post, you would want WordPress to replace it with nothing (an empty string). Ordinarily, if you just disabled the add_shortcode() function on line 41 of the 'wp-juicebox.php' file (using the same method as above), then WordPress would simply display the Juicebox shortcode as plain text in the post.
In order to work around this, you would need to add the following to the very beginning of the shortcode_handler() function on line 219 of the 'wp-juicebox.php' file:

if (!wp_is_mobile()) {
    return;
}

Again, replace wp_is_mobile() with your own more specific function.

2014-03-19 09:36:18

@mark

I can post a link to a test gallery if it helps at all.

Yes, please post the URL to your gallery so that I can take a look and investigate further.
Also, please let me know what versions of OS X and Juicebox-Pro you are using.
Thank you.

The issue above affects only galleries loaded into iframes and there is no known issue with flickering in Chrome (or Safari) when galleries are embedded directly into a web page.

Try clearing your browser's cache before reloading your gallery to see if this helps.

Also, make sure that you do not have imagePreloading set to NONE. If the next image in the gallery is not preloaded, then it is possible that the transition may not be as smooth as it could be otherwise.

Do you see the problem in this demo gallery which uses the CROSS_FADE imageTransitionType?

2014-03-19 09:29:28

What you are currently doing is possibly the best solution.
If you want to dynamically change a configuration option, then it is certainly much easier to do so by setting the option in the embedding code (via a JavaScript variable) rather than try to set it in the gallery's XML file.
Also, it is not possible to change the value of a configuration option once the gallery has been loaded so the only option would be to reload the gallery with the new value (as you are doing).

2014-03-18 19:11:11

The link to WP-Juicebox (from the plugin's support web page) has now been fixed and points towards the current version (v1.3.3.1) so you could try upgrading WP-Juicebox to see if it helps.
Although there have been many changes between v1.3.3.0 and v1.3.3.1 (please see the version history for details) I do not think that there have been any code changes that will make a difference to the problem that you reported but it is certainly worth a try.

2014-03-18 09:54:09

As far as I am aware, there are currently no plans to change the Shopping Cart provider.

However, in a future version of Juicebox, we plan to allow users to associate a unique purchase URL to each individual image in the gallery.
If the main image being displayed has a purchase URL associated with it, then the Shopping Cart button will be displayed on the Button Bar and the user will be taken to the purchase URL when it is clicked.

This will not be a direct alternative to Fotomoto but it will certainly allow users more flexibility.

In the meantime, you could perhaps set up links to individual purchase pages (to whatever shopping cart solution you wish to use) from within your image titles or captions.

2014-03-17 21:02:07

When I view your gallery in Chrome (and Firefox), your gallery is not truncated, although it is necessary to scroll down to see the bottom of the gallery.
If you want to display your web page's header and have the gallery take up the remainder of the page (without the need for any scroll bars), then please see the View Resizable Gallery with Top Menu Example in the Embedding Multiple Galleries support section.
You can view the source of the sample web page in your browser and adapt it to suit your own needs (replacing the content of the 'header' <div> with your own header and swapping the sample gallery for your own).

You also have some CSS on your web page which is currently conflicting with the gallery.
However, this seems to be due to HTML errors on your page. (There is an <img> tag without a closing > on line 65 which seems to be resulting in your Juicebox gallery being included in your 'logo' <div> and inheriting some CSS rules intended for only the 'logo' <div>.)
You can check the code on your web page with the W3C Markup Validation Service and fix the errors reported.
This should hopefully fix the layout issues.

2014-03-17 20:47:48

You could try reducing the file size of your main images a little more.
The average file size of the first six images in your first gallery is 336KB.

If you were to create a gallery with JuiceboxBuilder-Pro (for example) using all default settings, the resulting images would be 1024 x 768 and approximately 120KB each. This file size is still well-suited for web gallery use (for most scenarios) and is nearly 3 times smaller than your images at present.

This will not reduce the loading time of the first image by a third (the browser still has to load the 'juicebox.js' file and the many other external CSS and JavaScript files on your WordPress pages) but it should help.

2014-03-17 20:33:21

The problem is that you are loading your Juicebox gallery into a hidden container.
You can workaround this by loading your gallery on demand when the link is clicked rather than immediately when the page is loaded.
Put your gallery's embedding code into a JavaScript function such as:

<script>
    function loadGallery() {
        new juicebox({
            containerId: "lebox",
            baseUrl: "http://www.stromqvi.st/wp-content/themes/MasterKenobi/jb_test/",
            galleryWidth: "620",
            galleryHeight: "440",
            backgroundColor: "rgba(0,0,0,1)"
        });
    }
</script>

... and run the function once the gallery's container is visible.
This should solve your problem.

2014-03-17 20:26:15

I do not know why WP-Juicebox v1.3.3.1 is not currently available and why the download link leads to v1.3.3.0.
As far as I am aware, there are no issues with v1.3.3.1 which would have resulted in it being withdrawn for download.
I will look into this further.

However, there is no reason that I know of why a Juicebox gallery created and embedded in a WordPress page by WP-Juicebox v1.3.3.0 should prevent a page from scrolling.
When WordPress generates a page and comes across a Juicebox shortcode, it simply replaces the shortcode with the gallery's embedding code. In this respect, a Juicebox gallery in a WordPress page is no different to a Juicebox gallery in any other web page. (The only Juicebox-related code on the page is the <script> tag to load the 'juicebox.js' file and the embedding code itself.)

ETA: the scrolling issue is on all pages, not just where there is a gallery.

On a page without a Juicebox gallery, the only Juicebox-related code is the <script> tag to load the 'juicebox.js' file so it looks like there may be a JavaScript conflict of some kind.

Have you tried scrolling a web page with a Juicebox gallery (without WordPress or Foundation 5) on you Windows Phone?
Try loading these demo galleries, each of which have at least one Juicebox gallery embedded in a page which should be long enough for scrolling to be necessary to reach the bottom.
http://www.juicebox.net/demos/pro/embedded/
http://www.juicebox.net/demos/support/m … _one_page/

This should at least tell us if WordPress and/or Foundation 5 are contributing factors or if the problem is simply with Juicebox and your Windows Phone.

2014-03-15 08:51:52

If Juicebox's imageScaleMode configuration option is set to SCALE (or SCALE_DOWN), then the image's aspect ratio should be respected. If it is not, then there may be an outside factor causing this problem.
Perhaps there is some global CSS on your web page which is affecting all images on your page, including those in your Juicebox gallery. Check your web page's CSS to see if you can find any global CSS rules which might be causing a problem. (Look out for use of the global selector * or rules than apply to all div, img or p tags.)
Also, fire up your browser's developer tools and see if you can find out if there are any CSS rules being applied to the images in your gallery which are not originating from Juicebox itself.
If you would like me to see if I can determine the cause of the problem, then please post the URL to your gallery so that I can take a look.

Juicebox v1.5.1 Released!

Search options (Page 158 of 235)

Posts found: 3,926 to 3,950 of 5,851

3,926 Reply by Steven @ Juicebox 2014-03-29 11:01:50

Re: Height non-adjustable in mobile view? (4 replies, posted in Juicebox-Lite Support)

3,927 Reply by Steven @ Juicebox 2014-03-28 21:41:20

Re: Fullframe with overlay Navbar [SOLVED] (10 replies, posted in Juicebox-Pro Support)

3,928 Reply by Steven @ Juicebox 2014-03-28 21:21:22

Re: External links don't work when Caption is set to BELOW_IMAGE [SOLVED] (4 replies, posted in Juicebox-Pro Support)

3,929 Reply by Steven @ Juicebox 2014-03-28 19:08:49

Re: Can't get the home/back button to work [SOLVED] (2 replies, posted in Juicebox-Pro Support)

3,930 Reply by Steven @ Juicebox 2014-03-26 21:41:10

Re: Juicebox Error: Config XML file not found. (1 replies, posted in Juicebox-Lite Support)

3,931 Reply by Steven @ Juicebox 2014-03-25 16:33:16

Re: I want to get rid of numbering on images (1 replies, posted in Juicebox-Pro Support)

3,932 Reply by Steven @ Juicebox 2014-03-24 20:48:59

Re: First image does not display when gallery is hidden by default (5 replies, posted in Juicebox-Pro Support)

3,933 Reply by Steven @ Juicebox 2014-03-23 12:01:26

Re: drop down css menu doesn't work on embedded gallery (7 replies, posted in Juicebox-Lite Support)

3,934 Reply by Steven @ Juicebox 2014-03-22 09:57:17

Re: drop down css menu doesn't work on embedded gallery (7 replies, posted in Juicebox-Lite Support)

3,935 Reply by Steven @ Juicebox 2014-03-21 22:21:08

Re: drop down css menu doesn't work on embedded gallery (7 replies, posted in Juicebox-Lite Support)

3,936 Reply by Steven @ Juicebox 2014-03-20 15:09:57

Re: Cross-fade transitions "flash" when using Google Chrome (1 replies, posted in Juicebox-Pro Support)

3,937 Reply by Steven @ Juicebox 2014-03-20 10:25:28

Re: WordPress Plugin stops ability to scroll on Windows Phone 8 (10 replies, posted in Juicebox-Pro Support)

3,938 Reply by Steven @ Juicebox 2014-03-20 10:21:47

Re: webpage flickers/flashes on chrome (6 replies, posted in Juicebox-Lite Support)

3,939 Reply by Steven @ Juicebox 2014-03-20 10:20:19

Re: Change flickrTags configuration option with JaveScript and refresh (4 replies, posted in Juicebox-Pro Support)

3,940 Reply by Steven @ Juicebox 2014-03-19 21:59:53

Re: Show entire dropbox folder. (1 replies, posted in Juicebox-Lite Support)

3,941 Reply by Steven @ Juicebox 2014-03-19 10:14:07

Re: WordPress Plugin stops ability to scroll on Windows Phone 8 (10 replies, posted in Juicebox-Pro Support)

3,942 Reply by Steven @ Juicebox 2014-03-19 09:36:18

Re: webpage flickers/flashes on chrome (6 replies, posted in Juicebox-Lite Support)

3,943 Reply by Steven @ Juicebox 2014-03-19 09:29:28

Re: Change flickrTags configuration option with JaveScript and refresh (4 replies, posted in Juicebox-Pro Support)

3,944 Reply by Steven @ Juicebox 2014-03-18 19:11:11

Re: WordPress Plugin stops ability to scroll on Windows Phone 8 (10 replies, posted in Juicebox-Pro Support)

3,945 Reply by Steven @ Juicebox 2014-03-18 09:54:09

Re: Fotomoto in the UK (4 replies, posted in Juicebox-Lite Support)

3,946 Reply by Steven @ Juicebox 2014-03-17 21:02:07

Re: embedded gallery cutting off [SOLVED] (2 replies, posted in Juicebox-Lite Support)

3,947 Reply by Steven @ Juicebox 2014-03-17 20:47:48

Re: How to speed up appearing of the first image? (1 replies, posted in Juicebox-Pro Support)

3,948 Reply by Steven @ Juicebox 2014-03-17 20:33:21

Re: First image does not display when gallery is hidden by default (5 replies, posted in Juicebox-Pro Support)

3,949 Reply by Steven @ Juicebox 2014-03-17 20:26:15

Re: WordPress Plugin stops ability to scroll on Windows Phone 8 (10 replies, posted in Juicebox-Pro Support)

3,950 Reply by Steven @ Juicebox 2014-03-15 08:51:52

Re: Images not preserving aspect ratio (1 replies, posted in Juicebox-Lite Support)

Posts found: 3,926 to 3,950 of 5,851