You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Unfortunately, there will inevitably be unforeseen pitfalls when trying to make Juicebox do something it was not designed to do (especially when interacting directly with Juicebox CSS classes).
Perhaps the easiest way to overcome this problem might be to give your gallery fixed pixel dimensions (rather than percentage dimensions) so that the gallery is not resized dynamically if/when the browser window is resized.
It might not be as difficult as you think.
You could use the online custom cursor creator (link above) to create a couple of new cursors (one for the 'previous' hit area and one for the 'next' hit area).
After designing the images, download the cursor files, and name them 'previous.cur' and 'next.cur'.
Next, copy the two .cur files into your gallery's 'jbcore/classic/' folder.
Finally, add the CSS code (from my post above) to the end of the 'jbcore/classic/theme.css' file (in a plain text editor).
The Button Bar doesn't appear when it's set to "TOP".
The Button Bar should certainly appear when buttonBarPosition="TOP". Make sure that the topAreaHeight (in JuiceboxBuilder-Pro's 'Cusrtomize -> General' section) is not too small for the Button Bar to be visible.
The Open Image button will always be part of the Button Bar and the Button Bar can be positioned only using the buttonBarPosition configuration option (OVERLAY, OVERLAY_IMAGE, TOP or NONE).
It sounds like setting buttonBarPosition="TOP" and buttonBarHAlign="LEFT" (to horizontally align the Button Bar to the left side of the gallery) might be suitable for your gallery's layout.
Alternatively, you could create your own HTML 'Open Image' button, position it on your web page alongside your gallery and have it act like the Juicebox 'Open Image' button by opening the main image in a new tab or window when it is clicked.
You would use the Juicebox-Pro API (specifically the getImageInfo() method) to determine the imageURL (or linkURL) of the currently displayed image and then use JavaScript to open the URL in a new tab or window.
If you would like to see how a custom 'Open Image' button would work, then create a sample gallery using JuiceboxBuilder-Pro and use the following code as the gallery's HTML index page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="minimal-ui" />
<style type="text/css">
body {
margin: 0px;
}
</style>
<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
var jb = new juicebox({
containerId: "juicebox-container",
galleryHeight: "400",
galleryWidth: "600"
});
$(document).ready(function() {
$('#open').click(function() {
var index = jb.getImageIndex();
var info = jb.getImageInfo(index);
var url = info.imageURL;
window.open(url);
});
});
</script>
<title>Test</title>
</head>
<body>
<div id="input">
<input id="open" type="button" value="Open Image" />
</div>
<div id="juicebox-container"></div>
</body>
</html>If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look and help further.
If you are looking to have the gallery displayed in your web page instead of the Splash Page (which is displayed by default in Small Screen Mode when the gallery is embedded in a page with dimensions of less than 100% x 100%), then you can enter showSplashPage="NEVER" in the Pro Options text area.
Alternatively, you could force the gallery to be displayed in Large Screen Mode (which does not display the Splash Page unless showSplashPage="ALWAYS") by setting screenMode="LARGE".
For more information about the Splash Page and Screen Modes, please see here.
If you are looking to actually pinch-zoom an image within a Juicebox gallery, then this is possible but you would need to be very precise as the start of a pinch-zoom gesture is likely to be interpreted as the start of a gallery-specific gesture (such as a swipe to navigate between images).
I hope this helps.
Please note that we did not write the Juicebox module for Drupal ourselves and I am not familiar with its code (or how it populates the image titles and captions).
Other Drupal users may be reading this thread and can perhaps contribute some useful information but you would likely receive more help by posting your query in the Drupal forum where the author of the module will be able to answer your query.
For the content type "Image" I've activated the title and alt fields. When adding fields to a view I'm missing the field "Content: Image (field_image:title)". All I see is the field "Content: Image (field_image:delta)". So that's more of a Drupal issue I guess.
With regard to the Image Field Caption, the documentation on this web page says the following:
Image field caption. Active only when the Image Field Caption module is enabled. Available for image fields.
Please check that you have the Image Field Caption module enabled. This might be the cause of your problem.
I realise that this may not directly answer your query but I hope it at least points you in the right direction.
maxCaptionHeight is a pixel value (rather than a number of text lines). If you have set your gallery's maxCaptionHeight to only 5, this will not be large enough to display your caption text. Try increasing it. (The default value is 120.)
When you select 'Images -> Captions -> Use IPTC Caption', JuiceboxBuilder-Pro will extract the IPTC Caption embedded within each image and use it as the image's caption. If there is no such data embedded within the image, the caption will be blank.
(If you use Adobe Photoshop to enter your IPTC data, then use the IPTC Document Title field for the Juicebox title and the IPTC Description field for the Juicebox caption.)
If you click on a thumbnail on the 'Images' tab, you can enter custom text for the image's caption.
If none of the above helps and you still do not see captions in your gallery, please post the URL to your gallery so that I can take a look and hopefully help further.
I'll try to break it down for you by commenting the code.
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
// Need to give 'juicebox' object a variable name (e.g. 'jb') so that you can refer to it later.
var jb = new juicebox({
containerId: 'juicebox-container'
});
// onImageChange function is fired each time a different image is selected.
jb.onImageChange = function() {
// If the selected image is the first one...
if (jb.getImageIndex() === 1) {
// Standard JavaScript timeout is required to work correctly. Need to wait a short while before image can be replaced.
setTimeout(function() {
// The next line uses jQuery (bundled within the 'juicebox.js' file) to replace the main image (class name 'jb-dt-main-image') with custom HTML code.
$('.jb-dt-main-image').html('<p>Text to be displayed in place of the first image.</p>');
}, 250);
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->I hope that makes it a little more understandable.
Essentially, you would give your 'juicebox' object a variable name (such as 'jb') and add the following code to your gallery's web page (below the gallery's embedding code), changing the HTML text as appropriate:
<script>
jb.onImageChange = function() {
if (jb.getImageIndex() === 1) {
setTimeout(function() {
$('.jb-dt-main-image').html('<p>Text to be displayed in place of the first image.</p>');
}, 250);
}
};
</script>I hope that helps.
It looks like the problem is with the height of the gallery rather than with the size of the images themselves.
Your gallery currently has a height of 70%. This means that your gallery's actual height will 70% of the height of its parent container.
When using a percentage value for a gallery's height, it is necessary to explicitly give the gallery's parent container a height so that Juicebox can calculate the gallery's actual height. Juicebox needs to know what the gallery's actual height should be 70% of.
Try one of the following:
(1) Make sure that the gallery's parent container has a height specified via CSS and increase its value if necessary.
This may be difficult to do in a CMS environment such as Drupal where containers are created by the theme.
... or:
(2) Set your gallery's height to be a fixed pixel value rather than a percentage (such as '600px').
Please also see this note for Using Percentage Heights.
I understand your concerns and requirements but, unfortunately, I cannot answer your questions directly as I am not the author of Juicebox and I did not make any of the design decisions. I hope you understand.
However, thank you for posting your suggestion in the Feature Requests thread.
I see now what you are trying to do.
Unfortunately, it is not possible to treat the first image in a gallery any differently from all the other images.
You could perhaps add text as a caption and set captionPosition="OVERLAY_IMAGE" and use a large value for maxCaptionHeight to try to ensure that the text is displayed in its entirety. The caption area will resize as necessary (although the text within the caption area will remain at a constant font size).
Otherwise, you could perhaps use the Juicebox-Pro API and some custom CSS and JavaScript code to replace the first image with some custom text. For example:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container'
});
jb.onImageChange = function() {
if (jb.getImageIndex() === 1) {
setTimeout(function() {
$('.jb-dt-main-image').html('<p>Text to be displayed in place of the first image.</p>');
}, 250);
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->A short timeout is required for this to work correctly which means that the first image in the gallery will be displayed briefly before being replaced with the custom text but as long as the first image in the gallery is a blank image, this should hopefully not matter too much.
I hope you are able to use one of the suggestions above.
Also noticed that the swipe feature (to change images) does not work on IE11, Win8. Is this a known issue?
Yes. We are currently investigating Windows 8 touchscreen issues and hope to have a resolution for the next version of Juicebox.
Juicebox-Pro does not have a configuration option similar to SimpleViewer-Pro's imageNavStyle="CURSOR".
However, being that Juicebox is an HTML gallery, you could create your own 'previous' and 'next' navigation cursors and apply them via CSS to the 'left' and 'right' hit areas of the gallery using the following classes.
.jbn-nav-touch-area.jbn-nav-left-touch-area {
cursor: url(previous.cur),auto;
}
.jbn-nav-touch-area.jbn-nav-right-touch-area {
cursor: url(next.cur),auto;
}For more information on the CSS cursor property, please see here.
You could create custom cursors using this online cursor editor.
It sounds like you are looking to include SEO content in your gallery for web crawlers to pick up and index.
If so, select the 'Add SEO Content' checkbox in JuiceboxBuilder-Pro's 'Customize -> Sharing' section and use the embedding code provided on the 'Publish' tab (which contains the SEO content within the 'juicebox-container' div).
Please see here for further details.
You can selectively load a specific XML file using JavaScript and the configURL option as follows:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var config = 'spanish.xml';
if (language === 'english') {
config = 'english.xml';
}
new juicebox({
configUrl: config,
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->In the example above, you would need to define your own 'language' variable and test it to determine which XML file to use.
Glad to hear it was an easy fix. Thanks for letting me know.
It sounds like the 'juicebox.js' file has not been loaded in your gallery's web page.
Please make sure that the 'jbcore' folder has been uploaded to your web server and that the path to the 'juicebox.js' file (in the <script> tag within your gallery's embedding code) is correct.
If you continue to experience difficulties, please post the URL to your gallery's web page so that I can take a look and help further.
The thumbnails within a Juicebox gallery were designed more as a navigation device that a way to showcase the main images themselves. Many users choose to use dots instead of thumbnails (to maximize the amount of space for the main images) or not to use thumbnails at all (although I understand that different users have different requirements and this may not suit your own needs).
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 by the developers. Thank you.
I've updated my site, so your developers won't see it any more.
That's not a problem. I have created my own test gallery for the bug report.
I have it set to blank/empty/nothing in it.
Leaving the backButtonUrl empty will go back one page in the browser's history when the Back Button is clicked.
You can set the backButtonUrl to a specific page using either an absolute path, e.g.:
backButtonUrl="http://www.example.com/gallery/index.html"... or a relative path (relative to the web page containing the gallery's embedding code), e.g.:
backButtonUrl="index.html"Is there any way to have it always go back one level?
If you want the Back Button to go back a level, you can use:
backButtonUrl="../"... and the browser will load the default web page in the gallery's parent directory.
Using firstImageIndex in Small Screen Mode should skip the thumbnail page and initially display the specified image.
If you can confirm that there is a problem when using firstImageIndex="1" and showSmallThumbsOnLoad="TRUE" in Mobile Safari on iOS 8.1, then please let me know. Thank you.
caption on first image didn't show
This sounds like a known bug: the caption for the first image fails to display when captionPosition="BELOW_THUMBS" and showSmallThumbsOnLoad="FALSE".
(With your other problem and the mention of Mobile Safari on iOS 8.1, I did not make the connection earlier between your caption problem and the bug. It was not until you mentioned "caption on first image" that I realised the cause of the problem.)
However, this bug has already been addressed and will be fixed in the next version of Juicebox-Pro (although I do not know when it will be released).
Do you see the problem in any of our own demo galleries on this web page: http://www.juicebox.net/demos/ ?
Please try the Simple gallery (http://www.juicebox.net/demos/pro/simple) which has the thumbnails and captions positioned to the side of the gallery (somewhat similar to your own gallery).
If you do not see the problem in our own Simple demo gallery, then the problem may be unique to your own gallery or web page. Here are a few things you could try to see if they help:
(1) If possible, try using only alpha-numeric characters in your configURL's query string (or escape other characters such as spaces).
(2) Your dynamically-generated XML file is not seen by the browser as an XML file.
In your 'config.php' file, try adding the following code to set the file's header correctly:
<?php
header("Content-type: application/xml");
?>(3) Also, there is no XML declaration at the top of the dynamically-generated XML file.
Make sure that your 'config.php' file outputs the following line of code at the very top of the dynamically-generated XML file:
<?xml version="1.0" encoding="UTF-8"?>(4) Try clearing your browser's cache to ensure that your browser is fetching and using the most recent versions of your gallery files.
(5) It looks like you have renamed your gallery's 'jbcore' folder. Try uploading the complete stock Juicebox-Pro 'jbcore' folder to your web server (without renaming it or changing its structure) and load the 'juicebox.js' file from within it.
Hopefully one of the suggestions above will help. They may not make a difference but, they should all be fairly quick and easy to try.
If you do see the problem in our Simple demo gallery, then it sounds like a more generic issue with Juicebox and iOS 8.
If possible, please upload a couple of screenshots somewhere to demonstrate the problem so that I can pass them on to the developers if I need to submit a bug report. Thank you.
There is no cropping tool for the thumbnails. However, you can create thumbnail images of whatever size you like in JuiceboxBuilder-Pro by clicking the 'Change Sizes...' button in the 'Image Size' control panel on the 'Images' tab and entering thumb width and thumb height dimensions.
JuiceboxBuilder-Pro will create thumbnails at the specified dimensions and will set the thumbWidth and thumbHeight configuration options (in the gallery's XML file) to the values that you use.
As long as the aspect ratio you use for the thumbnails matches that of your main images, then the thumbnails will not be cropped.
(Please note that all thumbnails in a gallery will have the same dimensions and, if any cropping is required, the thumbnails will be center-cropped.)
If you are having trouble installing JuiceboxBuilder-Pro, then please see the Installation Issues section of the JuiceboxBuilder User Guide.
If you are having trouble installing Adobe AIR itself, then please take a look at Adobe's own Troubleshooting AIR Installation | Mac OS support page which should hopefully help.
If you continue to experience difficulties, then there is a fairly comprehensive list of things to check and try in this forum thread.
Hopefully the information in the links above will help to you successfully install JuiceboxBuilder-Pro.
Edit:
I notice in the Adobe forums that other users seem to be having problems with AIR and AIR applications under Yosemite so Adobe may be currently having issues with AIR on the new Mac OS.
You might like to try using the latest beta version of Adobe AIR which can be downloaded from here: http://labs.adobe.com/downloads/air.html
You could also try reverting to an older version of Adobe AIR (such as v14) to see if this helps. Older versions can be downloaded from their archive web page here: http://helpx.adobe.com/air/kb/archived- … rsion.html
Yes. There are two fading image transitions available in Juicebox-Pro: FADE and CROSS_FADE.
For short descriptions of all possible image transition types, please see here.
If building a gallery with JuiceboxBuilder-Pro, the imageTransitionType configuration option can be found in the 'Customize -> Main Image' section.
I see the problem in your mobile.grantsymon.com site and I have been able to replicate the problem in a test gallery of my own using the configuration options that your galleries use.
The problem seems to be with the combination of the following two options:
backButtonUseIcon="TRUE"
backButtonHAlign="CENTER"I have logged a bug report with the developers and this should hopefully be fixed in the next version of Juicebox-Pro.
In the meantime, workarounds would be to either set backButtonUseIcon="FALSE" (and use backButtonText to set text or a custom image instead) or to set backButtonHAlign to either "LEFT" or "RIGHT".
Will you please post a message here when you know if the bug was fixed for safari?
Yes. When a new version is released, I go through the forum and post in threads relating to bugs which have been fixed.
He only sees a blank page...
do you see the expanded juicebox gallery or just a blank screen?
On an iPod Touch 4 running iOS 6.1.6, the gallery displays and functions fine in both Chrome and Mobile Safari when tapping the Splash Page. There are a few things you can try, though, which may make a difference and help the gallery to run under iOS 8.
(1) If possible, try using only alpha-numeric characters in your configURL's query string (or escape other characters such as double-quotes).
(2) Your dynamically-generated XML file is not seen by the browser as an XML file.
If it is a PHP script, then try adding the following code to set the file's header correctly:
<?php
header("Content-type: application/xml");
?>(3) Try setting all the configuration options in your embedding code as strings (rather than booleans or integers). For example, try changing:
thumbSelectedFrameWidth : 5,
showPreloader : false.. to:
thumbSelectedFrameWidth : "5",
showPreloader : "false"(4) The imageURL, thumbUrl and linkURL entries in your XML file use absolute paths using the http://arch-pro.de/ domain but the web page is on (and redirects to) the www subdomain (http://www.arch-pro.de/). Try setting all absolute paths to use the www subdomain (so that all gallery files are on the same domain as the page containing the embedding code).
(5) Make sure that your client is viewing the gallery over wi-fi and not a 3G or 4G connection.
If a 3G or 4G connection is being used, then this can result in a blank area where the gallery should be.
Please see this FAQ for more details and a solution to the problem.
Why can't I view my gallery on a 3G mobile connection?
(6) Check the code on your web pages with the W3C Markup Validation service and fix any errors reported.
HTML errors can often result in unpredictable and inconsistent results in different browsers.
(7) It looks like you may have renamed your gallery's 'jbcore' folder. Try uploading the complete stock Juicebox-Pro 'jbcore' folder to your web server (without renaming it or changing its structure) and load the 'juicebox.js' file from within it.
(8) Try changing the value of expandInNewPage which will change how the gallery expands from the Splash Page (and Expand Button). Possible values are AUTO (default), TRUE and FALSE. Please see here for more details.
Hopefully one of the suggestions above will help. Most of them should be fairly quick and easy to try.
All of the above may not be relevant or make a difference but, at present, it is everything I can think of that I would try for myself.
Unfortunately, there is no easy way to do this. Facebook no longer allows a specific image URL to be passed via their share URL.
The image displayed in the Facebook share window is defined only by the value of the og:image meta tag.
(There is also no way to change the data passed in the share URL. This is hard-coded into the 'juicebox.js' file which is obfuscated and cannot be modified.)
The link being shared will point towards the current image in the gallery but the thumbnail displayed in the Facebook share window will be the og:image.
You may be able to achieve your goal using the technique you outlined above but it might be quite complex and is not guaranteed to work.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.