You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
It would be nice if you were able to generate some galleries so that amateurs like myself could have a look and see, and then copy and modify.
There are online examples for Embedding Multiple Galleries here. You can view the source of the sample gallery web pages in your browser and copy or modify the code as required.
According to your code, the file should be located here: http://akl.com.au/northperthgarden/jbcore/juicebox.js
However, if you go directly to that address in a browser and you will see an error 404 (file not found).
It looks like none of your gallery folders have been uploaded to the root directory of your web space (at least not with the folder names used in your 'juiceone.html' file).
Double-check the names and location of your gallery folders on your web server.
Edit:
I have just found the cause of your problem.
Your gallery folder names contain spaces but the references to them in your 'juiceone.html' file do not.
They must match. 'northperthgarden' is not the same as 'north perth garden'.
Your page at http://akl.com.au/juiceone.html contains the line:
<script src="northperthgarden/jbcore/juicebox.js"></script>... but there is no 'juicebox.js' file in that location.
Check that this line of code points towards a 'juicebox.js' file on your web server.
A new version of the Juicebox web module for Adobe Lightroom has been released (v1.3.3.1) which fixes the problem of Facebook thumbnails not being displayed. The web module can be downloaded from this web page.
For non-Lightroom users who are still faced with the problem of Facebook thumbnails not being displayed, try stripping all EXIF data from your gallery images by resaving your images in an imaging program (with EXIF data deselected) or resizing them in JuiceboxBuilder (which strips all EXIF data by default).
A new version of the Juicebox web module for Adobe Lightroom has been released (v1.3.3.1) which fixes the problem of Facebook thumbnails not being displayed. The web module can be downloaded from this web page.
For non-Lightroom users who are still faced with the problem of Facebook thumbnails not being displayed, try stripping all EXIF data from your gallery images by resaving your images in an imaging program (with EXIF data deselected) or resizing them in JuiceboxBuilder (which strips all EXIF data by default).
A new version of the Juicebox web module for Adobe Lightroom has been released (v1.3.3.1) which fixes the problem of Facebook thumbnails not being displayed. The web module can be downloaded from this web page.
For non-Lightroom users who are still faced with the problem of Facebook thumbnails not being displayed, try stripping all EXIF data from your gallery images by resaving your images in an imaging program (with EXIF data deselected) or resizing them in JuiceboxBuilder (which strips all EXIF data by default).
A new version of the Juicebox web module for Adobe Lightroom has been released (v1.3.3.1) which fixes the problem of Facebook thumbnails not being displayed. The web module can be downloaded from this web page.
For non-Lightroom users who are still faced with the problem of Facebook thumbnails not being displayed, try stripping all EXIF data from your gallery images by resaving your images in an imaging program (with EXIF data deselected) or resizing them in JuiceboxBuilder (which strips all EXIF data by default).
I see no problem with your code and it works in a test scenario I set up using gallery folders with the same names as yours.
Check that your baseUrl paths exactly match the names of your gallery folders, making sure that there are no uppercase characters in your folder names (as there are no uppercase characters in your baseUrl paths and web servers are usually case-sensitive).
If this does not help, please post the URL to your web page so that I can take a look and help further.
Try validating your web pages (both your frameset page and the page into which your gallery is embedded) with the W3C Markup Validation Service and fixing any errors reported to see if this makes a difference.
Also, I notice that your gallery does not have a height specified. You could try explicitly setting a galleryHeight as a fixed pixel value (not a percentage) in your gallery's embedding code to see if this helps.
Without a galleryHeight set, Juicebox will use the default value of 100%. Using a percentage height or setting no height at all (which is essentailly the same as setting 100%), you may need to implement the suggestion noted in the Using Percentage Heights support section.
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.
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.
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).
I am glad you have found the reason for your problem.
Thank you for posting back to let me know.
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.
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.
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.
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.
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.
@OliverF
Please see my reply to your query in this forum thread.
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.
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.
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.
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.
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.)
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.)
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.