• Registered: 2016-12-09
  • Posts: 2

Topic: Enable Mouse Wheel [SOLVED]

Hi!

My name is Robert, I was using Simple Viever for a long time. A few days ago I started with Juicebox.
I can´t find the "enable mouse wheel" function.

Does this not exist anymore?

Thanks,
Robert

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Enable Mouse Wheel [SOLVED]

Unfortunately, Juicebox-Pro does not support mouse wheel scrolling.

Juicebox-Pro was written from the ground-up (and is not just SimpleViewer-Pro ported to HTML 5).
As such, the two applications do not feature exactly the same functionality and there are not always direct translations between SimpleViewer-Pro's configuration options and those of Juicebox-Pro.
Please see this SimpleViewer blog entry for more information on the differences between SimpleViewer and Juicebox.

You might like to post your idea 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.

Otherwise, you could perhaps implement mouse wheel functionality manually using JavaScript and the Juicebox-Pro API (to determine the current image, the total number of images in the gallery and to show the previous or next image in the gallery when the mouse wheel is scrolled).
To see this in action, create a sample gallery in JuiceboxBuilder-Pro and use the following HTML code as the gallery's 'index.html' file. If you want to be able to loop through the images (rather than stop at the first and last images), set var loop = true;.

<!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'
    });
    // Run following when gallery is ready
    jb.onInitComplete = function() {
        // Wheel handler function
        function wheelHandler(e) {
            var current = jb.getImageIndex(); // Get current image index number
            var loop = false; // Set to 'true' to loop through images with mouse wheel 
            if (e.deltaY > 0) { // If mouse wheel is scrolled down...
                if (current > 1) {
                    jb.showImage(current - 1); // Show previous image in gallery
                } else {
                    if (current === 1 && loop) {
                        jb.showImage(maximum); // Show last image if currently displaying first image and looping is enabled
                    }
                }
            }
            if (e.deltaY < 0) { // If mouse wheel is scrolled up...
                if (current < maximum) {
                    jb.showImage(current + 1); // Show next image in gallery
                } else {
                    if (current === maximum && loop) {
                        jb.showImage(1); // Show first image if currently displaying last image and looping is enabled
                    }
                }
            }
        }    
        var maximum = jb.getImageCount(); // Get total number of images in gallery
        document.getElementById('juicebox-container').addEventListener('wheel', wheelHandler); // Add 'wheel' event function
    };
    </script>
    <div id="juicebox-container"></div>
    <!--END JUICEBOX EMBED-->
</body>
</html>

I've tested this in Chrome, Edge and Firefox and it seems to work well.

3 Reply by rowin (edited by rowin 2016-12-14 17:56:07)

  • Registered: 2016-12-09
  • Posts: 2

Re: Enable Mouse Wheel [SOLVED]

Hi Steven,

thanks for this detailed answer!
But... at the moment I dont really know how to use this code - I have to read and find out and as soon as I Know, I will try using it.

[edit] wow, that was simple :-)

Thanks a lot for that great help,
Robert

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Enable Mouse Wheel [SOLVED]

[edit] wow, that was simple :-)

I'm glad you've got it working.

Thanks a lot for that great help,

You're welcome!