Juicebox v1.5.1 Released!

2013-11-07 13:05:25

It sounds like your gallery is not using your thumbURL images for your thumnails.
If the thumbURL images are missing from your web server (or the paths to them are incorrect in your gallery's XML file), Juicebox will use the imageURL images instead but these images are not scaled to fit the thumbnail dimensions when the gallery is displayed. (They are center-cropped as you describe.)
When creating a gallery with JuiceboxBuilder-Pro, your original images are scaled to generate dedicated thumbnails at the specified dimensions. However, when the gallery is displayed, the images used for the thumbnails (whether they are the thumbURLs or the imageURLs) are displayed at actual size (as the dedicated thumbnails should match the thumbWidth and thumbHeight values and this should not be a problem). This has been logged as a bug and should be fixed in a future version of Juicebox.

Check the that your thumbnail images are present in your gallery's 'thumbs' folder and make sure that the corresponding thumbURL entries in your gallery's XML file are correct.
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.

2013-11-07 13:04:55

With Filezilla, you can choose to 'Overwrite if different size' (rather than just checking the last modified date) so as long as the newly-processed old images are exactly the same file size as the original ones, they will not be uploaded to your web server. Only new images which do not yet exist on your web server (or files which have changed in size, such as the gallery's XML file holding the image data) will be uploaded.

2013-11-07 10:59:15

Is this allowed to have different names for the galleries?

Yes.

Is the apostrophe a problem?

Yes - for two reasons:
(1) The gallery's folder name in the line loadGallery('gallery1/'); is enclosed within apostrophes itself and the apostrophe in your gallery's folder name will effectively close the opening apostrophe in the code. You could enclose the gallery name in double quotes instead loadGallery("gallery1/"); (or escape the apostrophe to ') but there is another reason why you should not use apostophes in folder names...
(2) As the gallery folder name forms part of a URL when it is uploaded to a web server, it would be wise to stick to web-safe characters. 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.

When I'm generating the galleries, I name a new folder Sue's garden which is in the same directory as the html page. I also do another folder Neil and Fiona's garden, again in the same directory. Is this correct please?

Yes. Keep all your galleries separate from each other in individual folders and put all the gallery folders in the same directory alongside the HTML page containing the code above.

The html page is index by default. Do I change this to the HTML page where the gallery sits eg juiceboxprac.html or keep it at index.html?

As you are embedding your galleries using the baseUrl method, the 'index.html' files within each gallery folder are not actually being used at all. You can name them whatever you like (or even delete them after the galleries have been created).

2013-11-07 10:47:32

I am glad you have found the reason for your problem.
Thank you for posting back to let me know.

2013-11-07 10:47:05

In my own tests this is not necessary but I am glad that you have found a workaround for your problem.
Thank you for posting back to let me know.

2013-11-06 22:49:00

maxImageWidth and maxImageHeight are settings used by JuiceboxBuilder-Pro to know what size the images in the 'images' folder should be. These settings are not used by Juicebox when displaying the gallery in a browser.

When imageScaleMode="SCALE_DOWN" (which is the default value for this configuration option), images should not be displayed greater than their actual size in the gallery.

I cannot replicate the problem you describe.
Double-check that imageScaleMode is actually set to SCALE_DOWN in your gallery's XML file and if you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.

2013-11-06 12:03:21

The thumbnails (which are designed primarily as a navigation tool) are scaled to fill the dimensions set via the thumbWidth and thumbHeight values.
Whatever values you set for the thumbnail dimensions (using JuiceboxBuilder-Pro's 'Images (tab) -> Image Size (control panel) -> Change... (button)' options), the images will be scaled so that they completely fill (rather than fit within) the thumbnail dimensions.

It is not possible to automatically have the thumbnails individually mirror the aspect ratios of their corresponding main images. All thumbnails in a gallery will be the same size as each other and if they do not have the same aspect ratio as the main images, then cropping will occur. However, the thumbnails will be cropped only at the top and bottom or at the left and right but not in both dimensions.

2013-11-06 11:51:48

Juicebox has no built-in FTP functionality and if you are using the Juicebox web module for Lightroom, then you are likely to be using Lightroom's own built-in FTP functionality (via the 'Upload...' button).
If you 'Export...' the gallery to your hard drive instead and then use a dedicated FTP program such as Filezilla) to upload the gallery to your web server, you should be able to configure the FTP program to upload only new and modified files.
A dedicated FTP program will give you much greater control over the upload process than Lightroom's built-in functionality does.

2013-11-06 11:42:36

When clicking a Social Sharing button, it is the gallery's web page which is shared. It is not possible to specify a different web page within Juicebox. However, you should be able to edit the link (after sharing) in your Pinterest (or other Social Media) control panel.

2013-11-06 11:30:25

@OliverF

Please see my reply to your query in this forum thread.

2013-11-06 11:29:36

Could you tell me more about this problem,

Unfortunately, Facebook thumbnail creation is inconsistent at the moment.
This is a known problem which the developers are aware of. All known bugs are addressed and solutions to this problem are being investigated. However, I currently have no news as to when this problem might be fixed.

Juicebox sends the thumbnail image URL to Facebook (as per the Facebook Developer API) but whether or not the thumbnail is actually displayed seems to be hit and miss.
For example, I clicked on the 5th image on the second row of your gallery's thumbnail page and the Facebook thumbnail was not displayed. However, I clicked on the same image again and the Facebook thumbnail appeared the second time around.
I have no doubt that Juicebox is sending the same data to Facebook both times but the results are inconsistent (perhaps due to a timeout in sending or processing the data).

There are also some known factors in this problem.
Facebook requires that the thumbnail image be at least 50px x 50px, have a maximum aspect ratio of 3:1 and have a maximum file size of 5MB.
It is also known that images exported by Adobe Lightroom fail to have thumbnails created by Facebook.
If you can ensure that your images meet the above criteria, you will be giving your images the best chance of having Facebook thumbnails generated successfully.

The first line works, after not

I clicked randomly on 10 of your images beyond the 1st row of thumbnails and 7 out of the 10 had their Facebook thumbnails generated successfully.

i see some thread speak about icc ? How can i remove it ?

I'm not sure that this will help but you should be able to strip an ICC profile from an image in Adobe Photoshop by going to 'File -> Save As...' and deselecting the ICC checkbox in the 'Color' section.

We understand how frustrating this problem is for users and we are investigating further.

2013-11-06 10:44:57

I have just tested this by sharing a link (clicking the Facebook button) on an image in our Social Sharing demo gallery and then opening the link from within the Facebook App on an iPod Touch 4 running iOS 6.1.3. The gallery displays as expected.
I have also manually shared a link to the Lite Embedded demo gallery (a web page containing a Juicebox gallery and other content) and this also displays as expected when opening the link from within the Facebook App on the iPod Touch.

I have posted a link on Facebook to a page using Juicebox to display photos.

Check the code on your web page with the W3C Markup Validation Service to make sure that it is valid and that there are no errors on the page.
If this does not help, please post back and let me know the link you are using so that I can try it for myself.

2013-11-06 00:34:11

What you are describing is the Splash Page.
This is a placeholder for the gallery which is displayed by default on small screen devices when the gallery is embedded in a page (rather than displayed on a page of its own).
When the user taps 'View Gallery', the gallery is expanded to fill the user's browser window.
For more information about the Splash Page and how Juicebox adapts to different devices and screen sizes, please see here.

You can choose to not use the Splash Page by setting showSplashPage="NEVER" (in JuiceboxBuilder-Pro's 'Customize -> Splash Page' section).
Alternatively, you can force the gallery to be displayed in Large Screen Mode on all devices and in all browsers by setting screenMode="LARGE" ('Customize -> General').

If you choose to continue to use the Splash Page, you can customize it using the Splash Page configuration options.

It looks like the text for your gallery's Splash Page is not being displayed due to some global CSS rules in your web page's 'mbc-styles.css' file, for example:

table {
width: 100%;
display: block;
}

Such global CSS rules will apply to all 'table' elements on your web page (including those in your gallery). Juicebox has no option but to inherit such rules. Apply CSS rules to only those elements on your web page that require them through use of ids and classes and all should be well.

2013-11-05 16:11:32

Do you see the image flickering in just Mobile Safari or in other browsers, too (such as Chrome)?
What generation of iPad do you have and what version of iOS does it run?

Perhaps the problem is related to the non-gallery code on your page. Both Mobile Safari and Chrome often completely crash and take me back to my home screen when I view your gallery on my iPod Touch 4 iOS 6.1.3.

Ordinarily, I would recommend setting expandInNewPage="TRUE" to ensure that when the Splash Page is clicked, the gallery is opened in a completely new web page (separate from the web page that the Splash Page is displayed in).
However, as you use Moonfruit and have no option but to load your gallery into an iframe, this, unfortunately, is not an option. (When the Splash Page is clicked, the gallery will be opened in a new web page but still within the iframe.)

The only thing I can suggest at the moment is to try setting showSplashPage="NEVER" to see if this makes a difference.

2013-11-05 15:45:11

You can add an AutoPlay button to your gallery's Button Bar by setting showAutoPlayButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section). Users will be able to toggle the AutoPlay on and off by clicking the button.
(It is not possible to pause the AutoPlay by hovering over the main image.)

2013-11-05 14:25:26

But what I see in my browser (emptied cache and refreshed) is just the menu items and no images.

Sorry. There was a problem with the path to the 'juicebox.js' file in my code.
I have corrected it in my post above.

Also the menu is pushed hard up in the top left hand corner.

The template page above was built for functionality rather than style (to keep things as simple and clear as possible). You can tweak the layout yourself using CSS.

How can it be nudged over a little from the left please eg 15 pixels. Also a bit of a gap from the top eg 20 pixels.

Add the following CSS to the <head> section of the page:

#menu {
    padding-left: 15px;
    padding-top: 20px;
}

(I have added this CSS padding to the template page above.)

2013-11-05 11:46:55

Thank you for the additional information.
I have notified the developers.

2013-11-05 11:44:40

What code do I need for a side menu please?

Take a look at the View Resizable Gallery with Side Menu Example in the Resizable Gallery support section.
Here is a similar all-in-one template to the one above to load multiple galleries from a side menu:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <style type="text/css">
            html, body {
                height: 100%;
                overflow: hidden;
            }
            body {
                margin: 0px;
                background-color: #222222;
            }
            #menu {
                background-color: #222222;
                color: #666666;
                font-family: sans-serif;
                font-size: 20px;
                float: left;
                text-align: center;
                padding-left: 15px;
                padding-top: 20px;
                height: 100%;
                width: 100px;
            }
            #menu a {
                color #666666;
                text-decoration: none;
            }
            #wrap {
                float: right;
                height: 100%;
            }
        </style>
        <script src="gallery1/jbcore/juicebox.js"></script>
        <script type="text/javascript">
            function doLayout() {
                var windowHeight = window.innerHeight ? window.innerHeight : $(window).height();
                var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
                var menuWidth = $('#menu').outerWidth();
                var galleryHeight = parseInt(windowHeight);
                var galleryWidth = parseInt(windowWidth) - parseInt(menuWidth);
                $('#wrap').height(galleryHeight);
                $('#wrap').width(galleryWidth);    
            }
            function loadGallery(base) {
                new juicebox({
                    containerId: 'juicebox-container',
                    baseUrl: base
                    });
            }
            $(document).ready(function () {
                doLayout();
                $(window).on('resize', doLayout);
                loadGallery('gallery1/');
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="menu">
            <a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>
            <br />
            <a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
        </div>
        <div id="wrap">
            <div id="juicebox-container"></div>
        </div>
    </body>
</html>

2013-11-04 22:24:33

Thank you for the link to your gallery and the screenshot.

For further information, what iOS 7 device do you use?
Also, does the problem happen when loading the gallery in portrait mode and rotating the device to landscape or when loading the gallery in landscape mode (or both)?
Thanks.

2013-11-04 22:19:57

@apok

Thank you for your suggestions.

With regard to your third suggestion, not all browsers and devices support the Fullscreen API yet.
For a list of current browsers which do (and do not) support the Fullscreen API, please see here.

2013-11-04 10:39:25

The default value for the linkURL is blank (empty).
If you deselect the linkURL checkbox in the 'Image Info' section of the Juicebox web module in Lightroom and rebuild your gallery (via the 'Export...' button), then the linkURLs in your gallery will be blank.

When the linkURLs are blank, Juicebox uses the imageURLs when the 'Open Image' button is clicked.
When the linkURLs are not blank, Juicebox will use them instead of the imageURLs when the 'Open Image' button is clicked.

If the linkURLs start with 'http://', then they will be treated as absolute paths.
If the linkURLs do not start with 'http://', then they will be treated as relative paths (relative to the HTML document containing the gallery's embedding code).

2013-11-03 22:29:41

I see the flickering in Chrome 30 when I view your gallery on this page: http://www.brianwilsonphotographer.com/ … -portfolio
It is the whole gallery that flickers (not just the main image in the gallery).

However, there is no flickering when I view the gallery on its own index page: http://www.brianwilsonphotographer.com/ … index.html

It looks like there may be a problem with your iframe code.
Try validating your web page with the W3C Markup Validation Service and fix the errors reported. There are 4 errors on the page and 3 of them refer to the iframe into which the gallery is loaded.

Also, try temporarily removing the onload="iFrameHeight()" attribute from your iframe to see if this makes a difference.

2013-11-03 22:16:39

OK. Thanks for posting back to let me know.

2013-11-03 22:15:53

Thank you for providing the URL to your gallery.
Your linkURLs currently look like this:

linkURL="www.streetlifephotography.co.uk"

When using absolute paths, they should start with 'http://'.
Change your linkURLs to look like the following and the links should be opened correctly.

linkURL="http://www.streetlifephotography.co.uk"

2013-11-02 22:49:52

I have not been able to reproduce this problem.
Perhaps having Windows Explorer open with the focus on the gallery's 'images' folder has somehow restricted JuiceboxBuilder-Pro's access to the folder, resulting in the application not being able to write the newly resized images to the folder. (However, this does not explain why the images were deleted but not replaced.)
Try saving your gallery with Windows Explorer closed to see if this makes a difference.

I can reproduce it.

Please post a list of steps that I can use to try to reproduce this problem myself.
Thank you.

Juicebox v1.5.1 Released!

Search options (Page 171 of 235)

Posts found: 4,251 to 4,275 of 5,867

4,251 Reply by Steven @ Juicebox 2013-11-07 13:05:25

Re: Thumbnails Crop (3 replies, posted in Juicebox-Pro Support)

4,252 Reply by Steven @ Juicebox 2013-11-07 13:04:55

Re: LR web gallery update (3 replies, posted in Juicebox-Pro Support)

4,253 Reply by Steven @ Juicebox 2013-11-07 10:59:15

Re: [SOLVED] Mutiple Galleries On One Page With Header (26 replies, posted in Juicebox-Pro Support)

4,254 Reply by Steven @ Juicebox 2013-11-07 10:47:32

Re: SCALE_DOWN is scaling up in Firefox (3 replies, posted in Juicebox-Pro Support)

4,255 Reply by Steven @ Juicebox 2013-11-07 10:47:05

Re: No pictures show on iPhone/iPad when paged opened through Facebook app (6 replies, posted in Juicebox-Lite Support)

4,256 Reply by Steven @ Juicebox 2013-11-06 22:49:00

Re: SCALE_DOWN is scaling up in Firefox (3 replies, posted in Juicebox-Pro Support)

4,257 Reply by Steven @ Juicebox 2013-11-06 12:03:21

Re: Thumbnails Crop (3 replies, posted in Juicebox-Pro Support)

4,258 Reply by Steven @ Juicebox 2013-11-06 11:51:48

Re: LR web gallery update (3 replies, posted in Juicebox-Pro Support)

4,259 Reply by Steven @ Juicebox 2013-11-06 11:42:36

Re: Linking Pinterest and Social Sharing through to your website (1 replies, posted in Juicebox-Pro Support)

4,260 Reply by Steven @ Juicebox 2013-11-06 11:30:25

Re: Facebook Share thumbs [SOLVED] (9 replies, posted in Juicebox-Pro Support)

4,261 Reply by Steven @ Juicebox 2013-11-06 11:29:36

Re: Share on Facebook thumb [SOLVED] (2 replies, posted in Juicebox-Pro Support)

4,262 Reply by Steven @ Juicebox 2013-11-06 10:44:57

Re: No pictures show on iPhone/iPad when paged opened through Facebook app (6 replies, posted in Juicebox-Lite Support)

4,263 Reply by Steven @ Juicebox 2013-11-06 00:34:11

Re: problems viewing on an iPhone 4 (1 replies, posted in Juicebox-Pro Support)

4,264 Reply by Steven @ Juicebox 2013-11-05 16:11:32

Re: problem viewing galleries on ipad (5 replies, posted in Juicebox-Pro Support)

4,265 Reply by Steven @ Juicebox 2013-11-05 15:45:11

Re: Pausing the slideshow? (1 replies, posted in Juicebox-Pro Support)

4,266 Reply by Steven @ Juicebox 2013-11-05 14:25:26

Re: [SOLVED] Mutiple Galleries On One Page With Header (26 replies, posted in Juicebox-Pro Support)

4,267 Reply by Steven @ Juicebox 2013-11-05 11:46:55

Re: iOS7 (11 replies, posted in Juicebox-Pro Support)

4,268 Reply by Steven @ Juicebox 2013-11-05 11:44:40

Re: [SOLVED] Mutiple Galleries On One Page With Header (26 replies, posted in Juicebox-Pro Support)

4,269 Reply by Steven @ Juicebox 2013-11-04 22:24:33

Re: iOS7 (11 replies, posted in Juicebox-Pro Support)

4,270 Reply by Steven @ Juicebox 2013-11-04 22:19:57

Re: Feature Requests (496 replies, posted in Juicebox-Pro Support)

4,271 Reply by Steven @ Juicebox 2013-11-04 10:39:25

Re: 404 when clicking Open button (6 replies, posted in Juicebox-Pro Support)

4,272 Reply by Steven @ Juicebox 2013-11-03 22:29:41

Re: Page flickers on next image load (27 replies, posted in Juicebox-Pro Support)

4,273 Reply by Steven @ Juicebox 2013-11-03 22:16:39

Re: Checking/unchecking Resize Images deletes images (3 replies, posted in Juicebox-Pro Support)

4,274 Reply by Steven @ Juicebox 2013-11-03 22:15:53

Re: 404 when clicking Open button (6 replies, posted in Juicebox-Pro Support)

4,275 Reply by Steven @ Juicebox 2013-11-02 22:49:52

Re: Checking/unchecking Resize Images deletes images (3 replies, posted in Juicebox-Pro Support)

Posts found: 4,251 to 4,275 of 5,867