That's great! Thank you for letting me know.
You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
That's great! Thank you for letting me know.
When JuiceboxBuilder resizes a PNG file, it converts it to a JPG file and transparent regions are rendered as black in the main image but white in the thumbnail. The developers are aware of this inconsistency and it has been logged as a bug.
When choosing not to resize PNG images (by deselecting the 'Resize Images' checkbox on the 'Images') tab, the original PNG images are copied across to the gallery's 'images' folder (unprocessed) but with an incorrect '.jpg' file extension. This has also been logged as a bug.
To regain transparency, you'll need to rename the file extensions in the 'images' folder from '.jpg' to '.png' and also change the file extensions in the corresponding imageURL entries in the gallery's 'config.xml' file.
Please note that the thumbnails (in the 'thumbs' folder) will have been converted to JPG files (with transparent regions rendered as white). If you like, you can just use the imageURL paths (after correcting the file extensions) for the thumbURL entries by manually editing the 'config.xml' file. Juicebox will dynamically scale the images when the gallery is displayed and you'll have transparency in both the main images and thumbnails.
I realise that this is inconvenient and adds a few extra steps to your workflow but, until the bugs are fixed, it is at least still possible to display PNG files with transparency in a Juicebox gallery (with a bit of work).
Both of the PNG related issues above have been logged as bugs and should be fixed in a future version (but, unfortunately, I do not know exactly when this might be).
It seems strange that activating WP-Juicebox would prevent your web site from triggering its mobile mode.
Usually, factors such as the device (browser user agent), screen size and screen resolution will be taken into account when deciding whether to use desktop vs mobile mode but, from what you say, your theme's logic seems to also be considering page content. Maybe your theme's author can help determine why your mobile mode is not being used when WP-Juicebox is active. Other than loading the 'juicebox.js' JavaScript file and having a <script> tag with the gallery's embedding code, all that WP-Juicebox inserts into the web page is a <div> container for the gallery.
Checking out your website in Mobile Safari (iOS 10.3.1), the big difference between gallery pages and other pages seems to be that most gallery pages have large text at the top (above the header) such as "North Hollywood, Malibu, CA: Iron Gates in Los Angeles" in the link you provided. It seems to be this text that is not being resized appropriately. The rest of the web page seems to be responsive (the header fits the width of the web page and the navigation menu is hidden under the icon).
It might just be that your theme is not taking this text into account when resizing content for mobile devices.
The "Error: No p element in scope but a p end tag seen." validation message seems to be coming from the following two sections of code surrounding the gallery's embedding code.
<p>[vc_row el_position=”first last”][vc_column][vc_tabs interval=”0″ el_position=”first last”][vc_tab title=”Pictures” tab_id=”1357613662131-6-0″][vc_column_text]
[/vc_column_text][vc_column_text el_position=”first last”][/vc_column_text][/vc_tab][vc_tab title=”Glass Information” tab_id=”1368221702106-4-9″][vc_column_text el_position=”first last”]</p>
If you view the source of your web page in your browser, you'll see this code surrounding the gallery's embedding code.
The plugin only inserts the code between <!--START JUICEBOX EMBED--> and <!--END JUICEBOX EMBED-->. The code I posted above (including the <p> and </p> tags) are not inserted by WP-Juicebox.
WordPress can sometimes insert unwanted <p> (and <br />) tags but usually only when you enter HTML code directly into the WordPress editor (in 'Text' mode). (Maybe you've got some code other than the WP-Juicebox gallery shortcode in your editor.) This is usually due to WordPress's wpautop function.
You could try installing a third-party plugin to disable the wpautop functionality, for example Toggle wpautop or wpautop control.
Otherwise, you could perhaps implement the manual solution from this forum thread.
Alternatively, you could try installing the Raw HTML plugin and wrap any HTML code that you have in the WordPress editor in [raw] ... [/raw] tags. This should prevent extra markup (such as <p> and <br /> tags) from being added to the HTML code by WordPress itself or any third-party theme or plugins.
This might help with the <p> </p> tags but I do not know where the [vc_*] tags are coming from. They look like unprocessed shortcode tags (but I do not know their origin).
Incidentally, it looks like your theme's custom CSS is affecting the layout of your WP-Juicebox galleries.
When I view a gallery on a mobile device, the Splash Page image is offset (to the top left). This is more than likely to be due to some CSS which is being applied to all images on your web page (including those in your gallery).
Specifically, on line 1 of your 57901af0a3c58.css file, there is the following code:
img, video, .wp-caption {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
height: auto !important;
}
These CSS rules are being applied to all images (<img> tags) on your web page and the WP-Juicebox gallery has no option but to inherit them. Ideally, those CSS rules should be applied to only those elements on your web page which require them through use of CSS selectors (classes or ids).
I hope these notes point you in the right direction.
When you use a watermark in JuiceboxBuilder-Pro, the watermark is baked into the image itself when the image is resized for the gallery. The idea is that wherever the image goes, the watermark goes, too. It's usually used as a deterrent to discourage people from downloading your images.
As such, the watermark itself cannot be moved from the image to somewhere else in the gallery.
However, you can add an image (such as a watermark image) to your gallery in several other ways.
Please see the Adding a Logo support section for a couple of suggestions.
Perhaps the best suggestion would be to use the Gallery Title (suggestion #3 in the link above). If you set galleryTitlePosition="TOP", then you can also set topAreaHeight to a value large enough to ensure that the image you use does not overlap the main images in your gallery.
If you just wanted to include some copyright text, then you could either use the Gallery Title or the image titles and captions.
Image titles and captions can be multi-line so if you already have a caption for an image, you can add a couple of HTML line breaks and then your copyright text to the end of an existing title. For example, you could enter a caption such as:
This is the image caption.<br><br>Copyright © 2017 Me
I notice that your galleries currently use Juicebox-Pro v1.4.0.
Please try upgrading them to the latest version (v1.5.0) to see if this helps. There have been 7 releases since v1.4.0 fixing many bugs so upgrading might fix your problem without any further action. Please see the Version History for a list of changes between versions.
You can download the latest version using the link from your purchase email (the link always points towards the latest version rather than the version you purchased). If you cannot find your purchase email or your link has expired, then please fill in the Download Link Request Form and the admin team will send you a new link. (Full details for upgrading can be found here.)
Once you've downloaded Juicebox-Pro v1.5.0, just replace the 'jbcore' folder in your WP-Juicebox plugin with the version from the Juicebox-Pro v1.5.0 zip package ('juicebox_pro_1.5.0/web/jbcore/') following the instructions here.
If this does not help, then try fixing the HTML errors on your web pages.
You can check the code on your web pages using the W3C Markup Validation Service. Some browsers may be more or less tolerant towards HTML errors than other and once the code on your pages validates correctly, your pages should be rendered with greater predictability and consistency across different browsers.
I hope this helps.
Please try the suggestions in this forum post.
I expect the most likely cause is a either going to be a conflicting plugin such as a security or caching plugin (Suggestion #2) or an entry in a .htaccess file preventing the plugin's PHP pages from being accessed directly (Suggestion #5).
I hope this helps.
However, if you continue to experience difficulties, please post back with some more details about your problem such as when exactly does the error message occur (e.g. when clicking the 'Add Juicebox Gallery' button or accessing the 'Manage Galleries' page or viewing the gallery).
If you could perhaps provide a screenshot so that I can see what you are seeing, then that might also help.
Thank you.
That's great to hear!
Thank you for letting me know.
Unfortunately, what you are looking to do might not be possible. When a gallery is expanded to fill either the browser window or the entire screen, only the gallery itself (essentially the 'juicebox-container' <div>) is displayed. The code which handles the gallery expansion is buried deep within the 'juicebox.js' JavaScript file which is obfuscated and cannot be modified.
The only way to do something like this would be to set expandInNewPage="TRUE" (in the General Options section), a Juicebox-Pro option which is not supported by Juicebox-Lite.
This will force the gallery to be expanded in a new web page (instead of on top of the embedding page or triggering the Fullscreen API to cover the entire screen). The web page that is used when the gallery is expanded in this way is the 'full.html' file within the gallery's 'jbcore' folder.
You could then modify this HTML file to change the gallery's dimensions (reduce the size of the gallery from 100% x 100% to allow room for your own custom content) and add your own HTML code in a custom <div> alongside the gallery.
I expect that this should work but please note that this is untested and modification of the 'full.html' file is not officially supported so you would do so at your own risk. (You may run into unforeseen problems that might need to be tackled along the way.) Also, there is no way for the 'full.html' file to be used in conjunction with the Fullscreen API so when the gallery is expanded, it will fill only the browser window and not the entire screen.
I notice that you are using the Juicebox module for Drupal. Please note that the module is an unofficial plugin which was not written by ourselves, and as such, I am not overly familiar with its code, interface or inner workings.
The problem seems to be not with Juicebox itself (Juicebox will display captions as long as they are present in the gallery's configuration file) but with the module's ability to fetch the captions and write them to the configuration file).
However, the module is well supported by its author in the Drupal forum and I would highly recommend that you post your query over there where Ryan will see it and hopefully be able to help you further.
(Also, the module's online documentation might help.)
I realise that this does not directly answer your query but I hope that it points you in the right direction.
You're welcome!
Hopefully you'll find that it works fine (as it does when I try it in my browser's developer tools).
Thanks for the link.
There are quite a lot of z-index values in your 'style.css' file and it's not easy to see exactly which elements are going to be stacked on top others but it looks like just removing z-index: 100; from your #header CSS (on line 110 of your 'style.css' file) might be enough to solve your problem.
You can set the colors for the thumbnail dots only in Juicebox-Pro (via the thumbDotColor and thumbDotHoverColor Color Options). Unfortunately, these options are not supported by Juicebox-Lite (the free version).
It would be possible to not use thumbnails at all by setting showThumbsOnLoad="FALSE" (for Large Screen Mode) and showSmallThumbsOnLoad="FALSE" (for Small Screen Mode) and disabling the Thumbnail Button by setting showThumbsButton="FALSE" and showSmallThumbsButton="FALSE") but, again, these Thumbnail Options are Pro only.
The problem is likely to be that the z-index value is not being applied to the correct elements in your menu.
If you could provide the URL to a page which demonstrates the problem, I'll take a look and see if I can find a solution.
Currently, the web page whose URL you provided has two lots of (the same) embedding code but the gallery does not display because the path to the 'juicebox.js' file is incorrect.
I realise that you might not want a dysfunctional web page live on your site but I'd really need to see the problem in order to troubleshoot it so perhaps you could create a test page somewhere on your site that is not linked to from anywhere else.
Thank you.
Thanks for your pricing info and options.
You're welcome.
I will have to learn more about Showcase and SimpleViewer and the difference between the standard and pro versions of both, before I will know which way to go.
No problem. I've written a bit more about all three products in this forum thread.
I hope they also will give me info. of adding music and videos to my website.
Juicebox-Pro and SimpleViewer-Pro galleries both support audio for details.
Check out the Juicebox-Pro Adding Audio support section.
Juicebox-Pro Audio Options: https://www.juicebox.net/support/config … io-options
SimpleViewer-Pro Audio Options: https://simpleviewer.net/simpleviewer/p … html#audio
Neither Juicebox-Pro not SimpleViewer-Pro support videos (please see the FAQs below) but you can certainly embed videos into Showkase pages. Here's a demo Showkase page featuring multiple videos.
Please see this forum post for more details on how to add videos to Showkase pages.
Juicebox-Pro FAQ: Will Juicebox load things other than images?
SimpleViewer-Pro FAQ: Will SimpleViewer load things other than images?
By the way, can I add slow - medium and fast buttons for the auto scroll? or is it fixed in settings?
It is not possible to add slow, medium and fast buttons to a gallery but you can set the display time (the time each image is displayed for before the next transition) via the displayTime configuration option (in JuiceboxBuilder-Pro's 'Customize -> AutoPlay' section). You can also set the image transition time (the length of time that each transition between images should last) via imageTransitionTime ('Customize -> General').
@arachnid
Hi. We're currently active working on a new version. Unfortunately, I'm not sure when it will be ready.
I'm sorry I can't give you a better estimate of when the next version might be released but I can at least reassure you that we are busy behind the scenes fixing bugs (including the gallery sizing bug you reported in this forum thread) and preparing the next version.
Anyone who would like to be notified when new versions are released can join our mailing list at the foot of our homepage, keep an eye on our Facebook page, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed.
Set flickrImageCount="500" in the Pro Options text area.
The default value is 50 and the maximum value if 500 (this maximum limit is imposed by Flickr rather than Juicebox-Pro).
For reference, the Flickr Pro Options can be found here.
This should hopefully resolve your problem.
The current price for Showkase-Standard (which comes bundled with Juicebox-Lite and SimpleViewer-Standard, the free versions of the image viewers) is $45.
As you already have Juicebox-Pro, you could integrate your Juicebox-Pro files into Showkase following the Installing a Pro Viewer instructions.
The current price for Showkase-Pro is $95.
When you purchase Showkase-Pro, you'll get individual download links for Showkase, Juicebox-Pro and SimpleViewer-Pro.
You can purchase Showkase-Standard or Showkase-Pro from the Purchase Page.
Unfortunately, there are no discounts currently available for Showkase but as you have recently purchased Juicebox-Pro, you could either:
(1) Purchase Showkase-Standard ($45) and integrate your Juicebox-Pro files (following the instructions in the link above). You'd then have Showkase and Juicebox-Pro for the total cost of $90.
... or:
(2) Purchase Showkase-Pro ($95) and we'll refund you in full for your recent Juicebox-Pro purchase. You'd then have Showkase, Juicebox-Pro and SimpleViewer-Pro for the total cost of $95.
If you have no need for SimpleViewer-Pro (the Flash image viewer), then the less expensive option would be to purchase Showkase-Standard.
However, if you'd like SimpleViewer-Pro, too, then Showkase-Pro offers a saving of $40 over the total cost of all three individual programs (Showkase-Standard, Juicebox-Pro and SimpleViewer-Pro).
If you'd like to purchase Showkase-Pro and would like a refund for Juicebox-Pro, just let me know.
Thank you.
I am guessing that these are my only options, yes?
Pretty much... When the images are returned via the API, the array contains certain data along with the image URL.
I listed the data that could be useful in sorting the images. There are certain other attributes attached to each image but they would be much less useful in sorting such as the image type (e.g. "image/jpeg").
The display order for each image is not stored as array values.
The images should be returned (and displayed by WP-Juicebox) in the display order (according to Google's own documentation - see the quote in my post above) and, unfortunately, if the images are returned in a different order, then there is little that WP-Juicebox can do to re-order the images other than manually sort the array using whatever attributes are available.
I realise that you already use Google Photos but if you want to have more control over the order of images in your WP-Juicebox galleries, then you might like to try using a different image source (such as the WordPress Media Library or Flickr). It would be much easier to re-order images using either of these sources.
Would "updated date" be the time that I last edited and saved the album?
I expect the 'updated' date would be the time that you last edited a particular image. (I notice that in my own test album, each image has a different 'updated' date so 'updated' seems to refer to individual images rather than the gallery as a whole.)
On that basis, I am imagining that I could re-name each image by title, such as a-1.jpg, a-2.jpg, a-3.jpg, etc. and then chose the "by title" configuration as you gave me. Are you aware of a better work-around?
You could certainly do that (or you could add alphabetical or numerical descriptions to all your images, sort by 'summary' and then tweak the WP-Juicebox code to prevent these image captions from being displayed in the gallery) but it would probably be quicker and easier to just re-upload the images to either the WordPress Media Library or Flickr and use the built-in sorting methods that these alternative image sources offer.
I think the problem may be that your gallery was, as you say in your video, never a Picasa Web Album.
My own test results show that the Picasa Web Album API is able to display images from Picasa Web Albums which were migrated over to Google Photos but not from new Google Photos galleries (which were not originally Picasa Web Albums).
(There may have been a short window during the transition from Picasa to Google where new galleries were able to be displayed but this no longer seems to be the case.)
The Picasa Web Album API is still included in WP-Juicebox for backwards compatibility (so that users with old Picasa Web Albums can still display their images).
Unfortunately, I do not know of a workaround for this (it seems that the Picasa Web Album API simply cannot display images from new Google Photos galleries) and you might need to use a different image source for your WP-Juicebox galleries (such as the WordPress Media Library or Flickr).
I realise that this is not going to be the solution that you were hoping for but it is probably what I would do in your position.
... any suggestions...
I see that the 'Photos' section of your website contains many photo galleries (listed under year headings).
I do not know how you are building your site (manually or with a web design program) but we have another software package named Showkase which you might be interested in.
Showkase is a PHP web application which allows you to create a complete portfolio web site (integrating multiple galleries) online.
Showkase has full support for Juicebox-Pro (and SimpleViewer-Pro) and the galleries can be created and managed within the application itself in a web browser interface. (Alternatively, you could continue to create Juicebox-Pro galleries with JuiceboxBuilder-Pro and then import them into a Showkase site.)
You can create Gallery Index pages (perhaps one per year as your current site does) and have as many galleries listed on each Gallery Index page as you wish.
Each gallery is represented by a thumbnail image with the gallery title displayed below and the gallery is opened when the user clicks on the image.
Demo sites created with Showkase (showing the different themes available) can be found here and a sample Gallery Index page can be found here.
Showkase can also create non-gallery pages (About, Basic and Contact pages) where you can add information about yourself (or any other content you like).
All of this is done automatically within the Showkase interface without the need for any manual coding at all.
Please feel free to take a look around the Showkase interface by logging into the Live Demo Admin.
Showkase can be purchased as Showkase-Standard (which comes with Juicebox-Lite and SimpleViewer-Standard, the free versions) or Showkase-Pro (which comes with Juicebox-Pro and SimpleViewer-Pro). The only difference between Showkase-Standard and Showkase-Pro is the bundled viewers.
As you already have Juicebox-Pro, you could purchase Showkase-Standard and integrate your Juicebox-Pro files by following the Installing a Pro Viewer instructions.
Just some food for thought that might make life a little easier if you are currently building and maintaining your web site by hand.
Please double-check the Open Graph meta tags in your gallery's web page to make sure that the information is correct. (This is where Facebook finds the information to populate the share window.)
If the information is correct, then it sounds like you might need to clear Facebook's own cache of your gallery's web page.
Run your gallery's web page URL through the following Facebook online tools.
(1) Facebook's Sharing Debugger: https://developers.facebook.com/tools/debug/sharing/
(2) Facebook's Batch Invalidator: https://developers.facebook.com/tools/d … ing/batch/
(3) Facebook's Open Graph Object Debugger: https://developers.facebook.com/tools/debug/og/object/
(Click the 'Fetch new scrape information' button.)
This should clear Facebook's cache of your web pages and fetch new scrape information from your gallery's web page.
Hopefully this will help.
It might not be easy to seamlessly integrate text next to a Button Bar button but there is already rollover tooltip text associated with each button. When you mouse over the Thumbnail Button, the text 'Show Thumbnails' or 'Hide Thumbnails' (depending on the current thumbnail status) appears. If you like you can change this text via the languageList configuration option.
If you really wanted to display the text 'Toggle Thumbs' below the Thumbnail Button (for example), then you could try something like this:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: "juicebox-container",
showThumbsButton: "TRUE",
showThumbsOnLoad: "FALSE"
});
jb.onInitComplete = function() {
$('.jb-bb-btn-de-show-list').append('<p style="font-family: sans-serif; font-size: 14px; padding-top: 10px; text-align: center;">Toggle Thumbs</p>');
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
I hope this helps.
Not a setting to make then receive reports by email...
That's correct. Unfortunately, there is no such functionality built-in to Juicebox-Pro.
However, I hope my suggestion is at least somewhat helpful.
Set showThumbsOnLoad="FALSE" in JuiceboxBuilder-Pro's 'Customize -> Thumbnails' section to initially hide the thumbnails.
You can also set showSmallThumbsOnLoad="FALSE" to initially skip the thumbnail page and go straight to the first image when the gallery is displayed in Small Screen Mode.
For reference, a list of all Thumbnail Options can be found here.
You could certainly gather hit data on your gallery's embedding page (by including Google Analytics code on the page).
You could even count hits for individual images (please see this forum thread for a suggestion).
However, if you want to track hits on the social media buttons, things might start to get a little more complicated.
You'd need to first find the internal classes used by Juicebox for the social media buttons. (You can find them in your gallery's 'jbcore/classic/theme.css' file or by inspecting a gallery's web page with your browser's developer tools.)
You'd then need to add click handlers (via JavaScript) for each one you want to track.
When one of the social media buttons is clicked, you'd need to send an event hit to Google Analytics. Check out the Google Analytics Event Tracking help page.
If you want to know which image is being displayed when the social media button is clicked, you can fetch this information using the Juicebox-Pro API (specifically the getImageIndex() method) and you can then send this information to Google Analytics within the 'send' command (perhaps as the eventValue).
Something along the lines of the following might work. Please note that this has not been tested but I hope that it points you in the right direction. Also, please note that this is intended to track clicks on the gallery's social media buttons only. It will not determine whether or not the user goes ahead with the share (they could just cancel the popup window after clicking a social media button) and it will not track any of the user's social media data (for example where the shared link is located). Even if a particular social media platform allows a callback function to be included via their API (which could be used to confirm that a share has been completed), you would not be able to take advantage of this as the code that handles the API calls is buried deep within the 'juicebox.js' JavaScript file which is obfuscated and cannot be modified.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Google Analytics -->
<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: "juicebox-container",
shareFacebook: "TRUE",
shareTwitter: "TRUE",
shareGPlus: "TRUE",
sharePinterest: "TRUE",
shareTumblr: "TRUE"
});
jb.onInitComplete = function() {
$('.jb-bb-btn-facebook').click(function() {
var eventValue = jb.getImageIndex();
ga('send', 'event', 'Facebook', 'click', 'gallery', eventValue);
});
$('.jb-bb-btn-twitter').click(function() {
var eventValue = jb.getImageIndex();
ga('send', 'event', 'Twitter', 'click', 'gallery', eventValue);
});
$('.jb-bb-btn-gplus').click(function() {
var eventValue = jb.getImageIndex();
ga('send', 'event', 'Google+', 'click', 'gallery', eventValue);
});
$('.jb-bb-btn-printerest').click(function() {
var eventValue = jb.getImageIndex();
ga('send', 'event', 'Pinterest', 'click', 'gallery', eventValue);
});
$('.jb-bb-btn-tumblr').click(function() {
var eventValue = jb.getImageIndex();
ga('send', 'event', 'Tumblr', 'click', 'gallery', eventValue);
});
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.