3,201 Reply by Steven @ Juicebox

(27 replies, posted in Juicebox-Pro Support)

Even if the problem is only with a certain browser, we would still very much like to track the problem down.

If you have the time, I would be grateful if you could please confirm whether or not you see the problem in my test gallery (which is a gallery straight out of JuiceboxBuilder-Pro but using the same configuration options that your own test gallery uses).

The fact that you do not see the problem in any of our demo galleries suggests that the problem is either with a certain combination of configuration options or with custom code on your own web page. If you do see the problem in my test gallery, then the configuration options used in the gallery may be the cause (and I can then log a bug with the developers if necessary).

Thank you.

Go to forum: Juicebox-Pro Support

3,202 Reply by Steven @ Juicebox

(496 replies, posted in Juicebox-Pro Support)

@gfs

Thank you for your suggestion.

The following solution is not as elegant as your suggestion would be but you might like to give it a try and adapt it to suit your own needs.
You could use the Juicebox-Pro API and JavaScript to allow the user to change the displayTime (via custom HTML 'minus' and 'plus' buttons on your web page) and then reload the gallery (via a further HTML 'go' button) using the new display time (and passing the current image via firstImageIndex to that the gallery does not start at the beginning each time the gallery is reloaded with a new display time).

To see this in action, create a sample gallery in JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file.

<!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">
            // Initialize variables
            var dt = 5;
            var dtcurrent = dt;
            var jb;
            var increment = 1;
            var minimum = 1;
            var maximum = 10;
            // Function to load gallery when 'Go' button is clicked
            // First parameter is displayTime
            // Second parameter is firstImageIndex
            function loadGallery(dt, fii) {
                jb = new juicebox({
                    autoPlayOnLoad: "TRUE",
                    backgroundColor: "ffffff",
                    containerId: "juicebox-container",
                    displayTime: dt,
                    enableAutoPlay: "TRUE",
                    enableLooping: "TRUE",
                    firstImageIndex: fii,
                    galleryHeight: "400",
                    galleryWidth: "600",
                    showAutoPlayButton: "TRUE",
                    showImageOverlay: "ALWAYS"
                });
            }
            // Run following when Document Object Model is complete
            $(document).ready(function() {
                // Run following when 'minus' button is clicked
                $('#minus').click(function() {
                    // Reduce display time and ensure it does not go below minimum value
                    dt = Math.max(dt - increment, minimum);
                    // Display display time on screen
                    $('#display').text(dt);
                });
                // Run following when 'plus' button is clicked
                $('#plus').click(function() {
                    // Increase display time and ensure it does not go above maximum value
                    dt = Math.min(dt + increment, maximum);
                    // Display display time on screen
                    $('#display').text(dt);
                });
                // Run following when 'go' button is clicked
                $('#go').click(function() {
                    // Only reload gallery if display time has changed
                    if (dt !== dtcurrent) {
                        // Set current display time
                        dtcurrent = dt;
                        // Load gallery
                        loadGallery(dt, jb.getImageIndex());
                    }
                });
                // Display display time on screen
                $('#display').text(dt);
                // Load gallery
                loadGallery(dt, 1);
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="input">
            <span>Display Time</span><input id="minus" type="button" value="-" /><span id="display"></span><input id="plus" type="button" value="+" /><input id="go" type="button" value="Go" />
        </div>
        <div id="juicebox-container"></div>
    </body>
</html>

Go to forum: Juicebox-Pro Support

3,203 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

Thank you for sharing your findings.
I will pass this information on to the developers.

Go to forum: Juicebox-Pro Support

3,204 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

First of all, please try re-uploading your gallery's 'jbcore' folder to your web server to ensure that all core Juicebox files are present and correct (in case something happened during the initial upload resulting in corrupt or missing files).

Also, the problem may be due to a conflict between the CSS code for the gallery and some custom CSS code on your web page.
If you have any generalized custom CSS code on your web page (which, for example, might apply certain CSS rules to all <div> or <img> tags on the web page), try applying your CSS code to only those elements on your web page which require these rules through use of CSS selectors (ids or classes).
Unfortunately, it is not possible to isolate a Juicebox gallery (or any other element) on a web page to prevent it from inheriting global CSS rules.

You may also need to delay the loading of the gallery until the tab containing the gallery is clicked (when the gallery's parent container will be visible on screen).
If you load the gallery as soon as the page loads, then the container that the gallery is embedded into will not yet be visible on screen (it will be visible only after the tab has been clicked) and it will essentially have no dimensions associated with it. This will affect the sizing of the gallery.
The solution would be to wrap your gallery's embedding code in a JavaScript function and run the function when the tab is clicked (using a click handler on the tab/link).

The shareUrl is used only by JuiceboxBuilder-Pro to set the absolute paths for the Open Graph meta tags in the gallery's 'index.html' page.
The shareUrl should be set to the directory which contains the page with the gallery's embedding code.
If you are embedding a gallery in a web page of your own (and not using the 'index.html' page generated by JuiceboxBuilder-Pro), then the shareUrl will not be used.
Just be sure to use absolute paths if you manually include any Open Graph tags in your web page.
With regard to Twitter sharing, the text and URL sent to Twitter are automatically determined by Juicebox-Pro (without using the actual shareUrl within JuiceboxBuilder-Pro).

Go to forum: Juicebox-Pro Support

3,205 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

@pjl

As noted above, the bug has been fixed for the next version of Juicebox.
There is no set release date for the next version and I really do not know when it will be released. It may be days or weeks. Any estimate I give you could turn out to be wholly inaccurate.
However, we are working hard to get the next version ready.
All I can suggest is that you join the mailing list at the foot of our homepage, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed to be notified of new releases.
Thank you for your patience.

Go to forum: Juicebox-Pro Support

3,206 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

There is currently no htaccess file for the site.  Is that something that could fix the problem?

Yes. As long as you use an Apache web server, then create a .htaccess file in your web space's root directory with the code from the FAQ and this should solve your problem. If you use an IIS web server, then please see the link in the FAQ for details on how to set the Cache-Control header to 'no-transform'.

Go to forum: Juicebox-Pro Support

3,207 Reply by Steven @ Juicebox

(27 replies, posted in Juicebox-Pro Support)

Juicebox generates valid HTML 5 code so if you are getting errors on your web page relating to Juicebox code, please try using the HTML 5 Doctype Declaration on your web page (and ensure that the other code on your web page is HTML 5 compliant).

<!DOCTYPE HTML>

I do not see the problem in any browsers on my PC.
Please take a look to see if the problem occurs in this test gallery. It uses the same configuration options that your own test gallery uses but the web page itself uses the HTML 5 DTD and is created by JuiceboxBuilder-Pro with no custom code on it.
If you still see the problem in this gallery, then it may be due to an incompatibility between certain configuration options and Safari 8 (perhaps imageTransitionType="CROSS_FADE" or imageTransitionTime="1.5"). Try using the default values of imageTransitionType="SLIDE" and imageTransitionTime="0.5" to see if this makes a difference.
Please let me know how you get on so that I can log a bug report with the developers if necessary. Thank you.

Go to forum: Juicebox-Pro Support

3,208 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

That's great!
Thank you for posting back to let me know.

Go to forum: Juicebox-Pro Support

3,209 Reply by Steven @ Juicebox

(27 replies, posted in Juicebox-Pro Support)

@gfs

Can you confirm if possible, that this is NOT a Juicebox issue?

Do you see the problem with any of our demo galleries on this web page?
If so, then please let me know.
If not, then it is possible that your problem is unique to your own web page (and the code within it).

Using W3C validation service throws up a LOT of errors with my code ... most of which seem to be in Juicebox's embed code.

Juicebox generates valid HTML 5 code and your embedding code looks OK. The problem you are seeing probably originates from putting your embedding code inside <p> and <span> tags, some of which also seem to have no closing </p> tag. (Inline elements such as <p> and <span> tags not contain block elements such as <div> tags.)

I would start by fixing the errors on your web page. Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.
Even if this does not solve your problem, we can at least then eliminate HTML errors from being the cause of your problem.

Most of the errors on your web page seem to be due to stray end tags and unclosed elements.
Unfortunately, not being familiar with your web page's layout and with your web page's code not being indented, it is hard (at a glance) to see where containers should be opened and closed.

Try not to be overwhelmed by the errors on your web page. (There are not actually that many but most of them seem to be related to the layout rather than syntax errors or typos.) Just go through them one by one. Each one you fix is a step closer to a valid web page. If you see an error such as "Stray end tag.", then it is possible that there may be no corresponding opening tag and the stray end tag can just be removed. If you see an error such as " Unclosed element.", then try to figure out what it is you want within the tag and that should lead you to where the closing tag should be.

I hope this helps.

Go to forum: Juicebox-Pro Support

3,210 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

First of all, please ensure that you are viewing your web site over a wi-fi connection and not 3G/4G.
If using 3G/4G, then please see this FAQ which offers a solution.
Why can't I view my gallery on a 3G mobile connection?

Also, your gallery uses the Juicebox-Pro v1.4.2 JavaScript file but the Juicebox v1.2.0 CSS file.
Try replacing your gallery's current 'jbcore' folder with a fresh version from your Juicebox-Pro download zip file ('juicebox_pro_1.4.2/web/jbcore/') to ensure that all files are from the same version of Juicebox-Pro.

Go to forum: Juicebox-Pro Support

3,211 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Lite Support)

That is correct. imageScaleMode is a Pro configuration option. I should have made that clear in my post above. Sorry for any confusion.
For reference, all Lite configuration options can be found here. (All configuration options on the Config Options page are supported by Juicebox-Pro.)

Go to forum: Juicebox-Lite Support

3,212 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Lite Support)

BUT what I don't unterstand is the relation of the gallery and the picture measures to each other. What's the logic behind it and how can I calculate the perfect gallery size according to my already converted pictures?

Within a gallery, Juicebox reserves space for the thumbnails and the remainder is used for the image area. This is true no matter what the dimensions of the gallery are.
By default, Juicebox then scales the main image to fit within the image area as large as possible without cropping but whilst respecting the image's aspect ratio.

In your test gallery, image #4 is a different shape to image #3.

If the image has a different aspect ratio to the image area, then the only way for Juicebox to fill the image area with the image would be to set imageScaleMode="FILL" (although, for image #4 in your gallery, this would result in the left and right edges of the image being cropped).

Another possible solution to reduce the space above and below image #4 in your gallery would be to reduce the gallery's height so that the aspect ratio of the image area within the gallery matches the aspect ratio of your images.

Please see this FAQ for further information.
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

Go to forum: Juicebox-Lite Support

3,213 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Lite Support)

Then I published it and now it covers parts of my navigation.

It looks like your gallery's embedding code should be within your <div id="content" class="vier"> ... </div> container. If you move the entire embedding code to within this container, then the gallery should be positioned to the right of your side menu. However, you may need to change the dimensions and/or the position of your <div id="content" class="vier"> ... </div> container in your 'ruthhahn.css' file. At the moment, the div may be too low down on your web page and have a limited width. Check (and change, if necessary) the following code in your 'ruthhahn.css' file.

div#content {
    position: absolute;
    top: 156px;
    left: 270px;
    height: 400px;
}

div#content.vier {
    width: 528px;
}

There is also an example of using a side menu in the Using a Resizable Gallery with a Header support section. You could perhaps copy the sample web page's code (view the source of the page in your browser) and swap the content of the side menu for your own navigation menu.

What I look to achieve is exactly "Juicebox Lite Embedded Example".

It you really want to exactly replicate the layout of the Juicebox Lite Embedded Example, you can copy the HTML code of the page (view the source of the page in your browser) and swap the sample gallery's embedding code for that of your own gallery.

Go to forum: Juicebox-Lite Support

3,214 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

The most likely way to have a third-party editor installed would be through the use of a plugin (or, less likely, through a theme).
It seems unlikely that WP-Juicebox would detect CKEditor or FCKeditor unless such an editor was being used. If you have tried any third-party editors in the past, then perhaps they have not been fully deactivated and uninstalled, resulting in some files begin left behind that WP-Juicebox is detecting.

If you have already checked your plugins and would like me to investigate further, then I would be happy to do so but I would need access to your WordPress installation and web server. If you are agreeable to this, then please let me know and I will send you an email address where you can forward your WordPress and FTP login details on to me. Thank you.

Go to forum: Juicebox-Pro Support

3,215 Reply by Steven @ Juicebox

(7 replies, posted in Juicebox-Lite Support)

The Juicebox Lite Embedded Example uses all default settings (except for changing the gallery's dimensions, background color and setting a Gallery Title and Splash Page Description).

If you let me know exactly what you are looking to achieve (and what you currently have), then perhaps I can help further.
Please post a URL to your gallery's web page so that I can see what your gallery currently looks like. Thank you.

Go to forum: Juicebox-Lite Support

3,216 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

The sort argument within the Flickr API (which is what Juicebox uses to fetch the images from Flickr's servers) supports only the values I mentioned above (and listed on the Flickr API support page).
One way to order Flickr images alphabetically would be to display a Flickr Set (via the Juicebox-Pro flickrSetId configuration option) and to order the images within the set alphabetically within Flickr itself (following the instructions here).

Go to forum: Juicebox-Pro Support

3,217 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

I'm glad that you have been able to resolve your problem.
Thank you for posting back to let me know.

FYI, the flickrSort option within Juicebox-Pro supports all possible values of the Flick API's sort argument (as noted on this Flickr web page), namely date-posted-asc, date-posted-desc, date-taken-asc, date-taken-desc, interestingness-desc, interestingness-asc, and relevance.

Go to forum: Juicebox-Pro Support

3,218 Reply by Steven @ Juicebox

(4 replies, posted in Juicebox-Pro Support)

This error message should be displayed only if a variant of CKEditor or FCKeditor is detected (and WYSIWYG mode is not selected). (It should not be displayed when using the defautl TinyMCE editor.)
Please check that you do not have any plugins installed and activated which use CKEditor or FCKeditor.

Go to forum: Juicebox-Pro Support

3,219 Reply by Steven @ Juicebox

(2 replies, posted in Juicebox-Pro Support)

If you are creating or editing your gallery in JuiceboxBuilder-Pro, try the following (selecting a different value before going back to select 'NONE').

(1) Go to 'Images -> Titles -> Use IPTC Title'
(2) Now go to 'Images -> Titles -> Use None'

(3) Go to 'Images -> Captions -> Use IPTC Caption'
(4) Now go to 'Images -> Captions -> Use None'

If you just want to disable all image titles and captions, then set captionPosition="NONE" in JuiceboxBuilder-Pro's 'Customize -> Caption' section.

Go to forum: Juicebox-Pro Support

3,220 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

@kilooloogung

Just in case you are not aware, Juicebox-Pro has built-in support for a Back Button (without the need for any manual coding) which can be either text or an icon.
Please see here for the available Back Button configuration options.

@wspollack

Unfortunately, what I think max wants is to add a button to the upper-right group of buttons, which I gather isn't possible.

That's right. It is much easier to overlay an HTML element on top of a gallery (which will always be in exactly the same place on the web page), as kilooloogung has done, than to try to introduce a new custom button within the gallery's own Button Bar (which would be fraught with problems, especially without access to the Juicebox source code).

Go to forum: Juicebox-Pro Support

3,221 Reply by Steven @ Juicebox

(5 replies, posted in Juicebox-Pro Support)

Any options you enter into a gallery's Pro Options text area are written to the gallery's XML file and used by Juicebox when the gallery is displayed. The problem may be with either the flickrSort entry or with Flickr itself but without seeing the exact code you use and your gallery, it will be hard to tell.

Please check the following.
(1) In your email, you say you have tried:

flickrSort = “DATE-POSTED-ACS”

Try using this instead:

flickrSort="DATE-POSTED-ASC"

... using standard double-quotes around the value, no spaces around the '=' character and using ASC instead of ACS.

(2) Make sure that you are not using/displaying a Flickr Set or Group. flickrSort does not work for set and group searches which always use the Flickr set display order. To change the order of images in a Flickr set, check here.

(3) Make sure that your WP-Juicebox has successfully been upgraded to Juicebox-Pro. flickrSort is a Pro configuration only and will be ignored by Juicebox-Lite. Instructions for upgrading WP-Juicebox from Lite to Pro can be found here.

(4) Make sure that you do not also set randomizeImages="TRUE" in your gallery's Pro Options text area.

Hopefully one of the suggestions above will help.
If not, please post back with the URL to your gallery so that I can take a look for myself and help further.

Go to forum: Juicebox-Pro Support

3,222 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

It only displays the first image (slightly cropped). No small screen mode or splash page.

What you are describing actually sounds like the Splash Page (which is displayed by default on small screen devices).
For more information on Screen Modes and the Splash Page, please see here.

First of all, I would recommend using a fixed pixed height for your gallery. If you use a percentage height as you currently do (80%), you need to ensure that the parent container(s) of the gallery have heights specified via CSS, otherwise Juicebox may not be able to calculate its own height (it needs to know what its height should be 80% of). This can be difficult to control in a WordPress environment where the gallery's parent containers are generated by the theme. (This is why the default height for a gallery created by WP-Juicebox is 600px.) Please see this note regarding Using Percentage Heights.

Try setting showSplashPage="NEVER" in your gallery's Pro Options text area to embed the gallery directly into the page in Small Screen Mode instead of the Splash Page.
Alternatively, try setting screenMode="LARGE" to force the gallery to be displayed in Large Screen Mode in all browsers and on all devices. (By default, Large Screen Mode does not use the Splash Page. The Splash Page will be used in Large Screen Mode only if showSplashPage="ALWAYS".)

Also, after making any changes, please be sure to clear your browser's cache before reloading your gallery's web page to ensure that your browser is fetching and using the most recent versions of your gallery files from your web server.

Go to forum: Juicebox-Pro Support

3,223 Reply by Steven @ Juicebox

(1 replies, posted in Juicebox-Pro Support)

The solution to your problem probably relies on knowing which image is currently being displayed (so that you can act upon it and display the relevant discussion elsewhere on the page).
You can do this using the Juicebox-Pro API as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
// Give your 'juicebox' object a variable name (in this example 'jb') so that you can refer to it later
var jb = new juicebox({
    containerId: 'juicebox-container'
});
// onImageChange is fired each time a new image is selected
jb.onImageChange = function(e) {
    // e.id is the  index number of the current image being displayed (index starts at 1 for first image)
    var imageIndex = e.id;
    // First image is selected
    if (imageIndex == 1) {
        // Do something...
    }
    // Second image is selected
    if (imageIndex == 2) {
        // Do something else...
    }
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps to get you started on your project.

Go to forum: Juicebox-Pro Support

3,224 Reply by Steven @ Juicebox

(9 replies, posted in Juicebox-Pro Support)

@RajabNatash

I notice that you have copied your posts from your Drupal forum thread to this thread. Thank you for posting your findings in this forum.

The bug reported by the original poster (whereby scrolling down a page with an embedded gallery jumps to the top) has been addressed and will be fixed in the next version of Juicebox (although I do not know when it will be released).
If you would like to be notified when new versions are released, then please join the mailing list at the foot of our homepage, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed.

The developers are also aware that 'minimal-ui' has been removed from iOS 8 and this will be taken into account in the next version of Juicebox.

Go to forum: Juicebox-Pro Support

3,225 Reply by Steven @ Juicebox

(6 replies, posted in Juicebox-Pro Support)

Juicebox-Pro is very flexible (with well over 100 configuration options, an API so that the embedding page can interact with the gallery and the ability to use custom icons, themes, fonts and preloader) but it is not possible to add a custom button to the gallery's own Button Bar.
One possible workaround would be to create a custom button on your web page (alongside your gallery) and use the API to fetch information about the currently displayed image (for example to be sent to a social media platform via a share URL).

I ask for refund then, what is the process for it?

Please check your email. I have sent you a message. Thank you.

Go to forum: Juicebox-Pro Support