Topic: Flickr gallery with Juicebox

I switched to flickr because Picasa web didn't work anymore with Juicebox plugin (Wordpress).
Now I have a question about the use of flickr and the juicebox button to open a picture in a separate window to print the picture.
When I use a flickr album, the picture doesn't open in a separate window, but opens in flickr.
Is there a way to avoid this?
Thanks for your advise!
Best regards,
Mark

Re: Flickr gallery with Juicebox

I switched to flickr because Picasa web didn't work anymore with Juicebox plugin (Wordpress).

Unfortunately, Google (who acquired Picasa) do not seem to allow access to new Google Photo Albums via the Picasa Web API although existing albums created prior to the acquisition can still be displayed via WP-Juicebox (as long as they have not been modified recently).

When I use a flickr album, the picture doesn't open in a separate window, but opens in flickr.

This is by design. When the 'Open Image' button is clicked for a Flickr gallery, the image's Flickr page is opened.
There is no way to change this behavior using any available configuration options. The code which handles this is buried deep within the 'juicebox.js' file which is obfuscated and cannot be modified.

All I can suggest at the moment is to perhaps suggest this alternative action for the 'Open Image' button in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
I do not know the likelihood of any suggestions being implemented but this is certainly the best place for all ideas.
Thank you.

Re: Flickr gallery with Juicebox

Thanks.
I understand.
I'll post my suggestion in tge Feature requests forum.
Regards,
Mark

Re: Flickr gallery with Juicebox

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).

Re: Flickr gallery with Juicebox

Thanks for the information.
Last question:
Where should I put the code from the first block?

<!--START JUICEBOX EMBED-->
...
<!--END JUICEBOX EMBED-->

Re: Flickr gallery with Juicebox

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.