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

Analyzing length of strings by dividing content within div tags using their unique ids

Secondary menu supersedes primary dropdown menu

Tips for implementing JQuery in a ReactJS Component

Create a div that pops up when clicked, just like the Fancybox jQuery feature

The error message displays "window.addEventListener is not a function", indicating that

Can divs be arranged in a similar fashion as images?

jQuery DataTables covering a CSS-anchored menu bar

CSS for Page Header with Scroll-Over Content

F# Using Ajax Post with JQuery

Exploring the Fusion of Different Styles in Material-UI Using React

Two separate ajax functions executed sequentially both yield identical results

Ways to Export HTML to Document without any borders or colorful text

Requests for JSONP from LinkedIn and StumbleUpon

What is the method for creating a checkbox in CSS that includes a minus symbol inside of it?

Dynamically modifying the styling of elements within an iframe

Fade in upcoming content over prevailing content utilizing jQuery

What are some effective methods for testing internet connectivity?

I am attempting to retrieve the value of a 'td' element using jQuery, but it consistently returns 'null'

resume the execution of PHP script after being called by Ajax

Storing ajax data into a variable seems to be a challenge for me