If you want to have a page with a header, gallery and footer, please see the View Resizable Gallery with Top Menu Example in the Using a Resizable Gallery with a Header section of the Juicebox - Embedding Guide. The header and footer in the example both have fixed heights and the gallery takes up the remaining space in between them, no matter what the size of the user's browser window is. You can view the source of the page in a browser to see how this can be achieved.

If you actually want your header and footer to overlap the gallery, you can add code such as the following to your gallery's 'index.html' page:

<div id="header" style="width: 100%; height: 60px; background-color: #aabbcc; position: absolute; top: 0px; left: 0px; z-index: 9999;">Header content goes here</div>
<div id="footer" style="width: 100%; height: 25px; background-color: #aabbcc; position: absolute; bottom: 0px; left: 0px; z-index: 9999;">Footer content goes here</div>

The high 'z-index' values will ensure that the header and footer content are visible and stacked above the gallery layers but please bear in mind that, in doing so, the header and footer may obscure gallery elements (such as the Gallery Title) and controls (such as the Button Bar).

5,377

(496 replies, posted in Juicebox-Pro Support)

Not being able to right-click and 'Save Image As...' is likely to be due to all the layers that are stacked on top of the main image (obscuring it from the right-click menu) to make the gallery function as it does (i.e. the Caption Area, Navigation Button hit areas, Button Bar, Gallery Title, AutoPlay status messages). In order to prevent the main image from being obscured by other layers, the functionality of the elements which would normally be on these layers would have to be reduced. The gallery does have an 'Open Image...' button to allow the user direct access to the main image and my workaround above (using the caption to include a direct link to the main image) is easy to implement in JuiceboxBuilder.
With regard to pinch-zooming, this is also likely to be related to the above, whereby the pinch-zoom gesture interferes with the Juicebox controls (such as navigation buttons) which are layered on top of the gallery.

5,378

(4 replies, posted in Juicebox-Pro Support)

If you use a screen with a limited height, try maximizing the JuiceboxBuilder-Pro window. This will ensure that no portion of the JuiceboxBuilder-Pro window spills off the edges of your screen. You should then be able to select individual sections within the 'Customize' tab and scroll within each section if necessary.

5,379

(2 replies, posted in Juicebox-Pro Support)

You can keep all your galleries in individual folders, each with a unique name, upload the complete gallery folders (not just the contents) to your web server and embed each gallery in your web site using the baseUrl method as documented here.

5,380

(5 replies, posted in Juicebox-Lite Support)

Your web page still does not contain valid code.
You have code above the opening <head> tag which should be within the <head> section and code between the closing </head> tag and opening <body> tag which should be within the <body> section.
However, the problem you currently experience is due to the Splash Page's overlay (allowing the user to click on the Splash Image to view the gallery) not being visible.
This is likely to be caused by the following generalized CSS on your web page:

            body {
                margin: 0px;
                z-index: 0;
            }
            
            script {
                z-index: 0;
            }
            
            div {
                z-index: 0;
            }
            
            *{ 
                margin: 0px; 
                padding: 0px;
                z-index: 100;  
            }

Instead of applying CSS rules to set a 'z-index' value to essentially all elements on your web page (which will also affect all elements within your gallery), set a 'z-index' value to only those elements on your web page that require it (and make sure that the value is appropriate) via the use of classes and ids.
Please see this CSS Tutorial for further information on using classes and ids.
As a quick fix, you could try simply removing all the 'z-index' entries from the CSS on your page. It looks like this might work fine.

5,381

(2 replies, posted in Juicebox-Lite Support)

There is certainly no malware within the JuiceboxBuilder files.
I have scanned the current 'JuiceboxBuilder-Lite.exe' with virustotal online.
Here are the results. The detection ratio was 0/44 (including Symantec).

Try manually excluding 'JuiceboxBuilder-Lite.exe' from being scanned by Norton. (See this web page for details.)
You could also try deleting the shortcut on your desktop and creating a new one by right-click dragging 'JuiceboxBuilder-Lite.exe' from the 'Program Files/JuiceboxBuilder-Lite/' folder onto your desktop and selecting 'Create shortcuts here'.

5,382

(1 replies, posted in Juicebox-Pro Support)

Your main images display in all four galleries (whose links you posted above) in Firefox 15.0.1, IE9, Chrome 22, Safari 5.1.7 and Opera 12 on my PC.
Try clearing your browser's cache before reloading your galleries as everything seems OK.

My only question: is it? It would be possible in the pro version?

The plugin's interface does not change when upgrading WP-Juicebox from Juicebox-Lite to Juicebox-Pro.

In order to change the post that a Juicebox gallery is in, it is necessary to edit the contents of both the original post containing the gallery (to remove the existing Juicebox shortcode, e.g. [juicebox gallery_id="1"]) and the new post you would like to move the gallery to (to enter the Juicebox shortcode).

'Edit' the post containing the gallery, remove the Juicebox shortcode and 'Update' the post. Now enter the shortcode (with the correct 'gallery_id') in the post you wish to transfer the gallery to and 'Publish' or 'Update' the post.

Even if it was possible to change the Post ID in the 'Manage Galleries' screen, there would be no way of knowing where in the post the shortcode should be entered.

5,384

(11 replies, posted in Juicebox-Pro Support)

A few things to check and try:

(1) Make sure that you are using the latest version of Juicebox-Pro (v1.1.1).
(2) Try re-uploading your gallery's 'jbcore' folder to ensure that all required files are present and correct.
(3) Try using absolute URLs in your embedding code to see if this makes a difference.

If you continue to experience difficulties, please post the URL to your gallery so that I can take a look.

5,385

(9 replies, posted in Juicebox-Pro Support)

Just a small further question: Is what you call AutoPlay the same as what many people refer to as Slideshow? ("Play" might refer to something with music.)

Yes. AutoPlay refers to the automatic advancing of images in the gallery without user intervention (for example by clicking on navigation buttons). You can take a look at the available Juicebox-Pro AutoPlay and Audio options in the Juicebox - Config Options page.

5,386

(9 replies, posted in Juicebox-Pro Support)

showImageNumber is a Juicebox-Pro option only (this is the Juicebox-Pro section of the forum) and your gallery uses Juicebox-Lite.
You would need to upgrade your gallery from Juicebox-Lite to Juicebox-Pro before the showImageNumber configuration option in your gallery's XML file would be used.
If you decide to go Pro, Juicebox-Pro can be purchased from this web page.

5,387

(4 replies, posted in Juicebox-Lite Support)

The baseUrl method of embedding will work only if your gallery files are hosted on the same domain as the page containing the baseUrl JavaScript embedding code. This is due to the JavaScript same origin policy security restriction. Please see this web page for further details.
If using Dropbox as a host for your Juicebox gallery, it is not possible to use the baseUrl method of embedding in a Wix page and an <iframe> must be used instead. The <iframe> method of embedding works because it loads the gallery's 'index.html' page (the page containing the JavaScript embedding code) which is on the same domain as the other gallery files inside the gallery folder.

5,388

(5 replies, posted in Juicebox-Lite Support)

Instead of displaying the usual gallery, it shows a black screen saying "View Gallery" at the bottom left corner and once I clicked on that, it takes me into the full screen mode.

This is the Splash Page which is displayed in Small Screen Mode when the gallery is embedded in a web page alongside other content. By default, it will display the first image in your gallery. Juicebox-Pro users can choose the image to be used for the Splash Page with the splashPageUrl configuration option.
Your own gallery's Splash Page may be black due to the use of reserved characters (spaces and parentheses) in your image file names. Try using only web-safe characters for file and folder names.
Please see section 2.3 of this document for details: http://www.ietf.org/rfc/rfc3986.txt

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.

The trouble comes when I exit this gallery and wish to view other gallery on my CSS drop-down link. After clicking on the link to other gallery, all that is shows is just a static picture of the first image in the gallery. No Juicebox at all.

Try validating your web pages with the W3C Markup Validation Service and fix the HTML errors reported.
Your 'welcome.php' page generates a web page which has 4 <html> tags, 4 <head> tags and 3 <body> tags. Each web page should have only one of each.
Once your code validates, your web pages should be rendered with greater predictability and consistency across different browsers.

5,389

(9 replies, posted in Juicebox-Pro Support)

@hherskind

The image number forms part of the caption so as long as the image number is present (even if you have not entered a <title> or <caption> yourself), the caption area will be visible.
To hide the image number, set showImageNumber="FALSE" in your gallery's XML file.
If using JuiceboxBuilder-Pro to create or edit your gallery, the showImageNumber configuration option can be found in the 'Customize -> Caption' section.

5,390

(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,391

(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,392

(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,393

(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,394

(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,395

(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,397

(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,398

(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,399

(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,400

(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.