1 (edited by seb 2018-01-10 15:59:54)

Topic: Right Click

Hi,

Is there any way to allow "right click" on a gallery? It'd be good to be able to copy images and text from a gallery.

Cheers,

Seb

Re: Right Click

Unfortunately, there are no configuration options available to enable the right-click context menu within a Juicebox gallery.

However, it should be possible to copy text within a gallery by highlighting it and using the Ctrl+C keyboard shortcut for the 'copy' action.

Also, if you want to allow users to download images within a gallery, then you can either:
(1) Set showOpenButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) so that visitors can click the 'Open Image Button' on the gallery's Button Bar to open the currently displayed image in a new tab where it can easily be saved.
... or:
(2) Set showDownloadButton="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> Button Bar' section) so that visitors can click the 'Download Button' on the gallery's Button Bar to directly download the currently displayed image.
Please see this FAQ:
How do I allow or prevent users from saving gallery images?

Re: Right Click

Hi Steven,

Thanks for the reply - I though as much! Is there any JavaScript that can over-ride this? Just a thought!

The Ctrl+C keyboard shortcut only works in IE - not Edge or Chrome, but I will implement the showOpenButton feature.

Maybe a good fix for the next release would be to allow right click in the gallery area...

Cheers,

Seb

Re: Right Click

Is there any JavaScript that can over-ride this?

You could use JavaScript to enable right-clicking within a gallery but you'd likely find that it would not make downloading a gallery image any easier. Chances are you'd right-click on a gallery image but you'd actually be clicking on an invisible overlay (including gallery elements such as the hit areas for navigation) so you'd not see the 'Save Image As...' option.
You'd need to use the Juicebox-Pro API (specifically the onInitComplete event) to wait for Juicebox-Pro to disable the right-click functionality before re-enabling it.
Try the following:

<script type="text/javascript" src="jbcore/juicebox.js"></script>
<script type="text/javascript">
    var jb = new juicebox({
        containerId: "juicebox-container",
        galleryHeight: "400",
        galleryWidth: "600"
    });
    jb.onInitComplete = function() {
        var element = document.getElementById('juicebox-container');
        element.oncontextmenu = null;
    };
</script>
<div id="juicebox-container"></div>

Maybe a good fix for the next release would be to allow right click in the gallery area...

Please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers.
Thank you.

Re: Right Click

Thanks Steven,

I don't know if the code you've given me can be put into the galleries I've developed (with your help). An example of one is here:

http://www.tilesofstow.co.uk/decBirds&Flowers.asp

There are multiple galleries with JavaScript to call the galleries from different buttons on the page. Where would I put the code in this instance?

Cheers,

Seb

Re: Right Click

Try the following. Replace your current loadgallery() function with the following code. You can use your existing tracker variable to ensure that the right-click removal code is run just once (and not each time a new gallery is loaded).

function loadGallery(a, b, c, y, z) {
    var jb = new juicebox({
        backgroundColor: "rgba(255,255,255,1)",
        thumbShadowBlur: "rgba(255,255,255,1)",
        imageShadowColor: "rgba(255,255,255,1)",
        textShadowColor: "rgba(255,255,255,1)",
        captionBackTopColor: "rgba(0,0,0,0)",
        containerId: "juicebox-container",
        baseUrl: y,
        galleryHeight: z,
        maxThumbColumns: a,
        maxThumbRows: b,
        thumbsPosition: c
    });
    if (tracker === false) {            
        jb.onInitComplete = function() {
            var element = document.getElementById('juicebox-container');
            element.oncontextmenu = null;
        };
    }
    tracker = true;
}

This should work fine. (I tested it myself before posting.)

Re: Right Click

Thanks Steven,

It works but on the right click, although a local menu appears, it's not possible to copy an image and it's still not possible to highlight text outside of IE 11. Also when other galleries on the same page are selected, no right click is possible.

Is it possible to correct this?

Cheers,

Seb

Re: Right Click

It works but on the right-click, although a local menu appears, it's not possible to copy an image...

I thought this might be the case and mentioned it in a post above:

You could use JavaScript to enable right-clicking within a gallery but you'd likely find that it would not make downloading a gallery image any easier. Chances are you'd right-click on a gallery image but you'd actually be clicking on an invisible overlay (including gallery elements such as the hit areas for navigation) so you'd not see the 'Save Image As...' option.

There really is no way to allow right-clicking to save an image in a Juicebox gallery and, if you want to allow users to be able to download images from a Juicebox gallery, the best options would be to display the Open Image and/or Download Button on the gallery's Button Bar (via showOpenButton="TRUE" and/or showDownloadButton="TRUE").

... and it's still not possible to highlight text outside of IE 11.

Unfortunately, it looks like it's just not possible to copy text from within a Juicebox gallery (across all browsers) and there's no easy way around this.
If it is really important for visitors to your website to be able to copy and paste image titles and/or image captions, you could use the Juicebox-Pro API to fetch the image title and caption for the currently displayed image and use JavaScript to display the text elsewhere on the web page (in a separate <div> container outside the gallery) where it can be copied with ease.
Here's as example of how this can be achieved.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb = new juicebox({
                containerId: "juicebox-container",
                galleryHeight: "400",
                galleryWidth: "600"
            });
            jb.onImageChange = function(e) {
                var index = e.id;
                var info = jb.getImageInfo(index);
                var title = info.title;
                var caption = info.caption;
                $('#text').html('<p>Image Title: ' + title + '</p><p>Image Caption: ' + caption + '</p>');
            };
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
        <div id="text"></div>
    </body>
</html>

Also when other galleries on the same page are selected, no right-click is possible.

On your 'decBirds&Flowers.asp' page, when the page is initially loaded, I can right-click on your 'Birds & Flowers' gallery.
If I then switch galleries (to your 'Tiles on the Wall' gallery), the right-click functionality is still available.
It's only when I change pages (for example, to your 'decFarmyard.asp' page) that the right-click functionality disappears (and that's because the re-enabling code is not present in those other gallery pages).
If you find that switching galleries on the same page disables the right-click functionality, then try replacing the following code in your loadGallery(a, b, c, y, z) function:

if (tracker === false) {            
    jb.onInitComplete = function() {
        var element = document.getElementById('juicebox-container');
        element.oncontextmenu = null;
    };
}

... with this alternative (which should re-enable the right-click menu for all elements on the web page every time a gallery is selected):

jb.onInitComplete = function() {
    var elements = document.getElementsByTagName('*');
    for (var i = 0; i < elements.length; i++) {
        elements[i].oncontextmenu = null;
    }
};

Even though it's not possible to right-click and save an image or highlight and copy text from within a Juicebox gallery, I hope my suggestions and workarounds are useful (and thanks for posting your suggestions in the Feature Requests thread).

Re: Right Click

Thanks Steven,

This works really well. Tried it out on this page: http://www.tilesofstow.co.uk/decBirds&Flowers.asp

Now just got to put it into the rest of the site! Lots of find and replace....

Seb

Re: Right Click

This works really well.

That's great to hear! Thank you for letting me know.

Tried it out on this page:

Nicely done! I hope it doesn't take you too long to integrate it into the rest of your web pages.