Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Question

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Trying to create a customized PACS viewer for scrolling through a series of CT head images.

However, encountering an issue with scrolling through all 59 images. Currently, able to scroll from the first to the 59th image, but struggling to loop back to the beginning when keeping the left mouse button clicked and moving the mouse upwards.

When left-clicking and dragging down, it scrolls only from image 1 to 59, and does not return to the first image when left-clicking and moving up. Any suggestions?

Here is the jQuery code:

$(document).ready(function() {
    var lbDown = false;

    $("#imgs").mousedown(function(e) {
        if (e.which === 1) {
            lbDown = true;
        }
    });
    $("#imgs").mouseup(function(e) {
        if(e.which === 1) {
            lbDown = false;
        }
    });

    $("#imgs").mousemove(function(e) {
        if(lbDown) {
            e.preventDefault();
            $(this).find('img:visible').next().show();
        }
    });
});

A fiddle has been created as well:

http://jsfiddle.net/C4Y6H/

jquery css

Answer 1

Answer №1

Check out this jsBin demo

$(function() {
    var $imgs = $('#imgs'),       // Efficiently store elements in variables
        $img = $('img', $imgs),   
        lbDown = false,
        Y = 0,                    
        exY = 0;                  

    $imgs.on("mousedown mouseup",function(e) {
        if (e.which === 1) {
            e.preventDefault();
            lbDown = e.type=="mousedown";  
        }
    }).on("mousemove", function(e) {
        if(lbDown) {           
           e.preventDefault();
           Y = e.clientY;                             
           var $visible = $(this).find('img:visible'); 
           $img.not(":first").hide();                  
           $visible[Y>exY ? "next" : "prev"]().show(); 
           exY = Y;                                    
        }
    });
   // Consider adding the mouseleave event for better functionality.
});

The code needed to be updated to hide overlapping images for a smoother transition between them on mouse movement to the left.

Another approach involves using the .eq() method to calculate the image based on the difference between the current and initial mouse position.

(mousemoveCoordY - clickedInitiallyAtY) % numberOfImages

Try out the DEMO here

% operator can create an infinite loop, so faster mouse movements might skip frames*.

$(function() {
    var $imgs = $('#imgs'),
        $img = $('img', $imgs),
        n = $img.length,
        lbDown = false,
        Y = 0,
        clickedY = 0;

    $imgs.on("mousedown mouseup",function(e) {
        if (e.which === 1) {
            clickedY = e.clientY;
            e.preventDefault();
            lbDown = e.type=="mousedown";
        }
    }).on("mousemove", function(e) {
        if(lbDown) {           
            e.preventDefault();          
            $img.hide().eq((e.clientY-clickedY)%n).show();
        }
    });
    // Consider adding the mouseleave event for better functionality.
});

*Adjusting the math can control the speed of the transition:

 $img.hide().eq((((e.clientY-clickedY)*0.3)|0)%n).show();

Similar to this DEMO where (0.1 - 0.9) acts as a sensitivity multiplier.

Answer 2

Check out this jsBin demo

$(function() {
    var $imgs = $('#imgs'),       // Efficiently store elements in variables
        $img = $('img', $imgs),   
        lbDown = false,
        Y = 0,                    
        exY = 0;                  

    $imgs.on("mousedown mouseup",function(e) {
        if (e.which === 1) {
            e.preventDefault();
            lbDown = e.type=="mousedown";  
        }
    }).on("mousemove", function(e) {
        if(lbDown) {           
           e.preventDefault();
           Y = e.clientY;                             
           var $visible = $(this).find('img:visible'); 
           $img.not(":first").hide();                  
           $visible[Y>exY ? "next" : "prev"]().show(); 
           exY = Y;                                    
        }
    });
   // Consider adding the mouseleave event for better functionality.
});

The code needed to be updated to hide overlapping images for a smoother transition between them on mouse movement to the left.

Another approach involves using the .eq() method to calculate the image based on the difference between the current and initial mouse position.

(mousemoveCoordY - clickedInitiallyAtY) % numberOfImages

Try out the DEMO here

% operator can create an infinite loop, so faster mouse movements might skip frames*.

$(function() {
    var $imgs = $('#imgs'),
        $img = $('img', $imgs),
        n = $img.length,
        lbDown = false,
        Y = 0,
        clickedY = 0;

    $imgs.on("mousedown mouseup",function(e) {
        if (e.which === 1) {
            clickedY = e.clientY;
            e.preventDefault();
            lbDown = e.type=="mousedown";
        }
    }).on("mousemove", function(e) {
        if(lbDown) {           
            e.preventDefault();          
            $img.hide().eq((e.clientY-clickedY)%n).show();
        }
    });
    // Consider adding the mouseleave event for better functionality.
});

*Adjusting the math can control the speed of the transition:

 $img.hide().eq((((e.clientY-clickedY)*0.3)|0)%n).show();

Similar to this DEMO where (0.1 - 0.9) acts as a sensitivity multiplier.

Answer 3

Answer №2

With each movement, reveal the following image without hiding the previous ones. To reverse this process, consider determining a direction based on the Y-axis coordinates. If Y is greater than or less than half of the image's height, assign a direction of -1 or 1 respectively, then display the previous image instead of the next one.

Answer 4

With each movement, reveal the following image without hiding the previous ones. To reverse this process, consider determining a direction based on the Y-axis coordinates. If Y is greater than or less than half of the image's height, assign a direction of -1 or 1 respectively, then display the previous image instead of the next one.

Navigating through a Collection of Pictures using Mouse Movement and Left-click Button

Answer №1

Answer №2

Similar questions

jQuery prioritizes enforcing style over using a CSS file

Align a Bootstrap button to the bottom of a flex-box column

There seems to be an issue with the bootstrap datepicker as it is throwing an error stating that $(

revealing and concealing information using an accordion-style interface

Space between elements in a horizontal arrangement

Issue with fading in! The div should fade in only when it is no longer covering the element

The recent update to Bootstrap v5 caused a complete disruption in the CSS of our application

Ways to position cursor at the end in the Froala Editor

Switch between input and the input is not displayed inline

I'm encountering difficulties with customizing the root styling of material-ui's DialogActions

Vue: auto-suggest feature in a text input field

Having trouble with Javascript in getting one-page scroll navigation to work?

Modifying Bootstrap image dimensions

Eliminate the initial item in each list item

Ways to enhance HTML components within a div using jQuery

The page remains static even as the function is executed

Creating a button with a water-inspired design using CSS that works seamlessly across

Difficulty with navigation on Chrome for Android (also impacting Bootstrap's website and all other sites utilizing Bootstrap design)

Tips for overlapping children in a column flex direction while maintaining the parents' positioning

Achieving success by correctly reaching the window's edge during an event (onscroll)