There are no Open Graph tags in the demo gallery you quoted but JuiceboxBuilder-Pro already supports this.

When you create a Juicebox-Pro gallery with JuiceboxBuilder-Pro, Open Graph tags are included in the gallery's 'index.html' file.
The tags will looks something like this.

<!-- START OPEN GRAPH TAGS-->
<meta property="og:title" content="Gallery Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="Share Url" />
<meta property="og:image" content="Share Url/images/IMG_1116.jpg" />
<meta property="og:description" content="Gallery Description" />
<!-- END OPEN GRAPH TAGS-->

og:title uses the Gallery Title ('Customize -> Lite').
og:url uses the Share Url ('Customize -> Sharing').
og:image uses the Share Url and appends the relative path to the first image in the gallery.
og:description uses the Gallery Description ('Customize -> General').

3,277

(21 replies, posted in Juicebox-Pro Support)

Click here [Link removed.] to download temec987's solution integrated into the 'wp-juicebox.php' file from the current version of WP-Juicebox (v1.4.2).

Just unzip the file into your 'wp-content/plugins/wp-juicebox/' directory, overwriting the existing 'wp-juicebox.php' file.

Please note that this is not an official solution, it is untested by myself, it will work only for galleries which use the Media Library as the source of images and it may not be possible to integrate the code posted above into future versions of WP-Juicebox (as the source code is subject to change).

Having said that, I hope it helps you out.

3,278

(496 replies, posted in Juicebox-Pro Support)

@marcelbuechel

I understand your request for JuiceboxBuilder to accept images with filenames that contain special characters but the image filenames become part of URLs when they are uploaded to a web server and it would be wise to use only web-safe characters in filenames for this reason. Please see section 2.3 of this document for details.

Characters that are allowed in a URI but do not have a reserved purpose are called unreserved. These include uppercase and lowercase letters, decimal digits, hyphen, period, underscore, and tilde.

JuiceboxBuilder currently handles all images whose filenames use any or all of these characters.

3,279

(1 replies, posted in Juicebox-Pro Support)

You can create thumbnail images of whatever size you like in JuiceboxBuilder-Pro by clicking the 'Change Sizes...' button in the 'Image Size' control panel on the 'Images' tab and entering thumb width and thumb height dimensions.
JuiceboxBuilder-Pro will create thumbnails at the specified dimensions and will set the thumbWidth and thumbHeight configuration options (in the gallery's XML file) to the values that you use.
You can then edit the gallery's 'config.xml' file in a plain text editor and change the thumbWidth and thumbHeight values to whatever you like (for example, to half the actual thumbnail dimensions).
Please note that, currently, thumbnail images will be dynamically scaled to the thumbWidth and thumbHeight values only if the actual thumbnail dimensions and the thumbWidth x thumbHeight dimensions are both square.
Hopefully, in a future version of Juicebox, rectangular images will also be scaled to fill the thumbWidth x thumbHeight dimensions but this is not currently possible.

3,280

(2 replies, posted in Juicebox-Lite Support)

When expanding a Juicebox-Lite gallery, the main image used in the expanded gallery is exactly the same one that is used in the normal (unexpanded) gallery - the image defined by the imageURL in the gallery's XML file.
Also, in Juicebox-Lite, the imageScaleMode configuration option is set its default value of SCALE_DOWN. This will dynamically scale down large images to fit within the gallery's image area but will not scale up smaller images.
Therefore, the images in your gallery should be large enough to fill the image area in the expanded gallery. In the normal (unexpanded) gallery, Juicebox will just shrink them down a bit to fit (your images will not be cropped).

If you were to purchase Juicebox-Pro, you would be able to change the value of imageScaleMode to SCALE_DOWN, SCALE, FILL, STRETCH or NONE. Descriptions of these values can be found in the Main Image section of the Config Options page.
Also, with Juicebox-Pro, you would be able to have a Multi-Size Image gallery whereby you would be able to have three different image sizes in your gallery and Juicebox would determine the best image size to be displayed depending on the device, browser window size and whether or not the gallery is expanded. For example, in Large Screen Mode, 'medium' images would be used in the normal (unexpanded) gallery and 'large' images would be used in the expanded gallery. (You can choose the dimensions for all three image sizes in JuiceboxBuilder-Pro.) For more information about Multi-Size Image Support, please see this blog entry.

Can you share its config.xml?

The Lite Embedded demo gallery's 'config.xml' file can be found here (although the information above may be more useful):
http://www.juicebox.net/demos/lite/full/config.xml

3,281

(2 replies, posted in Juicebox-Pro Support)

When you open an existing gallery with JuiceboxBuilder-Pro, be sure to select and highlight the gallery folder (the folder containing the 'config.xml file), not the 'config.xml' file itself. As it is a folder which should be selected, this may explain why all the files inside your gallery folder are greyed out.

3,282

(3 replies, posted in Juicebox-Pro Support)

the settings for thumbnail rows and columns doesn't seem to have any effect.

The maxThumbRows and maxThumbColumns configuration options are used only in Large Screen Mode when the thumbnails and main images are displayed on the same page. In Small Screen Mode, the number of thumbnails displayed is determined by the size of the browser window and the thumbnails themselves.

Whether you expand the original gallery when a thumbnail is clicked or use a click handler on the thumbnails to load a new gallery displaying the selected image, you will still have the problem of the original gallery changing from the thumbnail page to a main image page. (It sounds like you want the thumbnails to act as links and to always be displayed as thumbnails on your main web page). Unfortunately, Juicebox was not designed to allow thumbnails to be used as links.

It sounds like one possible solution might be to create your own thumbnail links on your web page and link directly to corresponding images in a gallery by setting enableDirectLinks="TRUE" ('Customize -> General') and using URLs such as: http://www.example.com/gallery/#2 (for example, to display the 2nd image in the gallery).

3,283

(1 replies, posted in Juicebox-Pro Support)

It sounds like your gallery may still be using Juicebox-Lite rather than Juicebox-Pro.
Please check that your gallery is using Pro (if you see the Juicebox logo in the lower-right corner of your gallery then your gallery is Lite) and if you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.

3,284

(3 replies, posted in Juicebox-Pro Support)

By default, a Splash Page is displayed when a gallery is embedded at less than 100% x 100% and displayed in Small Screen Mode.
The Splash Page is not displayed in the iframe gallery as the gallery is actually embedded (at 100% x 100%) into the HTML page being loaded into the iframe.
If you use the standard embedding code and do not want to use a Splash Page, then you can set showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).

(would like thumbs to be bigger?)

If using local images, you can set the dimensions of your gallery's thumbnails by clicking the 'Change Sizes...' button on the 'Images' tab. New thumbnails will be generated at the specified dimensions and the thumbWidth and thumbHeight configuration options will be set accordingly. For a Flickr gallery, just open your gallery's 'config.xml' file in a plain text editor and add entries such as thumbWidth="100" and thumbHeight="80" to the opening <juiceboxgallery> tag.

when I click on one of the thumbs the large image is restricted by the iFrame height.

A Juicebox gallery's dimensions do not change when clicking on a thumbnail image and it is not possible to treat the thumbnail page in Small Screen Mode like a Splash page (expanding the gallery on a thumbnail click).
It might be possible to achieve this (using the Juicebox-Pro API, CSS and JavaScript) but you may run into complications with the normal hide/show thumbnails and expand/close gallery functionality. You might need to use some variables to keep track of the expanded state of the gallery and the visibility of the thumbnails to avoid unnecessarily closing the gallery (via the toggleExpand() method) when a user clicks on a thumbnail whilst in expanded mode. It might become very complicated very quickly.
Perhaps the best option would be to disable the Splash Page (if you do not want to use it) and display the Expand Button (by setting showExpandButton="TRUE" in JuiceboxBuilder-Pro's 'Customize -> Lite' section) so that users can expand the gallery fullscreen by clicking the button. (Please note that the Expand Button is disabled when using an iframe. This is noted in Option #2 here.)

3,285

(1 replies, posted in Juicebox-Lite Support)

everything is great on desktop, but on iOS I get strange results like only the thumbnails are visible (iPhone)

This sounds like you are describing Small Screen Mode (whereby the user is presented with a page of thumbnails from which a main image can be selected). Juicebox displays the gallery in Small Screen Mode by default on small screen devices.
Please see here for more information on Screen Modes.
With Juicebox-Pro, you can force Juicebox to always display the gallery in Large Screen Mode (no matter what browser or device is being used) by setting screenMode="LARGE" (in JuiceboxBuilder-Pro's 'Customize -> General' section).

or the image far on the right and only half visible (iPadmini)

This sounds like it could be a problem with the gallery dimensions, the gallery's parent container size or possibly a CSS conflict.
These would certainly be things to check.
Also, do you see this problem on your iPad Mini with any of our own demo galleries here and does the problem in your own gallery happen in both Chrome and Mobile Safari (or just one of the browsers)? This might help point towards the cause of the problem.

I could not find a way to get rid of the captions, titles, thumbnails at all cause most of the time I wouldn't need them.

Hiding captions and thumbnails are Pro-only options. You would hide the captions by setting captionPosition="NONE" and the thumbnails by setting showThumbsonLoad="FALSE", showSmallTHumbsOnLoad="FALSE", showThumbsButton="FALSE" and showSmallThumbsButton="FALSE".

Now I ask myself if I would be able to customize Juicebox (remove titles, margins, thumbnails or dots...) and use it with Adobe Edge Animate.

With Juicebox-Pro, you would certainly be able to remove all text, margins, thumbnails and dots. Please see the full list of Pro configuration options here.

There are no specific embedding instructions for using Edge Animate but, instead of using an iframe, you could use the baseUrl method of embedding as documented here.
Essentially, you would upload the entire gallery folder to your web server and paste the baseUrl embedding code into your web page. It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrll itself) are correct.
If there is a problem with loading the gallery immediately as soon as your web page loads, you could wrap the gallery's embedding code in a JavaScript function and run the function when required.

It sounds like many of the configuration options you might want to use would be available in Juicebox-Pro but not in Juicebox-Lite.
We do not offer a trial version of Juicebox-Pro but we do offer a money-back guarantee. Please see this FAQ for details:
Can I try a trial version of Juicebox-Pro?

3,286

(1 replies, posted in Juicebox-Pro Support)

On the 'Images' tab of JuiceboxBuilder-Pro, you can drag and drop thumbnails into a new order.
You can also use Ctrl+Click to highlight a selection of images or Shift+Click to highlight a block of images and then drag and drop the highlighted images into a new order.

You can also sort the images using the 'Images -> Sort' option from the drop-down menu at the top.
Possible values to choose from are 'By File Name', 'By File Date' and 'Reverse'.

can one solve self a discussion ?

Yes. Just edit the first post in the thread and type "[SOLVED]" at the end of the 'Topic subject'.

3,287

(496 replies, posted in Juicebox-Pro Support)

@ties

Thank you for the suggestion.

As WP-Juicebox does not currently include SEO functionality, you may be interested in this forum post.
Please note that it is not an official solution and was written for an older version of WP-Juicebox but if you are familiar with PHP and the inner workings of WordPress, you might find it useful.

3,288

(2 replies, posted in Juicebox-Pro Support)

If you want to allow a user to start and stop an automated slideshow, set showAutoPlayButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section) and the AutoPlay button will be displayed in the gallery's Button Bar.

If you want the slide show to start as soon as the gallery is loaded, set autoPlayOnLoad="TRUE" ('Customize -> AutoPlay').

If you want to have the images loop (instead of the slide show stopping at the last image), set enableLooping="TRUE" ('Customize -> General').

You can change the image transition type and image transition time using the imageTransitionType and imageTransitionTime configuration options ('Customize -> Main Image').

Other AutoPlay options (such as displayTime) can be found in the 'Customize -> AutoPlay' section.
Please see here for a list of AutoPlay options.

3,289

(5 replies, posted in Juicebox-Pro Support)

Thank you for providing the URL to your website.

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

In the meantime, try checking the permissions of the files and folders in the 'wp-content/plugins/wp-juicebox/' directory on your web server to make sure that they are not too restrictive. Default permissions of 755 for folders and 644 for files should be fine.

3,290

(5 replies, posted in Juicebox-Pro Support)

In order to investigate further, I will need some more information. Please post the URL to your WordPress website so that I can take a look.
It would also help if I had access to your WordPress installation and web server. If you are willing to allow me access, please let me know and I will send you an email so that you can provide me with your login details. Thank you.

3,291

(5 replies, posted in Juicebox-Pro Support)

First of all, please try clearing your browser's cache and trying again.
This will ensure that your browser fetches and uses the most recent versions of the WP-Juicebox files from your web server.

If this does not help, then please try temporarily disabling all plugins other than WP-Juicebox to see if this helps. It it does, then re-enable your plugins one by one (checking the WP-Juicebox functionality after each one) until you find the source of the conflict.

If you use the BulletProof Security plugin, then this may be the cause of your problem and you will need to add a skip/bypass rule to the .htaccess file in your root directory as follows:

# Juicebox skip/bypass rule
RewriteCond %{REQUEST_URI} ^/wp-content/plugins/wp-juicebox/ [NC]
RewriteRule . - [S=13]

If you do not use the BulletProof Security plugin, then please check your .htaccess file for an entry such as:

<Files *.php>
    deny from all
</Files>

If you find such an entry, either comment it out or remove it and WP-Juicebox should work as expected.

3,292

(1 replies, posted in Juicebox-Pro Support)

As all your image titles are just a single line of text, it might be easier to just increase the maxCaptionHeight so that the text is vertically centered within the caption area.

Otherwise, to vertically center an image title using CSS, you could try something like the following:

.jb-cap-content.jb-caption-title  { 
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Thank you for your suggestion.

In order to ensure that ideas for future versions are not overlooked by the developers, I would encourage you to post in the Feature Requests thread. Thank you.

3,294

(8 replies, posted in Juicebox-Pro Support)

@come_paglia

It looks like the following should work on your web page:

#nav li.menu-item  { 
    z-index: 9999;
}

3,295

(3 replies, posted in Juicebox-Pro Support)

All is good.

That's good to hear. I do not know what might have been causing the temporary glitch but I am glad that everything seems to be working OK at the moment.

3,296

(3 replies, posted in Juicebox-Pro Support)

On further investigation, the problem was not in finding a suitable CSS selector to attach the click handler to (the correct class is .jb-idx-thumb) but the fact that the class does not exist in the Document Object Model immediately after the Juicebox-Pro API event onInitCompete is fired (when the gallery should be complete and ready). The trick is to delay the setting up of the click handler (until such time as the .jb-idx-thumb class exists in the DOM) by using setTimeout.
Try the following which will open the current image's corresponding linkURL when either a thumbnail or main image is clicked.

<script>
    var jb = new juicebox({
        changeImageOnHover: 'TRUE',
        containerId: 'juicebox-container',
        imageClickMode: 'OPEN_URL'
    });
    jb.onInitComplete = function() {
        setTimeout(function() {
            $('.jb-idx-thumb').click(function() {
                var index = jb.getImageIndex();
                var info = jb.getImageInfo(index);
                var url = info.linkURL;
                window.location.href = url;
            });
        }, 500);
    };
</script>
<div id="juicebox-container"></div>

I have logged a bug report with the developers (regarding the fact that the gallery is not complete and ready immediately after onInitComplete is fired) and it should hopefully be fixed in a future version but the code above should work fine in the meantime.

3,297

(3 replies, posted in Juicebox-Pro Support)

Juicebox was not designed with this in mind (the ability to run some custom JavaScript code or to redirect to a new URL on clicking a thumbnail).

If it is possible to find a CSS selector (a class or id) for the thumbnails within Juicebox which you could attach a jQuery click handler to, then you could perhaps run some JavaScript code using the Juicebox-Pro API to get the index of the image currently being displayed when the element is clicked (and then act on the image index accordingly).

The code might look something like this:

<script>
    var jb = new juicebox({
        backgroundColor: '#222222',
        changeImageOnHover: 'TRUE',
        containerId: 'juicebox-container',
        galleryHeight: '400',
        galleryWidth: '600'
    });
    jb.onInitComplete = function() {
        $('CSS_SELECTOR').click(function() {
            var currentImage = jb.getImageIndex();
            switch (currentImage) {
                case 1:
                    window.location.href = 'http://www.example.com/';
                    break;
                case 2:
                    window.location.href = 'http://www.google.com/';
                    break;
                default:
                    window.location.href = 'http://www.juicebox.net/';
                    break;
            }
        });
    };
</script>
<div id="juicebox-container"></div>

Unfortunately, I have not yet found a CSS selector which works. This may be due to Juicebox having its own click hander on the thumbnails so it may not be possible but it might be worth investigating further. I hope this at least points you in the right direction.

3,298

(4 replies, posted in Juicebox-Pro Support)

The following demo gallery layouts are included as presets in the current version of JuiceboxBuilder-Pro: Colors, Embedded, Full, Hong Kong, Sharing, Simple, Slider, Top Left. (They can be selected from the 'Load Preset' drop down menu on the 'Customize' tab).

The XML files for galleries can usually be found manually by adding 'config.xml' to the demo gallery's URL.
For example, the 'Flat' demo gallery can be found here: http://www.juicebox.net/demos/pro/flat/
The 'Flat' demo gallery's XML file can be found here: http://www.juicebox.net/demos/pro/flat/config.xml

If you save the 'Flat' demo gallery's XML file to your hard drive, then you can open it as a preset via the 'Presets -> Load Preset...' option from the drop-down menu at the top of JuiceboxBuilder-Pro.

1) To add images to a gallery, I have to add them to the page, then delete them again so that they will only show in the gallery. Otherwise they'll show twice, as a regular image plus in the gallery. What can I do to avoid having to delete them from the page?

It sounds like you may be clicking 'Insert into post'. This is not necessary (and will include the images in the post outside the gallery). All that is required to include images in a WP-Juicebox gallery is to attach them to the post. Just drag and drop your images into the media window and after they have completed uploading, just close the media window using the cross in the upper-right corner.

2) More seriously, when expanding the gallery, the page title is not hidden but stays sitting on top of the image. What to do?

Unfortunately, there is currently a known bug whereby elements which have explicitly been assigned a CSS 'position' are not covered by the fullscreen gallery (they should be). This bug should hopefully be fixed in the next version of Juicebox.
In the meantime, there are a couple of workarounds:

(1) Set useFullscreenExpand="TRUE" (in the WP-Juicebox gallery settings interface section).
... or:
(2) Set expandInNewPage="TRUE" in (in the Pro Options text area in your gallery settings window). When the gallery is expanded, it will be displayed on a page of its own rather than on top of the embedding page. Please note that this option is available in Juicebox-Pro only (and not in Juicebox-Lite).

@BrianP6

When the bug is fixed, it will be fixed for all browsers on all devices.
If you are asking if, currently (with the bug present), setting expandInNewPage="TRUE" will fix the bug on mobile devices, then yes, it will.
Setting expandInNewPage="TRUE" forces the gallery to be expanded on a new page of its own where the code from the embedding page can no longer conflict with the gallery's own code.
However, if you are using Juicebox-Lite, then your gallery will be using expandInNewPage="AUTO" (the default value for this configuration option) and on iOS devices, this setting will automatically expand the gallery on a new page anyway to avoid issues with incorrectly scaled content when switching between regular and expanded mode. Please see the Expand Gallery Behavior support section for more information.