You are not logged in. Please login or register.
Juicebox Support Forum → Posts by Steven @ Juicebox
Try this 'wp-juicebox.php' file.
It should hopefully work fine as a replacement for the 'wp-juicebox.php' file from the current version of WP-Juicebox (v1.5.0).
However, please remember that this is not an official solution and you should use the file at your own risk. The code was provided by a member of the forum community and it has not been extensively tested with v1.5.0.
... (maybe incorrectly)...
No. You're absolutely right. You're likely to have far less problems upgrading if you stick to the available configuration options and supported features.
Tweaking functionality via internal CSS classes (ie. unsupported modifications) is all well and good if you just have a single stand-alone gallery which you don't plan to upgrade frequently (or at all) but if you have multiple galleries throughout your site and CSS class names change between Juicebox versions (which is unlikely but could happen), then you might find you have quite a task on your hands getting everything back up and running again.
It's usually wise to stick to the safest (and often easiest) solutions, even if it means compromising a little.
You could try something like the following:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '100%',
backgroundColor: '#222222',
backButtonPosition: 'TOP',
backButtonText: '',
backButtonURL: 'http://www.example.com/index.html',
useFullscreenExpand: 'TRUE'
});
jb.onInitComplete = function() {
var filename = (window.devicePixelRatio >= 2) ? 'large.jpg' : 'small.jpg';
$('.jb-go-back-text').html('<img src="' + filename + '" width="100" height="75" />');
};
jb.onExpand = function(expanded) {
if (expanded) {
window.setTimeout(function() {
var filename = (window.devicePixelRatio >= 2) ? 'large.jpg' : 'small.jpg';
$('.jb-go-back-text').html('<img src="' + filename + '" width="100" height="75" />');
}, 500);
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->The new part is the jb.onExpand code. You could restructure the code to make it more efficient and avoid duplication but I've just left it as it is (with the new code being just a separate addition to the code from my post above) so that's it's easy to follow.
Unfortunately, a short delay is required to ensure that the Back Button is present in the DOM (Document Object Model) before actions are performed on the CSS class after the gallery has been expanded.
The code is starting to get a little messy. This is one of the drawbacks of trying to do something with Juicebox that it was not designed to do. You tend to run into unforeseen problems and have to deal with them as your encounter them.
... is to return to the slightly less efficient method of loading a hi-res logo regardless.
I would probably be inclined to do this myself. For the sake of a handful of kilobytes, the code would be cleaner and it should work in all scenarios without any further tweaking.
Just use a backButtonText entry such as the following (making sure that the display width and height are both half the actual dimensions of the image).
backButtonText="<img src="http://www.tonyhallphoto.com/jbresources/logo-backbutton-200x50.png" style="width: 100px; height: 25px; margin-top:-5px;" />"... on non-Mac devices, which I believe isn't currently supported in Juicebox-Pro v1.5.
In a Multi-Size Image gallery, 'Large' images are not currently displayed in high pixel density Windows desktop monitors but this has been logged as a bug and should hopefully be fixed in the next version of Juicebox.
@bherman
Thanks for the tip.
For anyone with Adobe Photoshop, the 'Image Processor' can be found in the 'File -> Scripts' menu.
Here's Adobe's 'Process a batch of files' support page: https://helpx.adobe.com/photoshop/using … files.html
I download juicebox_pro_1.5.0 then I installed juiceboxbuilder-Pro.air but the new version was sent inside my Lightroom 6.0 !
Running the 'JuiceboxBuilder-Pro.air' installation file cannot (and will not) install the Lightroom plugin.
The two are completely unrelated (as far as installation code goes).
Please try again. Afterwards, you can check your version of JuiceboxBuilder-Pro from 'Help -> About JuiceboxBuilder-Pro...' from the drop-down menu at the top.
To upgrade JuiceboxBuilder-Pro, run the 'JuiceboxBuilder-Pro.air' installation file (from inside the Juicebox-Pro v1.5.0 zip package): juicebox_pro_1.5.0/JuiceboxBuilder-Pro.air
If you are having problems installing JuiceboxBuilder-Pro, try uninstalling your older version (v1.4.1) first.
For reference, the JuiceboxBuilder-Pro User Guide can be found here.
For anyone interested, instructions for installing the Lightroom plugin can be found on the plugin's support page.
It's not really a problem, but I don't know how to get the lines <!--START & END JUICEBOX EMBED--> to insert my gallery inside the page of my Website !
If using the Lightroom plugin to create a gallery that you want to embed, you can grab the necessary embedding code from the gallery's 'index.html' file (which you can open in a plain text editor to view its contents).
Otherwise, you can just use the generic embedding code found in the Embedding Guide and just change the gallery dimensions and background color as necessary.
I hope this helps.
The icons in a Juicebox gallery are characters in a custom font named 'juicebox'.
The 'juicebox' font that the gallery uses is being overridden by the following CSS code on your web page:
.arrondi.ombre table tr td div div {
font-family: Verdana, Geneva, sans-serif;
}The gallery's location in your web page matches the selectors in the CSS above and the gallery is, therefore, inheriting this code.
Maybe the easiest way to protect against this would be to open your gallery's 'jbcore/classic/theme.css' file in a plain text editor, scroll down to line 31 and change:
font-family: 'juicebox';... to:
font-family: 'juicebox' !important;Otherwise, you could use further CSS selectors to target only those elements on your web page which require your custom font (although the suggestion above should work and is easier to implement).
Incidentally, I notice that your gallery currently uses Juicebox-Pro v1.4.1. (the line number above refers to this version).
You might like to upgrade to the current version (v1.5.0) as many bugs have been fixed (and new features added) since v1.4.1.
Please see the Version History for a list of changes between versions.
Full details on how to download the latest version and how to upgrade existing galleries can be found on the Upgrading Juicebox support page.
To upgrade your gallery, all you would need to do is replace your gallery's 'jbcore' folder with the 'jbcore' folder from the Juicebox-Pro v1.5.0 zip package ('juicebox_pro_1.5.0/web/jbcore/').
If you want to make the adjustment above to v1.5.0, then the line to change in the 'jbcore/classic/theme.css' file is line 18.
Also, I notice that your web page contains HTML errors.
For example, your web page has two closing </head> tags and two opening <body> tags.
You can check the code on your web page with the W3C Markup Validation Service and fix the errors reported.
Once the code on your webpage validates correctly, your web page should be rendered with greater predictability and consistency across different browsers.
I'm not sure it would be wise to change the default image size for Picasa Web Album galleries.
If this setting was changed from 1600 to 1920, then this would affect all existing WP-Juicebox galleries using a Picasa Web Album as a source of images.
Other users may not want their existing galleries to be changed (to load larger images) by simply upgrading the WP-Juicebox plugin.
Also, Google seems to be slowing discontinuing support for the Picasa Web API. Existing galleries (created prior to Google acquiring Picasa) still display fine but new galleries (created or modified since the acquisition) can no longer be accessed via the API.
Therefore, I think it is unlikely that any new features will be added to WP-Juicebox with regard to the Picasa Web Album functionality.
However, changing the default image size is a quick and easy task (changing a single number in one file) for anyone who wants to do so.
Having said that, please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all ideas together and ensures that they are not overlooked by the developers.
Thank you.
Do I need a new licence or can I move it over...
There is no need to purchase Juicebox-Pro again. You can download a fresh copy of Juicebox-Pro and use it on your new computer.
Incidentally, you can install JuiceboxBuilder-Pro on up to 3 computers, as noted in this FAQ.
You can download the latest version of Juicebox-Pro (v1.5.0) using the link from your purchase email.
The link always points towards the latest version of Juicebox-Pro rather than the version you purchased (within the same major version number).
Please see the 'Upgrading Juicebox' support page for more information.
If you no longer have access to your purchase email (for example if your email was stored on your computer rather than a web server), then please fill in the 'Download Link Request Form' and the admin team will send you a new link.
Just fill in the form to the best of your ability (with an approximate purchase date if you cannot remember the exact date) and use the 'Additional Information' box at the foot of the form to add any notes which might help the admin team find your transaction details.
Thank you.
On computer, can i add an ‘home icon’ next to the link ‘return jori’ or replace this with only icon ?
All icons in a Juicebox gallery (including the Back Button icon) are characters in a custom font (named 'juicebox'). (Please see the Using Custom Icons support section for more information.)
If you'd like to use the character that Juicebox uses for the Back Button to replace your "return jori" text, try replacing:
$('body').append('<div id="custom"><a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a></div>');... with:
$('body').append('<div id="custom"><a href="../../testouille/clickautotest/clickautotest-2.html" style="color: #ffffff; font-family: juicebox; font-size: 20px; height: 30px; width: 40px; text-decoration: none;"></a></div>');You can style the icon further with more CSS rules if you want to try to exactly replicate Juicebox-Pro's own Back Button.
You can check the default styling of Juicebox buttons in the 'jbcore/classic/theme.css' file and by inspecting the Back Button element in your browser's developer tools.
You can download a fresh copy of Juicebox-Pro using the link from your purchase email.
The link always points towards the latest version (currently v1.5.0) rather than the version you purchased.
You'll find the JuiceboxBuilder-Pro installation file inside the Juicebox-Pro zip package ('juicebox_pro_1.5.0/JuiceboxBuilder-Pro.air').
Full instructions for downloading the latest version can be found on the Upgrading Juicebox support page.
With regard to your problem, it would certainly be worthwhile trying a complete uninstall and reinstall of both JuiceboxBuilder-Pro and Adobe AIR. There are no known incompatibilities between JuiceboxBuilder-Pro, Adobe AIR and Windows 10 and I have not encountered such a problem myself (on a Windows 10 PC) but starting afresh might help.
You can download the latest version of Adobe AIR (currently v23.0) from this web page.
Please try the following procedure:
(1) Uninstall JuiceboxBuilder-Pro using the uninstaller in the 'Control Panel -> Programs -> Uninstall a program...' list.
(2) After uninstalling JuiceboxBuilder-Pro, please check that there are no files are left behind by manually deleting the following folders from your hard drive (if they exist):
C:\Program Files (x86)\JuiceboxBuilder-Pro
C:\Users\your_username\AppData\Roaming\Adobe\AIR\ELS\JuiceboxBuilder-Pro
C:\Users\your_username\AppData\Roaming\JuiceboxBuilder-Pro
C:\Users\your_username\My Documents\JuiceboxBuilder-Pro
You may need to show hidden files to find some of the above locations in Windows Explorer: http://windows.microsoft.com/en-us/wind … dden-files
(3) Uninstall Adobe AIR using the uninstaller in the 'Control Panel -> Programs -> Uninstall a program...' list.
(4) Reinstall Adobe AIR by right clicking the 'AdobeAIRInstaller.exe' installation file and selecting 'Run as administrator'.
(5) Reinstall JuiceboxBuilder-Pro following the instructions here.
Hopefully this will help.
If you continue to experience difficulties, then see if the problem occurs when trying to open the sample 'web' gallery from the Juicebox-Pro v1.5.0 zip package ('juicebox_pro_1.5.0/web/'). If you can open the sample 'web' gallery but not your own galleries, then the problem might somehow be unique to your own galleries. If this is the case, then perhaps you could zip a gallery, upload it somewhere and provide a download link so that I can try to replicate the problem myself and investigate further.
Also, checking the system logs in the Windows Event Viewer might shed some further light on the problem as to why your system is hanging when trying to open a gallery.
... the only way that works is the first part your solution 3
I cannot explain why dynamically adding a link to one container on your page works fine whereas using the same technique to add exactly the same HTML link code to a different container on the same page fails.
1- the backButton / backButtonText be invisible on computers, and be visible on the iphone & tablet.
2- the link#2 be visible on computers and be invisible on tablet and iPhone.
You can use the Juicebox-Pro API method getScreenMode() to determine the Screen Mode being used (SMALL vs LARGE) and then run custom JavaScript code accordingly. This example removes the Back Button from the DOM in Large Screen Mode and adds a custom link which is overlaid on top of the gallery where the Back Button would normally be.
In Small Screen Mode, no custom JavaScript code is run and the gallery's own Back Button will display as normal.
<!DOCTYPE html>
<html lang="en">
<head>
<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;
position: relative;
}
#custom {
position: absolute;
top: 20px;
left: 20px;
z-index: 9999;
}
#custom a {
color: #ffffff;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '600px',
backgroundColor: '#222222',
galleryTitleHAlign: 'CENTER',
backButtonPosition: 'OVERLAY',
backButtonUrl: '../../testouille/clickautotest/clickautotest-2.html',
backButtonUseIcon: 'TRUE',
showSmallBackButton: 'TRUE'
});
jb.onInitComplete = function() {
var mode = jb.getScreenMode();
if (mode == 'LARGE') {
$('.jb-go-back').remove();
$('body').append('<div id="custom"><a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a></div>');
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>If this does not work, then to do just what you have suggested in your points #1 and #2 above (no more, no less), then try the following:
<!DOCTYPE html>
<html lang="en">
<head>
<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',
galleryWidth: '100%',
galleryHeight: '600px',
backgroundColor: '#222222',
galleryTitleHAlign: 'CENTER',
backButtonPosition: 'OVERLAY',
backButtonUrl: '../../testouille/clickautotest/clickautotest-2.html',
backButtonUseIcon: 'TRUE',
showSmallBackButton: 'TRUE'
});
jb.onInitComplete = function() {
var mode = jb.getScreenMode();
if (mode == 'LARGE') {
$('.jb-go-back').remove();
$('body').prepend('<a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a>');
}
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>I hope this helps.
Juicebox-Pro (and WP-Juicebox) can display images returned by the Flickr API using these Flickr Options.
You would need to specify a Flickr User Name, Flickr User Id, Flickr Set Id or Flickr Group Id (filtering images if necessary with Flickr Tags).
I do not think that there is any way to directly fetch only shared images via the Flickr API. I do not see any mention of the term 'share' on the Flickr API overview page: https://www.flickr.com/services/api/
If all the shared images are in the same Flickr account, then you could tag your shared images with the keyword 'shared' and set flickrTags="shared" (along with your flickrUserName or flickrUserId).
You're welcome.
I'm glad you're able to workaround this issue and I appreciate you posting the suggestion (for JuiceboxBuilder-Pro to retain metadata when resizing images) in the Feature Requests thread. As I've said, I do not know if this is possible (and if it is, how difficult it would be to achieve), but at least it has been noted in the correct place.
Thank you.
Thank you for the additional information.
The problem seems to be a combination of:
(1) An Edge Animate animation
(2) Safari 10 on Mac
(3) The Back Button within Juicebox-Pro
Unfortunately, I am unable to replicate the problem so you may need to try a few things for yourself to see if they work or make a difference.
Essentially, the Back Button just opens a specified page in the user's browser and I'm really not sure how the link itself could affect the content of the page that it links to. It looks like some kind of incompatibility between Edge Animate and Safari 10 on Mac (especially as the phenomenon has not been seen in any other browser). It is a mystery why your Edge Animate page works when opened from your own manual <a> hyperlink but not from the Back Button link in your Juicebox-Pro gallery.
However, here are a few things to check and try:
(1) Try using text instead of the icon for the Back Button to see if this makes a difference.
Set backButtonUseIcon="FALSE" and backButtonText="return jori".
(2) Try using an absolute URL instead of a relative path for your backButtonURL.
Set backButtonUrl="http://www.henricanu.com/testouille/clickautotest/clickautotest-2.html".
(3) Try taking Juicebox-Pro out of the equation and see if the same problem occurs with a dynamically generated link outside of Juicebox-Pro.
Just before the closing </body> tag on your gallery's 'index.html' page, add the following code which will add a dynamic link (like Juicebox-Pro does for the Back Button).
<script type="text/javascript">
$(document).ready(function() {
$('body').prepend('<a href="../../testouille/clickautotest/clickautotest-2.html">Link #2</a>');
});
</script>In this case, the text for the link will be "Link #2" and the link will appear above your own test link. It will still link to your Edge Animate page. Please try this and see what happens.
If this works, then you could try overriding Juicebox-Pro's own handling of the Back Button.
Try something like this:
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
galleryWidth: '100%',
galleryHeight: '600px',
backgroundColor: '#222222',
backButtonPosition: 'OVERLAY',
backButtonUseIcon: 'FALSE',
});
jb.onInitComplete = function() {
$('.jb-go-back').html('<a href="../../testouille/clickautotest/clickautotest-2.html">return jori</a>');
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->This uses the Juicebox-Pro API (specifically the onInitComplete event) to ensure that the Back Button is present in the DOM (Document Object Model) before any actions are performed on it. The code then replaces Juicebox-Pro's own Back Button link code with your own.
If this works, you can then style your custom Back Button with CSS if you like.
(4) You might also like to try giving your Edge Animate container focus as soon as the page is loaded.
Try adding the following code just before the closing </body> tag on your Edge Animate page:
<script type="text/javascript">
window.onload = function() {
document.getElementById('EdgeID').focus();
};
</script>If you continue to experience difficulties, then you might like to try posting in Adobe's Edge Animate forum to see if any other users have experienced similar issues (Edge Animate animation requiring a click on the page in Safari 10 on Mac when taken to an Edge Animate page via a link).
I hope that these suggestions help or at least point you in the right direction.
... if I 'save' the gallery, then all the images are deleted from the Small and Large folders.
Sorry. I should maybe have been more specific with my instructions.
(1) Create a Multi-Size Image gallery with JuiceboxBuilder-Pro (by selecting 'Resize Images' and allowing the application to create small and large images) so that smallImageURL and largeImageURL entries are included in the gallery's 'config.xml' file and 'small' and 'large' subfolders are included in the gallery's 'images' folder.
(2) Create three sets of images yourself in an imaging program (such as Photoshop) and replace the medium images in the gallery's 'images/' folder, the small images in the gallery's 'images/small/' subfolder and the large images in the 'images/large/' subfolder.
(3) Do not edit the gallery in JuiceboxBuilder-Pro after doing this. If you re-save the gallery with 'Resize Images' deselected, the smallImageURL and largeImageURL entries will be removed from the gallery's 'config.xml' file and the small and large images will be deleted from the 'images/small/' and 'images/large/' subfolders.
... are you certain that the gallery will actually *use/deliver* the small and large images when being used by the appropriate devices?
As long as there are smallImageUrl and largeImageUrl entries with valid paths pointing towards corresponding images (which, by default, will be in the 'images/small/' and 'images/large/' subfolders), then Juicebox-Pro will use the appropriate images (depending on the device, screen size, pixel density, etc.) when the gallery is displayed.
The key is to not re-save your gallery in JuiceboxBuilder-Pro with 'Resize Images' deselected after creating a Multi-Size Image gallery and swapping out your images.
I'm not sure if you are using WP-Juicebox (the Juicebox plugin for WordPress) or trying to embed your gallery manually.
If you are using WP-Juicebox and find that the pop-up window does not display the gallery settings when you click the 'Add Juicebox Gallery' button, then please see this forum thread for suggestions.
If you are trying to embed your gallery manually, then I would recommend using the baseUrl method documented here.
Essentially, once you have created your gallery with Lightroom, you would upload the complete gallery folder (not just the contents) to your web server and paste the baseUrl embedding code into the body of your WordPress page or post (ensuring that the method of entry is 'Text' rather than 'Visual'). It does not matter where on your web server you upload your gallery folder to as long as the two paths in the embedding code (the path to the 'juicebox.js' file and the baseUrl itself, pointing towards the gallery folder) are correct.
For example, if your gallery folder is named 'my_gallery_folder' and you upload it to the root directory of your web space, then you could use the following embedding code. The leading slashes in the paths denote your root directory so this code will work in any web page throughout your site without modification (although you can change the gallery dimensions and background color if you like).
<!--START JUICEBOX EMBED-->
<script src="/my_gallery_folder/jbcore/juicebox.js"></script>
<script>
new juicebox({
baseUrl: "/my_gallery_folder/",
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: "600",
backgroundColor: "#222222"
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->If you have trouble with WordPress adding <br> and <p> tags throughout the code, install the Raw HTML plugin and wrap the code in [raw] ... [/raw] tags.
I hope these notes help.
However, if you continue to experience difficulties, please post back with a link to your gallery's web page so that I can see the problem for myself and hopefully help further.
... when I de-select the 'Resize Images' checkbox, JBx no longer allows me to have large, medium and small images.
The only way for JuiceboxBuilder-Pro to create different sizes of images is to resize the source images. As soon as you deselect 'Resize Images', your source images will not be resized at all and your gallery will use just the source images.
Is there any way of having Juicebox Builder Pro, NOT resize AND allow for 3 sizes? (Unfortunately, I don't use Lr).
No. Unfortunately not.
If you want to have a Multi-Size Image gallery but do not want your images to be resized by JuiceboxBuilder-Pro, then you'll need to:
(1) Create a Multi-Size Image gallery with JuiceboxBuilder-Pro (so that smallImageURL and largeImageURL entries are included in the gallery's 'config.xml' file).
(2) Create three sets of images yourself in an imaging program (such as Photoshop) and replace the images in the gallery's 'images' folder.
I have tested your setup in Chrome 54, Edge, Firefox 49.0.1, Internet Explorer 11 and Opera 40 on my PC.
Every time I single-slick your gallery's Back Button, the animation on your Edge Animate page is active without having to click anywhere on the page. It works in all browsers for me.
The Back Button is essentially just an <a> tag (like your manual link) which is generated dynamically by the 'juicebox.js' file when the gallery is displayed (although this should make no difference).
Maybe some additional information would help to track down the cause of the problem.
What version of Safari do you use?
Do you have any browser extensions installed? If so, try temporarily disabling them to see if this helps.
Try completely clearing your browser's cache before reloading your website to see if this makes a difference.
Also, try other browsers to see if the problem is unique to Safari.
Hyperlinks operate with a single-click and, as far as I'm aware, there is no way to simulate a double-click on the Back Button when a user single-clicks it.
You're welcome!
I'm glad my suggestion worked for you. Thanks for letting me know.
On my iPhone, screen touches anywhere hides Title, Caption (including my button) and Button Bar, so a touch on the button never registers on a phone.
Tapping the screen on an iPhone toggles the overlay on and off by default (you can override this behavior by setting showInfoButton="TRUE") but tapping a button on the Button Bar should certainly still work. If you have a gallery where this does not work, please post a link so that I can investigate further. (I have just viewed the gallery whose link you posted and the Button Bar buttons seem to function fine on my own iOS device.) Also, check to see if you have any custom CSS which might be overriding the gallery's own CSS.
Is there a way to get my useful button to register presses on an iPhone?
Instead of using a <form> tag, try using a regular <a> tag instead. You can then style the content of the tag using CSS.
This should hopefully work. (The <a> tag link in the first image in this demo gallery works on my iPod Touch.)
If you are using WP-Juicebox (the Juicebox plugin for WordPress), then you don't need to worry about the regular embedding code. The plugin handles this for you. After adding a Juicebox gallery to your page or post using the plugin, all you will see in the editor is a Juicebox shortcode such as:
[juicebox gallery_id="7"]All you then need to do is make your that the editor is in 'Text' mode (rather than 'Visual' mode) and add the following code directly below the Juicebox shortcode (replacing the five instances of [gallery_id] with the actual gallery id as necessary).
<script type="text/javascript">
jb_[gallery_id].onInitComplete = function() {
jQuery('#juicebox-container-[gallery_id] .jb-bb-btn-open-url').off('click');
jQuery('#juicebox-container-[gallery_id] .jb-bb-btn-open-url').click(function() {
var index = jb_[gallery_id].getImageIndex() - 1;
var element = '#juicebox-container-[gallery_id] .jb-dt-main-image-' + index;
var src = jQuery(element).find('img').first().attr('src');
window.open(src, '_blank');
});
};
</script>If you are not using WP-Juicebox and, instead, are manually embedding your Juicebox gallery into your WordPress page or post, then I would recommend using the baseUrl method documented here.
As an example, you could name a gallery folder 'your_gallery_folder', upload it to your web space's root directory and paste the following code into the WordPress editor (in 'Text' mode).
<script src="/your_gallery_folder/jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
baseUrl: "/your_gallery_folder/",
containerId: "juicebox-container",
galleryWidth: "100%",
galleryHeight: '600px",
useFlickr: "TRUE",
flickrUserName: "your_flickr_username"
});
jb.onInitComplete = function() {
jQuery('#juicebox-container .jb-bb-btn-open-url').off('click');
jQuery('#juicebox-container .jb-bb-btn-open-url').click(function() {
var index = jb.getImageIndex() - 1;
var element = '#juicebox-container .jb-dt-main-image-' + index;
var src = jQuery(element).find('img').first().attr('src');
window.open(src, '_blank');
});
};
</script>
<div id="juicebox-container"></div>I hope this helps.
No problem.
I'm pretty sure Ryan should be able to help you out with the use of hook_juicebox_gallery_alter() over in the Srupal forum.
Sorry for the late reply. It looks like your query somehow slipped through the net.
WP-Juicebox (the Juicebox plugin for WordPress) embeds galleries in WordPress web pages using the regular embedding method documented here.
All that is loaded into the web page is the 'juicebox.js' file (and the 'theme.css' file dynamically afterwards).
All the CSS in the 'theme.css' file should target the gallery only. As far as I am aware, there are no CSS rules that should affect any other elements on your web page.
There may somehow be a JavaScript conflict but all it seems strange that the problem has happened only with your new theme.
It would certainly be worth making sure that you are using the latest versions of WordPress (v4.6.1) and WP-Juicebox (v1.5.0) (and WP DFP if you are using it) to see if this helps. You can download the latest version of WP-Juicebox from the plugin's support page here. Be sure to upgrade the plugin using your Juicebox-Pro v1.5.0 files. (You can download Juicebox-Pro v1.5.0 using the link from your purchase email. Full instructions can be found here.)
Try viewing your web page in different browsers (Chrome, Edge, Firefox, Internet Explorer, Opera, Safari) to see if the problem is unique to a certain browser. Also, if you have any browser extensions installed, try temporarily disabling them to see if this makes a difference.
I'm not sure it will help but this is the only forum thread I can find in the WP DFP support section which seems similar (if not identical) to your problem. I just thought I would point it out in case it helps.
WP DFP Loads Twice (Ads Flicker) - https://wordpress.org/support/topic/wp- … s-flicker/
Normally, to give each gallery a different audio track, you would just assign each gallery different audioUrlMp3 and audioUrlOgg values.
For reference, a list of all Audio Options can be found here.
Please also see the Adding Audio Support section.
The hook_juicebox_gallery_alter() method is unique to the Juicebox module for Drupal. It is not part of Juicebox itself.
The Juicebox module for Drupal is an unofficial plugin which was not written by ourselves and, as such, I am not familiar with hook_juicebox_gallery_alter().
I would recommend that you post your query in the Drupal forum where the author of the module should be able to help you further. (The module is well supported by its author over there.)
I realise that this may not directly answer your query but I hope it points you in the right direction.
Thank you for posting your idea in the Feature Requests thread.
I've found a workaround for this which you might like to try.
It's rather complex and involves overriding Juicebox-Pro's own click handler for the 'Open Image' button.
It uses the Juicebox-Pro API (specifically the onInitComplete event) to ensure that the 'Open Image' button is present in the DOM (Document Object Model) before any actions are performed on it.
It also uses JavaScript to extract the current image's URL (from a dynamically generated container with a specific CSS class name) before opening it in a new tab/window.
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: "juicebox-container",
useFlickr: "TRUE",
flickrUserName: "your_flickr_username"
});
jb.onInitComplete = function() {
$('#juicebox-container .jb-bb-btn-open-url').off('click');
$('#juicebox-container .jb-bb-btn-open-url').click(function() {
var index = jb.getImageIndex() - 1;
var element = '#juicebox-container .jb-dt-main-image-' + index;
var src = $(element).find('img').first().attr('src');
window.open(src, '_blank');
});
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->I hope this is a suitable workaround for you.
If you want to incorporate it into a WP-Juicebox gallery, then add the following code to the body of your WordPress page or post directly below your Juicebox gallery shortcode. (Make sure that your editor is in 'Text' mode rather than 'Visual' mode.)
<script type="text/javascript">
jb_[gallery_id].onInitComplete = function() {
jQuery('#juicebox-container-[gallery_id] .jb-bb-btn-open-url').off('click');
jQuery('#juicebox-container-[gallery_id] .jb-bb-btn-open-url').click(function() {
var index = jb_[gallery_id].getImageIndex() - 1;
var element = '#juicebox-container-[gallery_id] .jb-dt-main-image-' + index;
var src = jQuery(element).find('img').first().attr('src');
window.open(src, '_blank');
});
};
</script>Replace the five instances of [gallery_id] in the code above with the actual Gallery Id which you can find in the Juicebox gallery shortcode.
For example, if your Gallery Id is 7, then your code should look like this:
<script type="text/javascript">
jb_7.onInitComplete = function() {
jQuery('#juicebox-container-7 .jb-bb-btn-open-url').off('click');
jQuery('#juicebox-container-7 .jb-bb-btn-open-url').click(function() {
var index = jb_7.getImageIndex() - 1;
var element = '#juicebox-container-7 .jb-dt-main-image-' + index;
var src = jQuery(element).find('img').first().attr('src');
window.open(src, '_blank');
});
};
</script>If you have trouble with WordPress adding <br> and <p> tags throughout the code, install the Raw HTML plugin and wrap the code in [raw] ... [/raw] tags.
Please note that Juicebox-Pro was not designed with this functionality in mind (user overrides for Button Bar buttons) and whilst you are free to use such modifications, there are not officially supported (and you may run into unforeseen problems that might have to be tackled along the way).
Juicebox Support Forum → Posts by Steven @ Juicebox
Powered by PunBB, supported by Informer Technologies, Inc.