You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
@Menti
It looks like you have already successfully upgraded WP-Juicebox from Juicebox-Lite to Juicebox-Pro.
When I view your gallery, the Juicebox logo is no longer present (indicating that the gallery is Pro).
If you still see the Juicebox logo in your gallery, try clearing your browser's cache before reloading your web page to ensure that your browser is fetching and using the most recent versions of your gallery files from your web server.
how can I integrate this menu (the little green square) in my gallery?
It would not be possible to actually integrate your menu within a gallery itself but you could display the menu on the same web pages as a gallery, by either overlaying the menu on top of the gallery or by displaying it to the side of the gallery.
Take a look at the Embedding Multiple Galleries support section.
What you are looking to achieve might best be represented by the View Resizable Gallery with Side Menu Example.
You can view the source of the example in your browser and copy/modify the code to suit your own needs (replacing the content of the side menu with your own menu).
An alternative solution (using just a single HTML page) would be to use the following template:
<!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;
padding: 20px 0px 0px 10px;
text-align: center;
height: 100%;
width: 100px;
}
#menu a {
color: #666666;
text-decoration: none;
}
#wrap {
float: right;
height: 100%;
}
</style>
<script type="text/javascript" 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({
baseUrl: base,
containerId: 'juicebox-container'
});
}
$(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>To see how this works, create a couple of test galleries and name the gallery folders 'gallery1' and 'gallery2'.
Next, create an HTML file with the code above and put the file in the same directory as the 'gallery1' and 'gallery2' folders and open the HTML file in a browser.
All you would need to do to customize this to your own requirements would be to replace the content of the 'menu' div with your own menu.
You can create as many galleries as you like and name the folders whatever you like. Just keep each gallery in its own folder keep all the folders in the same directory, alongside the HTML file. The links to each gallery from within your menu would look something like the links in the code above (using the loadGallery function to load the selected gallery using the baseUrl method).
If you edit you theme's 'shortcode.css' file in a plain text editor and simply remove '!important' from the CSS rule, it should work OK.
This will keep the CSS code in place (for any other tables in your web page) and it is unlikely that any other CSS code (from any other plugins) will override it (which is what the '!important' signifier would prevent from happening).
Removing the code also works as there are actually no other tables currently on your web page that the code would apply to. Also, all the code does is set a background color for certain table cells so removing the code completely will not break the layout of your web page. It is safe to remove.
If you are using BulletProof Security, then this will almost certainly be the cause of your problem and you will need to use a skip/bypass rule as above. (I have tested this myself and it works fine.)
Please note that if your WordPress installation is in a subfolder, then you will need to add your WordPress subfolder name to the path in the rule as follows.
# Juicebox skip/bypass rule
RewriteCond %{REQUEST_URI} ^/WordPress_subfolder_name/wp-content/plugins/wp-juicebox/ [NC]
RewriteRule . - [S=13]You may also like to take a look at this WordPress forum thread which deals with the same problem.
Solved this the next day, but forgot to come back and update.
No problem. I'm glad you were able to resolve your problem.
Thank you for posting back to let me know.
It looks like your problem is caused by a CSS rule on line 982 of your 'wp-content/themes/ElegantBusiness/css/shortcode.css' file:
tbody tr:nth-child(2n+1) td {
background:#EBEBEB !important;
}This code will apply to all tables on your web page, including tables within your Juicebox gallery (used within the caption and thumbnail areas). Juicebox has no option but to inherit such general CSS rules.
If you apply this CSS rule to only those elements on your web page which require it through use of ids or classes, the problem should be resolved.
This is normal and perfectly OK.
The sourcePath is used only by JuiceboxBuilder-Pro (locally on your own computer) when editing a gallery.
It is not used by the gallery itself when uploaded to a web server.
For example, if you had previously added a watermark to your images and choose to remove the watermark, JuiceboxBuilder-Pro would need to know the path to the original source images on on your hard drive in order to rebuild the gallery without the watermark.
I understand your request but thought that I should point out that Juicebox currently supports and displays animated GIFs so perhaps you could use this to your advantage.
The method you describe above would that relate to content managing the gallery within the Umbraco CMS.
The baseUrl method of embedding would be an alternative solution to using the fully integrated 'SimpleViewer Package.
You would upload your Juicebox gallery to your web server using a dedicated FTP program such as Filezilla (outside of Umbraco) and then copy and paste the embedding code into your web page (within the Umbraco interface).
Perhaps there is a container elsewhere on your web page (maybe transparent) which is overlapping your gallery and obscuring some of its controls. Check your web page using a browser's developer tools (F12) to see if this is a possibility.
Also, you could try validating your web page with the W3C Markup Validation Service to see if there are any HTML errors on your page which may be causing problems. If any errors are reported, they should be fixed.
If you continue to experience difficulties, please post the URL to your gallery so that I can take a look and help further.
I am not familiar with Umbraco but if you have the ability to upload files and folders to your web space and can add custom HTML code to a web page, then you should be able to embed a Juicebox gallery using the baseUrl method as documented here.
Essentially, you would upload your complete gallery folder (not just the contents) to your web server and add the baseUrl embedding code to your web page.
It does not matter where on your web server you upload your gallery folder to as long as the two paths within the embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are correct.
If you are using the SimpleViewer Package for Umbraco, please note that we did not write this package ourselves and support for it should be directed towards the Umbraco forum where the author of the package should be able to help you further.
If it helps, there is the following note on this web page:
Just add the Juicebox's jbcore folder to the root of your website and use the JB Gallery Control Macro.
The 'jbcore' folder can be found inside the Juicebox-Pro download zip package ('juicebox_pro_1.3.3/web/jbcore/').
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.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.