5,351

(4 replies, posted in Juicebox-Lite Support)

In order to embed a Juicebox gallery you will need to be able to do two things:
(1) Upload your gallery folder to a publicly accessible web server
(2) Embed the gallery in a web page

According to this Wix forum thread:

Wix doesn't have FTP . We only host the documents that are created by our users.

You can't upload external files to Wix.

Therefore, you would not be able to upload your gallery folder to Wix and would need to find an alternative web host. If you do not have web space with a regular web host, then a suitable web host for a Juicebox gallery would be Dropbox.

To upload your gallery folder to Dropbox:
(1) Download and install the Dropbox client program (from the link above)
(2) Run the install program and sign up for a free Dropbox account
(3) Create your Juicebox gallery with the method of your choice (e.g. JuiceboxBuilder)
(4) Drag and drop the entire gallery folder into the 'Public' folder within the newly created Dropbox folder on your computer
(5) Navigate towards your gallery's 'index.html' file (within 'username/Dropbox/Public/gallery_folder/'), right-click it and select 'Dropbox -> Copy public link'

To embed your gallery in your Wix web page, insert an <iframe> whose 'src' attribute points towards the 'index.html' page within your gallery folder (the URL you copied in Step #5 above if using Dropbox), e.g.:

<iframe src="URL_to_gallery_index_page" width="800" height="600" frameborder="0" scrolling="no"></iframe>

For information on using an <iframe> within Wix (as an HTML Widget), please see this web page.

also, when using the juicebox builder: trying to upload my images into the builder, it only uploads/processes some of my images and i cant figure out why? they are all under 300k and they are all jpegs

I will contact you via email with an email address where you can send me some sample images that JuiceboxBuilder fails to process, if you like, so that I can investigate further. Thank you.

5,352

(4 replies, posted in Juicebox-Lite Support)

Using relative links within your gallery's embedding code should work.
After making changes to your gallery, you may need to clear your browser's cache before reloading the gallery.

Currently, entering 'www.fabianbond.co.uk' into a browser's address bar redirects the user to 'www.fabianbond.co.uk/FabianBond/FBHome.html'. If you can redirect to 'fabianbond.co.uk/FabianBond/FBHome.html' instead, this should also work.

5,353

(496 replies, posted in Juicebox-Pro Support)

The ability to set the 'Thumb Frame Width', the 'Thumb Hover Frame Width' and the 'Thumb Selected Frame Width' independently of each other within the JuiceboxBuilder-Pro interface is also on the roadmap and should hopefully be included in the next version of Juicebox-Pro.

5,354

(2 replies, posted in Juicebox-Pro Support)

Different browsers likely have different ideas about what the best algorithm is for dynamic rescaling of images.
Your images do not look blurry in Firefox 15.0.1 on my PC. If anything, they look a little over-sharpened and jagged lines are visible on diagonals.
It might require a little trial and error in creating your original images (perhaps by increasing the quality and reducing the sharpening) before you find a setting which produces images which look acceptable in all browsers.

5,355

(496 replies, posted in Juicebox-Pro Support)

@paulr

Can you tell us which value(s) to change if we want to completely eliminate the drop shadow?

Just remove the following lines from the code you posted:

    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);

Is drop shadow control going to be incorporated into the graphical interface?

Yes. We plan to incorporate drop shadow options (color, opacity and blur) for thumbnails and main images in a future release of Juicebox-Pro. These options will be available within the JuiceboxBuilder-Pro interface. However, I do not know when this will be.

Also, on the Juicebox site, the link showing how to get the software to use a custom theme doesn't seem to work.

I think the link you refer to is the 'themeUrl option' link on the Juicebox - Theming page which should point to the Embed Options section of the Juicebox - Config Options page. I have now fixed the link (see links above).

5,356

(6 replies, posted in Juicebox-Lite Support)

Make sure you embed each new gallery into a <div> with a unique 'id'.
After embedding the first two galleries, the embedding code for the next one would look like this:

<script src="http://www.example.com/gallery3/jbcore/juicebox.js"></script>
<script>
  new juicebox({
      containerId : 'juicebox-container3',
      baseUrl : 'http://www.example.com/gallery3/',
      galleryWidth: '100%',
      galleryHeight: '600'
  });
  </script>
<div id="juicebox-container3"></div>

If you reuse 'juicebox-container' ids, then on your home page (when many posts are displayed), there will be different galleries using the same 'juicebox-container' id and problems will occur.

If the dimensions of your original images are within the maximum bounds specified by the 'Max Image Size' values, then Juicebox-Pro will not resize your images and will simply copy them to the output 'images' folder. The 'Quality' setting becomes a variable in a process which is bypassed (the resizing algorithm) and is, therefore, not used.
Check to see if this is perhaps the cause of the problem you are experiencing.

5,358

(6 replies, posted in Juicebox-Lite Support)

You can embed multiple Juicebox galleries in a single post manually if you wish.

The process is as follows:
(1) Create your Juicebox galleries with the method of your choice, e.g. Lightroom plugin
(2) Upload the complete gallery folders (not just the contents) to your web server via FTP. It does not matter where you upload the folders to as long as you know where they are.
(3) Embed each gallery in your post using the baseUrl method as described here.

A few things to bear in mind:
(1) Make sure, when entering the embedding code into the body of the post, that the method of entry is 'HTML' rather than 'Visual'.
(2) You will need to embed each gallery into a <div> with a unique 'id'.
(3) In a WordPress environment, it might be easier to use absolute URLs rather than relative URLS in your embedding code in order to point to the gallery folders.
(4) When embedding multiple galleries in the same page, it is necessary to load the 'juicebox.js' file only once.

With this in mind, take the following as an example.
Say you have two gallery folders named 'gallery1' and 'gallery2' and you have uploaded them to the root of your web domain, in this example named 'www.example.com'.
Your embedding code would look something like this:

<script src="http://www.example.com/gallery1/jbcore/juicebox.js"></script>
<script>
  new juicebox({
      containerId : 'juicebox-container1',
      baseUrl : 'http://www.example.com/gallery1/',
      galleryWidth: '100%',
      galleryHeight: '600'
  });
  </script>
<div id="juicebox-container1"></div>
<script>
  new juicebox({
      containerId : 'juicebox-container2',
      baseUrl : 'http://www.example.com/gallery2/',
      galleryWidth: '100%',
      galleryHeight: '600'
  });
  </script>
<div id="juicebox-container2"></div>

5,359

(17 replies, posted in Juicebox-Pro Support)

Hello.

I have taken a look at your code and all seems OK. However, as you have discovered, it does not seem to work.
When clicking on a link, the URL in the browser's address bar changes to reflect the link but the query string is not passed to the pop-up window.
If you paste the URL directly into the address bar, the query string is passed to the pop-up window as expected.
There seems to be no way to distinguish between your home page and a page within your pop-up window using either PHP techniques (such as $_SERVER elements) or WordPress techniques (such as the is_home() method) as everything I have tried returns the same value on your home page as it does in the pop-up window. Both techniques work fine on my own web server using the default WordPress theme.

Only JavaScript is able to determine the URL of the page being displayed in the pop-up window so rather than try to prevent the shortcode from being processed on your home page, it looks like the only solution would be to allow the shortcode to be processed on all pages (and for Juicebox embedding code to be present on all pages) but to prevent the Juicebox embedding code from being executed on your home page by wrapping the Juicebox embedding code in a JavaScript conditional which is true only in the pop-up window.

Use the following as the shortcode_handler() method in your 'wp-juicebox.php' file:

function shortcode_handler($atts) {
        extract(shortcode_atts(array('gallery_id'=>'0'), $atts));
        if ($gallery_id != 0) {
            $gallery_filename = $this->get_gallery_path() . $gallery_id . '.xml';
            if (file_exists($gallery_filename)) {
                $dom_doc = new DOMDocument();
                $dom_doc->load($gallery_filename);
                $settings_tags = $dom_doc->getElementsByTagName('juiceboxgallery');
                $settings_tag = $settings_tags->item(0);
                $gallery_width = $settings_tag->getAttribute('e_galleryWidth');
                $gallery_height = $settings_tag->getAttribute('e_galleryHeight');
                $background_color = $settings_tag->getAttribute('e_backgroundColor');
                $background_opacity = $settings_tag->getAttribute('e_backgroundOpacity');
                $background_rgba = $this->get_rgba($background_color, $background_opacity);
                if ($gallery_width == '') {
                    $gallery_width = '100%';
                }
                if ($gallery_height == '') {
                    $gallery_height = '600px';
                }
                $upload_dir = wp_upload_dir();
                $gallery_filename = $upload_dir['baseurl'] . '/juicebox/' . $gallery_id . '.xml';
return <<<EOF
<!--START JUICEBOX EMBED.-->
<script type="text/javascript">
if (window.location.href != 'http://www.alexis.it/') {
    new juicebox({
        backgroundColor : '$background_rgba',
        containerId : 'juicebox-container$gallery_id',
        configUrl : '$gallery_filename',
        galleryHeight : '$gallery_height',
        galleryWidth : '$gallery_width'
    });
}
</script>
<div id="juicebox-container$gallery_id"></div>
<!--END JUICEBOX EMBED.-->
EOF;
            } else {
                return '<div><p>WP-Juicebox Gallery Id ' . $gallery_id . ' has been deleted.</p></div>';
            }
        } else {
            return '<div><p>WP-Juicebox Gallery Id cannot be found.</p></div>';
        }
    }
}

Please note that this method does not require the use of query strings so you can change your theme's 'index.php' file back to its original version to remove the '?jb=true' references.

5,360

(17 replies, posted in Juicebox-Pro Support)

Thank you for providing your login details. (I have left everything as I found it.)

Having run a few tests, I can confirm that as far as your server is concerned, your main page and your pop-up window are one and the same page and they cannot be distinguished using $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"] as the same value is returned for each.
I have also tried $_SERVER["HTTP_REFERER"] and $_SERVER["PHP_SELF"] but to no avail.

As there is no way to check using PHP whether the shortcode_handler() function is being run inside a frame or pop-up window, the only other possible solution I can think of at the moment is to:
(1) Disable processing of the Juicebox shortcode by default.
(2) Pass a query string variable in the URL to be opened by your pop-up window.
(3) Check (within the shortcode_handler() function) to see if the variable is present and process the shortcode if it is.

This would require that you change your shortcode_handler() conditional to the following:

if (is_singular() || $_GET['jb'] == true) {

... and you would also have to ensure that your pop-up window links are changed from:

<a href="http://www.alexis.it/fashion-week/parigi/parigi-guy-laroche-en-bleu" rel="#pin-1622" class="whitebox">

... to:

<a href="http://www.alexis.it/fashion-week/parigi/parigi-guy-laroche-en-bleu?jb=true" rel="#pin-1622" class="whitebox">

If the code that generated the links currently look like this:

<a href="<?php the_permalink(); ?>" rel="#pin-<?php the_ID(); ?>

... then change it to:

<a href="<?php the_permalink(); ?>?jb=true" rel="#pin-<?php the_ID(); ?>

This solution should work fine.
I do not know where the code for your links is generated within your theme but I tested it on your main page and it works as expected.

With regard to the CSS clashes resulting in odd formatting of your galleries, currently the only solution (other than changing the CSS within your theme) would be to create your galleries on your computer (i.e. not using WP-Juicebox) and then embed them in iframes as I have previously suggested.

5,361

(17 replies, posted in Juicebox-Pro Support)

Correspondence continued via email.
For the sake of completeness and for others following this thread, I will post my replies in this forum thread also.

5,362

(4 replies, posted in Juicebox-Lite Support)

When I view your gallery, 15 images are displayed.
If I enter your gallery's Flickr configuration options into Flickr's own API Explorer, 15 images are returned.
(Go to the web page in the link above, enter your user_id (87772524@N06) and your chosen tags (travel), select the 'Send' checkboxes for these two items and click the 'Call Method...' button at the bottom of the page.)
If I remove the tags option from the search, all 17 images are returned.

The missing images are 'Francoi and his donkey' and 'French and American Co-pilgrims' but I do not see anything obvious about these two images that make them stand out from the others.

When tagging images in Flickr, it can take some time (up to 48 hrs) for the tags to propagate fully through Flickr's system in order for the images to show up in API searches so perhaps they will show up in time. Take a look at the Flickr: Help: Tags page for further suggestions.
If, after 48 hrs, the two missing images still do not show up, I would try re-uploading them to Flickr and re-tagging them.

A workaround would be to group your images within Flickr as a set and display the set using Juicebox's flickrSetId configuration option.

5,363

(4 replies, posted in Juicebox-Lite Support)

Juicebox uses a Flickr API search to fetch the required images from Flickr's servers. The API search terms will be the same each time so if the results are inconsistent, this may be due to a problem at Flickr's end.
Please post the URL to your gallery so that I can take a look and see if I can replicate the problem you are experiencing.

5,364

(496 replies, posted in Juicebox-Pro Support)

@paulr

It would also be nice if it were possible to download or copy the link of an image without opening up an expanded view window. I know virtually nothing about HTML5 ... is this locking of the image intrinsic or is it a feature that can be turned on or off?

This is due to the fact that the gallery is displayed dynamically using JavaScript and XML and the images are not simply displayed on the page using traditional <img> tags.
One way to achieve what you are looking to do would be to link directly to the images within your gallery's captions.
If creating or editing your gallery with JuiceboxBuilder-Pro, this can be done automatically by selecting 'Images -> Captions -> Use Link URL' from the drop-down menu at the top. The caption fields for all images will then be filled with links to the images so that users can right-click and save the image directly.

5,365

(17 replies, posted in Juicebox-Pro Support)

From what you have said, it sounds like your pop-up is still classed as being your main overview page and, as such, blocking the shortcode from running on one will also block it from running on the other. There may be no easy solution. However, please check your email. I have sent you a message with an email address where you can provide me with your web server and WordPress login details if you like.

5,366

(17 replies, posted in Juicebox-Pro Support)

The latest code you posted is correct, replacing the if (is_singular()) { line in the shortcode_handler() method in the 'wp-juicebox.php' file. Try removing the trailing slash from the "www.alexis.it/" part of the code.
It may not work with all web servers but the solution to your problem lies with finding a conditional expression to replace if (is_singular()) { with such that the Juicebox shortcode will not be processed on your main overview page.

I would need access to your web server to test what is actually returned by using the different $_SERVER elements so trial and error may be required.

5,367

(5 replies, posted in Juicebox-Pro Support)

It's ok, the the src url, but like this, the plugin respond with: "Juicebox Error: Config XML file not found" of course.

My suggestion to embed the gallery in an <iframe> is an alternative to using the WP-Juicebox plugin. It is not possible to use WP-Juicebox in conjunction with the <iframe> embedding method.

Please see this FAQ regarding the "Juicebox Error: Config XML file not found" message.
When I view my gallery I see the message 'Config XML file not found'. How do I fix this?

When embedding a gallery into an <iframe>, here are a few pointers:

  • Make your gallery's dimensions 100% x 100% (so that it fills the <iframe> no matter what its dimensions are).

  • Once you have created your gallery with JuiceboxBuilder-Pro, do not modify the embedding code in the 'index.html' file and do not move or rename any files within the gallery folder.

  • Upload the complete gallery folder (not just the contents) to your web server.

  • Use an <iframe> such as the following, ensuring that the 'src' attribute of the <iframe> points towards the 'index.html' page inside the gallery folder.

<iframe src="http://www.example.com/gallery/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Cannot find a way to delete drop shadow on images
I think there is also drop shadow on captions as they are blurry

To remove the drop-shadow from all elements within your gallery, open the file 'jbcore/classic/theme.css' and search for and delete all lines which contain the term 'shadow'.

Also, the captions are not consistent - some left, some center, some somewhere in between.

Captions can be positioned horizontally via the captionHAlign Pro Option, whose value can be LEFT, CENTER or RIGHT.
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look.

5,369

(5 replies, posted in Juicebox-Pro Support)

The issue could be caused by the CSS of your current WordPress theme clashing with the CSS of the Juicebox gallery itself.
You could try temporarily changing your WordPress theme (perhaps to the default Twenty Ten theme) to see if this resolves the issue.
If is does, you could then try isolating the Juicebox gallery from the rest of your web page (to avoid such CSS clashes) by embedding the gallery using an <iframe> instead of the embedding code currently used by the WP-Juicbebox plugin. This method of embedding is documented as Option #2 here.

It would involve the following steps:
(1) Create the Juicebox gallery on your computer using a program such as JuiceboxBuilder-Pro.
(2) Upload the entire gallery folder to your web server via FTP.
(3) Embed the gallery in a WordPress post using an <iframe> such as the following, ensuring that the 'src' attribute of the <iframe> points towards the 'index.html' page inside the gallery folder. Also, make sure that, when entering the <iframe> code into the body of your post, the method of entry is 'HTML' rather than 'Visual'.

<iframe src="http://www.example.com/gallery/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>

5,370

(17 replies, posted in Juicebox-Pro Support)

WordPress will either parse the Juicebox shortcode and display the gallery or not. In a traditional WordPress theme (with no pop-ups), my code above will display the gallery when the post is viewed on its own page but will not display the gallery on the main overview page.
WordPress does not seem to classify your pop-up as being the post's own page (as the is_singular() method returns 'false' when the post is viewed in your pop-up).
Rather than try to determine whether or not the code is being parsed within your pop-up (and display the gallery if it is), you could instead try to prevent the Juicebox shortcode from being processed on your main overview page by changing the following code in the shortcode_handler() method (from the 'wp-juicebox.php' file) that I posted above.
Change:

if (is_singular()) {

to:

$pageURL = $_SERVER["SERVER_NAME"] . $_SERVER["REQUEST_URI"];
if ($pageURL != "www.alexis.it/") {

5,371

(4 replies, posted in Juicebox-Lite Support)

Your gallery is located at http://www.fabianbond.co.uk/ but the link from the Google search directs the user to http://fabianbond.co.uk/ (i.e. not the 'www' subdomain where the gallery is located).
In order for a Juicebox gallery to function correctly, all the files (including the HTML document containing the JavaScript embedding code) must be on the same domain or subdomain.
This is due to the JavaScript same-origin policy security restriction. Please see this web page for more information.
Try changing the URLs in your gallery's embedding code from absolute URLs using the 'www' subdomain to relative URLs.
For example, change:

<!--START JUICEBOX EMBED-->
<script src="http://www.fabianbond.co.uk/FabianBond/Country/jbcore/juicebox.js"></script>
<script>
  new juicebox({
      containerId : 'juicebox-container',
      baseUrl : 'http://www.fabianbond.co.uk/fabianbond/Country',
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

... to:

<!--START JUICEBOX EMBED-->
<script src="../Country/jbcore/juicebox.js"></script>
<script>
  new juicebox({
      containerId : 'juicebox-container',
      baseUrl : '../Country',
  });
  </script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Otherwise, you would need to either:

5,372

(496 replies, posted in Juicebox-Pro Support)

@TexStarPhoto

I am interested in a way for the main image to be as large as possible (aspect ratio preserved) within the screen area.

Try using the following settings in your gallery's XML file:

imageScaleMode="SCALE"
imagePadding="0"
stagPadding="0"
showLargeThumbs="FALSE"

A list of all Juicebox-Pro configuration options can be found here.

5,373

(17 replies, posted in Juicebox-Pro Support)

No matter where WordPress displays a post containing a Juicebox gallery (whether it is on an overview page along with other posts or on a page of its own), the shortcode within the post (e.g. [juicebox gallery_id="4"]) will be processed and the gallery will be displayed.
You can override this behavior by modifying the plugin's 'wp-juicebox.php' file. Open 'wp-juicebox.php' in a plain text editor and replace the shortcode_handler() function (lines 1052 - 1106 inclusive) with the following:

    function shortcode_handler($atts) {
        extract(shortcode_atts(array('gallery_id'=>'0'), $atts));
        if (is_singular()) {
            if ($gallery_id != 0) {

                $gallery_filename = $this->get_gallery_path() . $gallery_id . '.xml';

                if (file_exists($gallery_filename)) {

                    $dom_doc = new DOMDocument();
                    $dom_doc->load($gallery_filename);

                    $settings_tags = $dom_doc->getElementsByTagName('juiceboxgallery');
                    $settings_tag = $settings_tags->item(0);

                    $gallery_width = $settings_tag->getAttribute('e_galleryWidth');
                    $gallery_height = $settings_tag->getAttribute('e_galleryHeight');
                    $background_color = $settings_tag->getAttribute('e_backgroundColor');
                    $background_opacity = $settings_tag->getAttribute('e_backgroundOpacity');
                    $background_rgba = $this->get_rgba($background_color, $background_opacity);

                    if ($gallery_width == '') {
                        $gallery_width = '100%';
                    }

                    if ($gallery_height == '') {
                        $gallery_height = '600px';
                    }

                    $upload_dir = wp_upload_dir();
                    $gallery_filename = $upload_dir['baseurl'] . '/juicebox/' . $gallery_id . '.xml';

return <<<EOF
<!--START JUICEBOX EMBED.-->
<script type="text/javascript">
    new juicebox({
        backgroundColor : '$background_rgba',
        containerId : 'juicebox-container$gallery_id',
        configUrl : '$gallery_filename',
        galleryHeight : '$gallery_height',
        galleryWidth : '$gallery_width'
    });
</script>
<div id="juicebox-container$gallery_id"></div>
<!--END JUICEBOX EMBED.-->
EOF;

                } else {
                    return '<div><p>WP-Juicebox Gallery Id ' . $gallery_id . ' has been deleted.</p></div>';
                }
            } else {
                return '<div><p>WP-Juicebox Gallery Id cannot be found.</p></div>';
            }
        } else {
            return '<div><p>Open post to view WP-Juicebox Gallery Id ' . $gallery_id . '.</p></div>';
        }
    }
}

Save the file and re-upload it to its original location ('wp-content/plugins/wp-juicebox/wp-juicebox.php') overwriting the original file.

does updating the image info, such as a caption, in the media library automatically update what is shown on a page which already has that image attached?

Yes, it should (in a standard WordPress page). Currently this is not the case with WP-Juicebox where the user must also either 'Edit' and 'Update' the post containing the gallery or 'Edit' and 'Save' the gallery itself to rebuild the gallery's XML file with the new information.
However, this behavior will change in the next verion of WP-Juicebox and the user will no longer have to edit the post or gallery in order for changes in the Media Library to take effect in the corresponding gallery.

5,375

(2 replies, posted in Juicebox-Pro Support)

Thank you for reporting.
This is a known issue which has been addressed and will be fixed in the next version.