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.