You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Can we disable the default somehow?
No. This is hard-coded into the 'juicebox.js' file which is obfuscated and cannot be modified.
The imageTransitionType configuration option can be changed only for Large Screen Mode and Mouse Input Mode (not for Small Screen Mode or Touch Input Mode).
Thank you for posting your suggestion in the Feature Requests thread, though.
The two paths within your gallery's embedding code (the path to the 'juicebox.js' file and the baseUrl itself) are incorrect.
The file is in the gallery folder
Where have you uploaded your gallery folder to on your web server?
What is the URL of your gallery's 'index.html' file (inside the gallery folder)?
Use this (without the 'index.html' at the end) as your gallery's baseUrl.
Your WP-Juicebox gallery is a Media Library gallery but there are no images attached to the post containing the gallery so no images are displayed in the gallery.
You can add images to your gallery by attaching images to the post containing the gallery following the 'Adding Images From WordPress Media Library' instructions on this web page.
You would need to upgrade to Juicebox-Pro (which can be purchased from this web page) to remove the branding. The Juicebox badge/logo is present in all Juicebox-Lite galleries but not in Juicbeox-Pro galleries.
If you are referring to a Media Library sourced Juicebox gallery created by WP-Juicebox within WordPress, then you can remove an image from a gallery by going into your Media Library and unattaching the image from the post containing the gallery.
Your page still contains a lot of errors which should really be fixed.
Until the code on your page validates, I cannot be sure that the errors on your page are not contributing to the problem.
Have you tried my suggestion of using inline CSS to define your the width of your gallery's parent container?
When increasing the width of the browser window (from a very narrow width), the problem seems to occur when the browser window becomes wide enough to accommodate the second column of your web page, at which point the width of the first column (containing the gallery) is dynamically reduced rather than increasing in proportion with the width of the browser window. Juicebox may not be aware of this reduction in its parent container's width and using inline CSS (as I suggested in my last post) may help.
is it possible to add a custom button to the bar through api?
No. This is not possible.
It would be helpful to add option of no pin tag to thumbnails since they are terrible quality to pin.
You could try the following suggestion but please note that it is untested and I do not know if it will work.
You could listen for the Juicebox-Pro API onThumbPageChange(id) method to be fired (each time a new page of thumbnails is displayed) and use JavaScript to iterate over all the <img> tags on the page with class="jb-thm-thumb-image" and dynamically add the nopin="nopin" attribute to them.
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
jb = new juicebox({
containerId : 'juicebox-container'
});
jb.onThumbPageChange = function(e) {
var thumbs = document.querySelectorAll(".jb-thm-thumb-image");
var counter=0;
for (var i=0, max=thumbs.length; i < max; i++) {
thumbs[i].setAttribute("nopin", "nopin");
}
}
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Try fixing the HTML errors on your page. (At present, your page looks to be a collection of many different pages as it has several opening <html> and <body> tags.)
Once your page's code validates correctly, your page should be rendered with greater predictability and consistency across different browsers.
You can check your page's HTML code with the W3C Markup Validation Service.
You can also check your page's CSS code with the W3C CSS Validation Service.
Also, as your gallery uses a percentage width, try using inline CSS to define your the width of your gallery's parent container, similar to the percentage height example given here.
On 1,3 are we able to configure behavior like small screen without sliding transitions?
No. In Small Screen Mode, the imageTransitionType defaults to SLIDE.
So I would either like to change those transitions to nothing
This is not possible in Small Screen Mode (where imageTransitionType will always be SLIDE, which is the transition which best matches the swipe gesture on mobile devices).
or to remove the larger image when thumbs are shown
This is possible only by setting screenMode="SMALL".
and each thumb should take me to an enlarged single image page.
It is not possible to link thumbnail images to unique URLs.
This variation is one of the most basic classic gallery configurations and if it cannot be achieved right now - it should added to the list of juicebox options.
Please post suggestions in the Feature Requests forum thread. It keeps them all together and ensures that they are not overlooked.
Thank you for posting the URL to your web page.
It certainly looks like the embedding code has been entered in 'Visual' mode.
Rather than just switching to 'Text' and updating your post, you will need to switch to 'Text' and re-paste your embedding code before updating the post.
Also, it looks like the paths in your embedding code may be incorrect.
You use paths such as:
http://www.maxphotostudio.com/public_html/wordpress/wp-content/Juicebox_Galleries/Kali_Kate_HDR/jbcore/juicebox.jsAlthough you upload your files to a folder named 'public_html' on your web server, it is unlikely that this folder name forms part of the actual URL.
Even removing the 'public_html' folder name from the URL, the path does not seem to be correct as the 'juicebox.js' file is not located here:
http://www.maxphotostudio.com/wordpress/wp-content/Juicebox_Galleries/Kali_Kate_HDR/jbcore/juicebox.jsCheck that you have uploaded your gallery folder to the correct location on your web server and that the two paths within your embedding code (the path to the 'juicebox.js' file and the baseUrl) are correct.
I do not know the exact cause of the problem, only that it occurs if all of the conditions below are met:
Touch Input Mode only
Both jQuery (v1.9.1) and Twitter Bootstrap (v2.3.1) JavaScript files are loaded on the page
Window resize code is used
I have logged a bug report with the developers.
I've been using the Wordpress Juicebox plugin, but I'm not certain that the SEO tools are built in, so I'm working on making the switch to the desktop application.That is correct. WP-Juicebox does not generate SEO code.
I've created my gallery, uploaded it to my server, and am trying to use the baseURL method to point to the gallery (since it's Wordpress, I'm fairly certain I need to do it this way, though I could absolutely be wrong).
Using the baseUrl method is probably the best way to embed a gallery in a WordPress environment (other than using WP-Juicebox) as it means you can keep the gallery as a self contained entity with all the gallery files in a single folder and you do not need to worry about which folder to upload the gallery files to.
But, when I look at my page, all that shows is the html text.
It sounds like you might be entering the code into the body of your post in 'Visual' mode. Switch to 'Text' mode when entering code.
The page I'm testing is here.http://www.maxphotostudio.com/index.php … ebfa26f33c
That URL displays "You do not have permission to preview drafts." so I cannot check your page at present.
If you plan to copy and paste the embedding code and SEO code from a gallery created by JuiceboxBuilder-Pro into a WordPress post, make sure that the paths to the images in the SEO code are correct. If you are using a baseUrl, you will need to modify the paths to point to the correct location.
1. Is Pro support runtime define image switch animation(like api invoke solution)? or random switch animation within one gallery view.
No. The imageTransitionType must be set before the gallery is initially displayed and will be used for all images in the gallery.
You could, however, have a random imageTransitionType used each time the gallery is displayed by using the following embedding code:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var transition;
var number=Math.floor(Math.random()*4);
switch(number) {
case 0:
transition = "SLIDE";
break;
case 1:
transition = "FADE";
break;
case 2:
transition = "CROSS_FADE";
break;
case 3:
default:
transition = "NONE";
break;
}
new juicebox({
containerId : 'juicebox-container',
imageTransitionType: transition
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->2. and multi backgroud audio track support, like runtime switching or random play within one gallery view?
No. Juicebox-Pro supports only a single audio track. If you wanted to play a random track each time the gallery is loaded, you could use code similar to that above.
For reference, the complete list of Audio Options can be found here.
3. Chinese character support(UTF-8)?
Yes. You can try it out with Juicebox-Lite before purchasing Juicebox-Pro.
4. something like gallery list view is much more better. The thumber view like "http://www.paulvanroekel.nl/picasa/polaroiddemo/" is prefered.
Set screenMode="SMALL" to force the gallery to be displayed in Small Screen Mode in all browsers and on all devices.
This will initially display a grid of thumbnails from which the user can select a main image. When the main image is selected, the user can return to the thumbnail page via the 'Toggle Thumbnails' button on the Button Bar.
For more information about Screen Modes, please see here.
You are missing a closing ) from the end of your gallery's embedding code.
Change:
<script>
new juicebox({
baseUrl :"jb_small/",
containerId : "juicebox-container",
galleryWidth: "300",
galleryHeight: "200",
backgroundColor: "#222222"
}</script>... to:
<script>
new juicebox({
baseUrl: "jb_small/",
containerId: "juicebox-container",
galleryWidth: "300",
galleryHeight: "200",
backgroundColor: "#222222"
});
</script>Is there some way to increase the horizontal size of the area that captions are displayed within, just as you can increase the vertical size?
You can have the captions span the width of the main images (when setting captionPosition to either OVERLAY_IMAGE or BELOW_IMAGE) or the width of the stage (when setting]captionPosition to either OVERLAY or BOTTOM) or the width of the thumbnail area (when setting captionPosition to BELOW_THUMBS).
It is not possible to fine-tune the horizontal width of the caption area.
What does it mean when I get the error showing up in the gallery window "config.xml file not found"?
With a standard gallery, the following FAQ would usually help with the 'Config XML file not found' message.
When I view my gallery I see the message 'Config XML file not found'. How do I fix this?
However, in your case, your gallery's XML file is generated dynamically by WP-Juicebox (the WordPress plugin) at the time the gallery is displayed. If you are using a NextGEN gallery as a source of images for your Juicebox gallery when the 'Config XML file not found' message is displayed, then there may be a problem with the NextGEN gallery itself causing the XML file to fail to be created successfully.
Please post the URL to your gallery so that I can take a look and hopefully help further.
If you wish to prevent browsers from caching your gallery's XML file, please see this forum post.
The languageList option is not featured in the JuiceboxBuilder-Pro interface.
It must be added to the list of configuration options in your gallery either in the XML file (as an attribute to the opening <juiceboxgallery> tag) or within the embedding code (as documented here).
For example, in the 'config.xml' file:
<?xml version="1.0" encoding="UTF-8"?>
<juiceboxgallery
galleryTitle="Juicebox-Pro Gallery"
languageList="Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of"
>
<image imageURL="images/image1.jpeg"
thumbURL="thumbs/image1.jpeg"
linkURL="images/image1.jpeg"
linkTarget="_blank">
<title><![CDATA[]]></title>
<caption><![CDATA[]]></caption>
</image>
</juiceboxgallery>.. or in your gallery's embedding code:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId: 'juicebox-container',
languageList: 'Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Open Image in New Window|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of'
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->Change the text you would like to customize within the list leaving all other elements the same (elements should be separated from each other by the | character).
For example, if you wanted to change the tooltip text for the Open Image button from 'Open Image in New Window' to 'Click to view image' then you would use the string:
Show Thumbnails|Hide Thumbnails|Expand Gallery|Close Gallery|Click to view image|Next Image|Previous Image|Play Audio|Pause Audio|Show Information|Hide Information|Start AutoPlay|Stop AutoPlay|AutoPlay ON|AutoPlay OFF|Go Back|Buy this Image|Share on Facebook|Share on Twitter|Share on Google+|Share on Pinterest|Share on Tumblr|of
I have just introduced a CSS menu on all the pages, but when I flip from "source" to "WISIWIG" the code <div id="juicebox-container"></div> disappears.
This may simply be a limitation of the browser built in to BlueGriffon. In order to preview your gallery, I would recommend viewing your page in a standard browser (such as Firefox, IE, Chrome or Safari).
(There is a similar limitation in Dreamweaver whereby the Juicebox gallery will not show in Dreamweaver's design preview.)
The main gallery on the pictures.html page does not show properly on first load - it is ok on refresh. This is the same in chrome as well as IE; any ideas on a solution?
Check your page's code with the W3C Markup Validation Service and fix any errors that are reported.
The small galleries on pictures.html and guestbook.html do not show - simply a white field in the table. I've checked the code, which appears to be the same as all the other pages.
You have two galleries on your page but both galleries are embedded into the same container.
You need to embed each gallery into a <div> with a unique id.
For example:
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
containerId : "juicebox-container1",
});
</script>
<div id="juicebox-container1"></div>
<script>
new juicebox({
containerId : "juicebox-container2",
});
</script>
<div id="juicebox-container2"></div>On the other site, they do not appear at all.
Try comparing the settings in the 2 'config.xml' files (and copy the settings from one gallery to the other if you want both to look similar).
The site where they don't appear has a black background and I've seen in other cases where this can cause certain things to "disappear". I'm wondering if that is the case.
That is certainly possible. For example if you have white text on a white caption area, the text will be displayed but not visible.
What controls the absence/presence of these?
The main image navigation buttons are displayed when showImageNav="TRUE".
The thumbnail navigation buttons are automatically displayed if there are enough thumbnails in your gallery to require multiple thumbnail pages.
I notice that your gallery uses Juicebox-Pro v1.1.0.
Please upgrade your gallery to the latest version (v1.3.0) as many bugs have been fixed since v1.1.0.
Please see the Version History for a full list of changes.
Instructions on how to get the latest version and upgrade existing galleries can be found on the Upgrading Juicebox page.
Also, try fixing the HTML errors on your page. You can check your page's code with the W3C Markup Validation Service.
Once the page on your code validates correctly, your page should be rendered with greater predictability and consistency across different browsers.
The flickering seems to appear only when both bootstrap.min.js and jquery-1.9.1.min.js are loaded on the page.
If you need bootstrap.min.js, then try removing jQuery v1.9.1 from your page and use the version of jQuery incorporated within the 'juicebox.js' file instead.
The combination of imageTransitionType="FADE" and captionPosition="BELOW_IMAGE" (with all other settings at their default values) does not cause captions to disappear in my own test gallery but it is possible that a certain combination of configuration options might cause the problem.
Please post the URL to your gallery so that I can take a look.
After setting the Nav Button Back Color, change the Nav Button Icon Color to something other than white and then change it back to white and it should work.
I will notify the developers of this oddity.
Try setting expandInNewPage="TRUE" (in the JuiceboxBuilder-Pro 'Customize -> General' section). This should hopefully bypass the 'z-index' issues that you are experiencing.
Please see here for more information.
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.