You're welcome!
I'm glad you've got it working.
Thank you for letting me know.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
You're welcome!
I'm glad you've got it working.
Thank you for letting me know.
Thank you for posting the code you are using.
As you are switching between galleries rather than displaying both at the same time, you will need to pass the height for each gallery as a parameter to your loadGallery() function.
Try using the following code for your <body> section. It gives your 'glass3010' gallery a height of '400px' and your 'glass3010Sets' gallery a height of '600px'. (You can change the heights as required.)
<div id="juicebox-container"></div>
<script>
$(document).ready(function() {
//load gallery 1
loadGallery('glass3010/', '400px');
//initialize top buttons
$("#button-1").on("click", function(){loadGallery('glass3010/', '400px');});
$("#button-2").on("click", function(){loadGallery('glass3010Sets/', '600px');});
});
function loadGallery(base, height) {
new juicebox({
baseUrl: base,
containerId: 'juicebox-container',
backgroundColor: 'fff',
galleryWidth: '100%',
galleryHeight: height
});
}
</script>You can set the height for a gallery in the JuiceboxBuilder-Pro interface (in the 'Customize -> Lite' section).
The chosen height will be included in the embedding code presented on the 'Publish' tab (and in the gallery's 'index.html' page after the gallery has been saved) which you can copy and paste into your own web page.
You can certainly have multiple galleries with different heights embedded into a single web page.
Here's sample code for two galleries (with different heights) being embedded into the same page.
The first gallery on the page has a height of 400px whereas the second gallery on the page has a height of 600px.
<script src="gallery1/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: 'gallery1/',
containerId: 'juicebox-container-1',
galleryHeight: '400px',
galleryWidth: '100%'
});
</script>
<div id="juicebox-container-1"></div>
<script>
new juicebox({
baseUrl: 'gallery2/',
containerId: 'juicebox-container-2',
galleryHeight: '600px',
galleryWidth: '100%'
});
</script>
<div id="juicebox-container-2"></div>I hope this helps.
However, if you continue to experience difficulties, please post the URL to your web page so that I can see the problem for myself and hopefully help further.
Thank you.
We do not provide any web hosting services ourselves.
If you want your Juicebox galleries to be visible to others on the internet, then you will need to have some web space somewhere to upload your gallery files to.
You could host your images on Flickr and use your Flickr account as the source of images but you'll still need somewhere to upload the core Juicebox files to.
The easiest way to host a gallery is with a regular web host which gives you some web space and allows you to upload files and folders to this web space via FTP.
Try a web search with terms such as 'web hosting' and you will find hundreds (or even thousands) of web hosts, most of which would be fine for hosting Juicebox galleries. Juicebox galleries do not require any special web server requirements. They are essentially just a collection of regular web files (HTML, JavaScript, CSS, font files and images).
Many web hosts offer free accounts which might be enough to get you started. Please note, however, that often you get what you pay for with free hosting and with a paid hosting account you will likely receive better support, more features and greater stability.
An alternative would be to host your gallery with Google Drive following the instructions here.
I hope this points you in the right direction.
Due to the nature of how Facebook works (taking the share image from an og:image tag in the web page), it would be very difficult for a gallery which is displayed from a single web page (such as a Juicebox gallery) to have the share image correspond to the image being shared.
I still have the same problems "my users can't post and share the correct photo".
As I mentioned above, although the share image (the thumbnail displayed in the Facebook pop-up share window) will always be the same one, the link being shared will still point towards the correct image in the gallery (the image currently being displayed in the gallery when the Facebook button is clicked).
For Juicebox, you really need to think of the share image as representing the gallery as a whole.
With this in mind, you could change the og:image tag in your gallery's web page to have the share image be any image you like. It does not need to be an image in your gallery.
If you really want to have the share image correspond to the image being shared, then you would need to find a gallery type which creates a separate web page for each image (so that each page/image can have its own og:image entry).
The downside to this type of gallery would be that it would likely be a standalone set of web pages rather than something that you could embed in an existing web page alongside other content (like you can with Juicebox).
Ideally, you would need to find a gallery that not only creates a separate web page for each image but also one that has built-in Facebook support so that og:image entries are generated automatically. Otherwise, it might be quite a time-consuming task to add an og:image entry manually for each image in your gallery.
Unfortunately, off the top of my head, I do not know of such a gallery type and a web search might be helpful.
You're welcome.
Three weeks have passed and I have had not heard directly from ClamAV regarding the false positive reports I filed but there have been 23 ClamAV virus database updates in this period so, if you have not tried recently, it might be worth uploading a Juicebox album to your web server now to see if it works.
If you do try again, please let me know how you get on.
Thank you.
The white space you are seeing below your gallery is part of the 'body' tag (rather than the 'juicebox-container' or 'parent' containers).
You'll need to set the background-color for the 'body' tag, too.
Change:
<style type="text/css">
body {
margin: 0px;
}
</style>... to:
<style type="text/css">
body {
background-color: rgba(17,17,17,1);
margin: 0px;
}
</style>Can I asume that Juicebox always uses % unless I specifically change to pixels?
If you do not explicitly set galleryWidth or galleryHeight in your gallery's embedding code, then default values of 100% will be used.
If you set a value without a '%' character such as:
galleryWidth: "100",... then Juicebox will read this as '100px', the same as using:
galleryWidth: "100px",It is not possible to have the shared image's thumbnail displayed in the pop-up Facebook share window due to limitations imposed by Facebook on what data can be passed via their share URL. Only one thumbnail image can be used per web page. (The link will still point towards the correct image within your gallery, though.)
The image used in the pop-up Facebook share window is set using an Open Graph og:image meta tag in the <head> section of your web page, such as the following:
<meta property="og:image" content="http://www.example.com/images/thumbnail.jpg" />Please see here for more details on the Open Graph protocol.
If you create a gallery with JuiceboxBuilder-Pro, an og:image meta tag will be automatically generated and included in the gallery's 'index.html' file (pointing towards the first image in the gallery). If you are embedding your gallery in an existing web page alongside other content, then you will need to add an og:image meta tag manually.
Although the thumbnail image displayed in the pop-up Facebook share window will always be the same one (specified via the og:image meta tag), the link being shared will still point correctly towards the shared image in the gallery. You should notice that the URL being shared ends with something like #2 or #17 where the number represents the image in the gallery. When a user clicks on a shared link, the corresponding shared image will be opened in the gallery.
@paul.hunt
I'm glad you've found it.
Thank you for letting me know.
No problem!
You're welcome.
In order to not get the "Juicebox can not display locally in this browser." message, the gallery's web page must be viewed over http:// or https:// (or viewed in Firefox or Safari). If the file:/// protocol is used (as it would be for local use), the gallery will fail to display in any browser other than Firefox and Safari.
The gallery structure and location of the 'config.xml' and 'juicebox.js' files (and images) does not matter for this error message.
I'm guessing your mobile app is not loading the web page containing the gallery's embedding code over http:// or https:// (it sounds like everything is hosted locally within the app) which is probably where the problem originates.
The backButtonUrl can be:
(1) Absolute, in the form:
backButtonUrl="http://www.example.com/directory/index.html"
(2) Relative to the HTML page containing the gallery's embedding code, e.g:
backButtonUrl="directory/index.html"
(3) Relative to your root directory (using a leading slash in the path to denote your root directory), e.g:
backButtonUrl="/directory/index.html"
If the page you want your Back Button to go to is http://www.yourdomain.com/index.htm and your gallery's web page is located at http://www.yourdomain.com/gallery1/index.html (which I think is correct from what you say), then you could use any one of the following:
backButtonUrl="http://www.yourdomain.com/index.htm"
backButtonUrl="../index.htm"
backButtonUrl="/index.htm"If you continue to experience difficulties, please post the URL to your gallery and also let me know the actual URL of the page you'd like the Back Button to link to. Thank you.
No problem.
I'm glad you've got it working. Thank you for letting me know.
The code I posted above (in my last post) is a modified version of your own code (the code you posted in your last post) so if you substitute your code for mine, it should work OK.
Please post the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.
Thank you.
I am having a problem understanding how to deal with the example of wrapping the gallery in a parent container.
Do I incorporate that into the index.html file juicebox creates?
Yes, you'll need to edit the 'index.html' file that JuiceboxBuilder-Pro creates in a plain text editor.
Put the entire 'juicebox-container' <div> inside another <div>.
In your case, change the embedding code portion of the code you posted to the following:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '90%',
galleryHeight: '90%',
backgroundColor: 'rgba(255,255,255,1)'
});
</script>
<div id="parent" style="background-color: rgba(255,255,255,1); width: 100%;">
<div id="juicebox-container">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>Current Work</h1>
<p>Corrent Work</p>
<p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red " alt="" /><br>Abstraction in Red </p>
<p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
<p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
</noscript>
</div>
</div>
<!--END JUICEBOX EMBED-->10% of the screen width (to the right-hand side of your gallery) will be empty space (the same color as your gallery's background).
Change the gallery's width from 90% to change the amount of space to the right-hand side of your gallery.
If you wanted to horizontally center the gallery in the parent container (so that there is 5% of the screen width empty at both sides of the gallery), then you could use the following embedding code (adding style="margin: 0 auto;" as an attribute to the 'juicebox-container' <div>).
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
galleryWidth: '90%',
galleryHeight: '90%',
backgroundColor: 'rgba(255,255,255,1)'
});
</script>
<div id="parent" style="background-color: rgba(255,255,255,1); width: 100%;">
<div id="juicebox-container" style="margin: 0 auto;">
<!-- Image gallery content for non-javascript devices -->
<noscript>
<h1>Current Work</h1>
<p>Corrent Work</p>
<p><img src="images/Abstraction in Red.jpg" title="Abstraction in Red " alt="" /><br>Abstraction in Red </p>
<p><img src="images/Graffitti Beauty.jpg" title="Graffitti Beauty" alt="" /><br>Graffitti Beauty </p>
<p><img src="images/Marrakesh l.jpg" title="Marrakesh l" alt="" /><br>Marrakesh l </p>
</noscript>
</div>
</div>
<!--END JUICEBOX EMBED-->Unfortunately, if you encounter the "Juicebox can not display locally in this browser." error, then there is little that you can do.
Certain browsers contain a security restriction that disables loading local files. Please see this FAQ for details:
When I view my gallery locally, I see the message "Juicebox can not display locally in this browser". Why?
Safari is one of the browsers which allows the loading of local files and this might explain why your mobile app works on iOS devices but not on Android devices.
If files are being loaded locally (ie. the web page into which the galley is embedded is not being served over http:// or https://) and one of the browsers known to disallow the loading of local files is detected, then Juicebox will display this error message.
I am trying to get a handle on just what the presets are.
The presets are just different combinations of configuration options and JuiceboxBuilder settings (such as gallery and image dimensions).
They are essentially quick ways of replicating some of the demo galleries found here.
You could achieve any preset by starting off with all default settings and changing values in JuiceboxBuilder's interface.
Can you tell me just what Max caption height does?
There is a short description of maxCaptionHeight in the Caption section of the Config Options page.
maxCaptionHeight
The height of the caption area. When captionPosition is set to BELOW_IMAGE, BOTTOM or BELOW_THUMBS, the area uses this value. For OVERLAY captions this value determines the maximum possible height of a caption.
So when captionPosition is set to BELOW_IMAGE, BELOW_THUMBS or BOTTOM, the value of maxCaptionHeight is always used as the actual caption height. When captionPosition is set to OVERLAY or OVERLAY_IMAGE, the value of maxCaptionHeight is used as the maximum caption height (the actual caption height might be smaller if the maximum is not required to display the caption in full).
Is it possible to get more space?
It is not possible to increase the space just at the right-hand side of a gallery (at least not by using the available configuration options) but you could increase the space surrounding all gallery elements by increasing the value of the stagePadding configuration option (in JuiceboxBuilder-Pro's 'Customize -> General section'.
Alternatively, if you just want to add some space to the right-hand side of your gallery, you could wrap the gallery in a parent container, reduce the gallery's width (to perhaps 90%) and make the parent container's background color the same as the gallery.
Here is an example.
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
backgroundColor: 'acc2e3',
containerId: 'juicebox-container',
galleryWidth: '90%',
maxThumbColumns: '3',
maxThumbRows: '3',
thumbsPosition: 'RIGHT'
});
</script>
<div id="parent" style="background-color: #acc2e3; width: 800px;">
<div id="juicebox-container"></div>
</div>
<!--END JUICEBOX EMBED-->Is there any adjustments that would center the page?
If you want to horizontally center the gallery container within a parent container, then replace:
<div id="juicebox-container"></div>... with:
<div id="juicebox-container" style="margin: 0 auto;"></div>Thanks once again.
You're welcome!
I have purchased the pro license and will play around with it. I am sure to have more questions but will open a new topic if needed in the pro forum
No problem.
Is it possible to make adjustments to these galleries?
Yes, absolutely.
The demo galleries are just examples of what can be achieved. They are not the only layouts that can be used.
You can use any or all of the available Configuration Options to customize your gallery as you like.
For example the pro top has the thumbs on the right and on my screen uses only the left half of the screen not centred or using full screen.
That's just because the gallery has fixed dimensions of 1000px x 1000px. You can choose the width and height for your own gallery using either fixed pixel values or percentages (of the gallery's parent container) and choose where to position the gallery on your own web page.
Can the thumbs be on the left...
Yes. Set thumbsPosition="LEFT". You can then also set maxThumbColumns and maxThumbRows.
A complete list of all Thumbnail Options can be found here.
... and can the gallery comprise the whole screen?
Yes. You just set your galleryWidth and galleryHeight to both be 100% (and make sure that there is no other content on your web page).
The simple gallery leaves a lot of space between the thumbs and the main image which seems small, again are these spaces and size adjustable?
The Simple demo actually uses quite small images (the first image is only 640px x 415px) and the default value of imageScaleMode="SCALE_DOWN", which scales donw large images (if necessary) but does not scale up small images.
If you were creating a gallery of your own, you could use larger images or set imageScaleMode="SCALE" to reduce the space between the thumbnails and the main images.
Depending on gallery dimensions and page layouts, Juicebox galleries are usually responsive and the gallery elements are positioned automatically depending on the size and shape of the gallery (which can often be determined by the size and shape of the user's browser window). For this reason, it is not possible to specify exact dimensions for gaps between gallery elements.
The image used for the Splash Page can be set via the splashImageUrl configuration option.
If a splashImageUrl is not explicity set, then Juicebox will use the first image in the gallery.
This is by design. The # identifier and firstImageIndex option have no effect on the Splash Page image.
If you like, please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked. Thank you.
You could use JavaScript to fetch the image corresponding to a # identifier or query string variable from the gallery's XML file and set the splashImageUrl dynamically.
Here's an example using the # identifier. (You could use a query string variable instead if you like.)
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var hash = 1;
if (window.location.hash) {
hash = window.location.hash.substring(1);
}
var splash = '';
$.get('config.xml', function(data) {
splash = $.trim($(data).find('juiceboxgallery').find('image').eq(hash - 1).attr('imageURL'));
}).done(function() {
new juicebox({
containerId: 'juicebox-container',
splashImageURL : splash
});
}).fail(function() {
alert('Cannot fetch image for Splash Page.');
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Is there a Wordpress plugin that works with juicebox-lite, so that it makes a sitemap image xml?
Unfortunately, not that I know of.
If a sitemap generator scans an HTML page containing a Juicebox gallery, there may be no indication that there is a list of images stored in a separate XML file elsewhere on your server. Only the 'juicebox.js' JavaScript file has knowledge of this.
Even if a configUrl is used (to explicitly specify a path to the XML file), it is likely that a sitemap generator would not know that the configUrl value was a path (it is just a configuration option in the gallery's embedding code rather than an HTML <a> tag or <img> tag that the sitemap generator would recognise).
The best I can suggest is that you create your gallery with JuiceboxBuilder-Pro and select 'Add SEO Content' checkbox in the 'Customize -> Sharing' section. The embedding code will then include all the gallery images as <img> tags and your sitemap generator should find and index them.
Please see the Search Engine Optimization (SEO) support section for further information.
Please note the following:
(1) 'Add SEO Content' is a feature of JuiceboxBuilder-Pro (not JuiceboxBuilder-Lite, the free version).
(2) You would need to create your gallery with JuiceboxBuilder-Pro rather than using WP-Juicebox (the dedicated Juicebox plugin for WordPress) as WP-Juicebox does not generate SEO content.
(3) You would need to embed your gallery into your web page manually following the instructions in the Juicebox Embedding Guide. Depending on where you locate your gallery on your web server, you might need to manually adjust the paths in the SEO content to ensure that they are correct.
@rj74
Although, historically, we have released hotfix versions before, I think we are probably too far down the path with regard to preparation for the next version to release a hotfix version to fix only this problem at this point in time.
Safari behaves different when embedded in the FB app.
Now we are far away from juicebox :) Any idea?
Unfortunately not. Maybe someone else can help to shed some light on this for you.
Do you have an example how to set the firstImageIndex configuration option via JS?
You could try the following (which should hopefully work when expanding the gallery from the Slash Page).
Sample URL for code below: http://www.example.com/gallery/index.html#5
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var hash = 1;
if (window.location.hash) {
hash = window.location.hash.substring(1);
}
new juicebox({
containerId: 'juicebox-container',
firstImageIndex: hash
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->You could do something similar if you wanted to use a query string instead of a hash.
Sample URL for code below: http://www.example.com/gallery/index.html?id=5
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var value = 1;
if (window.location.search) {
var queryString = unescape(window.location.search);
var queryArray = {};
var re = new RegExp("([^?=&]+)(?:=([^&]*))?", "g");
var queryComponent = null;
while (queryComponent = re.exec(queryString)) {
queryArray[queryComponent[1]] = queryComponent[2];
}
value = queryArray["id"];
}
new juicebox({
containerId: 'juicebox-container',
firstImageIndex: value
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Incidentally, I have notified the developers to let them know that a # in URL is currently ignored when expanding a gallery from a Splash Page. Hopefully the # can be respected in this scenario in a future version.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.