7 Replies Latest reply on Jan 25, 2013 2:27 PM by TimJaramillo

    Creating a left/right navigation by mousemove

    pmfr01 Level 2

      I have this row with lots of images (a sort of slideshow, but not quite) and I'd like to navigate through them just by moving the mouse either left or right. How can I do this? Something to do with the mousemove, I suppose...

      Thanx.

       

      pmfr

        • 1. Re: Creating a left/right navigation by mousemove
          TimJaramillo Level 4

          Hi pmfr01, there are several ways to do this- here is an outlined description of one way:

           

          On Stage.compositionReady, create a function called "moveSlide" to handle the slide movement. This function will be taking in a parameter called "mouseX", which you will pass in from the mousemove event below. This function will contain the logic for moving the slide, in relation to the user's mouse position. The specifics will change, depending on how you want the user interaction to go. (Do you want a direct 1 to 1 relationship between the user's mouse position and slide position- when user is all the way to the left, they will see first slide, all the way to right and they see last slide?). You can then set the css position of the slide, based on the user's mouse position.

           

          // code on Stage.compositionReady

          sym.moveSlide = function(mouseX){

               // need to add some logic here depending on how you want slide to move in relation to mouseX position

               // sym.$("mySlide").css({left:XXX});

          }

           

          On mousemove, call the "moveSlide" function, and pass in the user's mouse position via the e.pageX value of the mousemove event.

           

          // code on mousemove

          sym.getComposition().getStage().moveSlide( e.pageX );

           

          Good luck!

          • 2. Re: Creating a left/right navigation by mousemove
            pmfr01 Level 2

            Hi Tim.

            I should be more specific: I have a div (symbol) with 741x388px and, inside it, the row of images I want to slide through. So, how do I adapt your code?

             

            pmfr

            • 3. Re: Creating a left/right navigation by mousemove
              TimJaramillo Level 4

              Hey pmfr,

               

              Again, it depends on how you want the interaction to go down, but I added some psuedo code below for Stage.compositionReady. You may want to put all your images in the "mySlideSymbol" symbol, so you move just the 1 symbol. I've also included a +_getTranslation" function that will handle translating the user's mouse position in relation to the slide position. You will need to fill in all the "xxx" values with your relevant values. Let us know how it goes!

               

              var slidePosition;// holds position of image symbol

              var mouseMin = xxx;// minimum mouse stage position

              var mouseMax = xxx;// maximum mouse stage position

              var slideMin = xxx;// minimum (left) position of slide

              var slideMax = xxx;// maximum (right) position of slide

               

              sym.moveSlide = function(mouseX){

                   // need to add some logic here depending on how you want slide to move in relation to mouseX position

                  slidePosition = _getTranslation(mouseMin, mouseMax, slideMin, slideMax, mouseX);

                  sym.$("mySlideSymbol").css({left:slidePosition});

              }

               

              _getTranslation = function(minInput, maxInput, minOutput, maxOutput, inputNumber) {

                        var translatedVal = ((inputNumber - minInput) * (maxOutput - minOutput)/(maxInput - minInput) ) + minOutput;

                  return translatedVal;

              }

              • 4. Re: Creating a left/right navigation by mousemove
                pmfr01 Level 2

                ... I'm not getting it. Tim, could you please apply the code in my file? It's much easier for me to understand with the code in place.

                Edge files.

                Thanx.

                • 5. Re: Creating a left/right navigation by mousemove
                  TimJaramillo Level 4

                  Hi pmfr01, below is the code added to your file. I just copy and pasted the code I posted, to the Stage.compositionReady, and the Stage.mousemove events.

                   

                  example:

                  www.timjaramillo.com/code/edge/scroll_mousePosition/test.html

                   

                  source:

                  www.timjaramillo.com/code/edge/_source/scrolling_mousePosition.zip

                  1 person found this helpful
                  • 6. Re: Creating a left/right navigation by mousemove
                    pmfr01 Level 2

                    That's cool.

                    One question though, there're just 5 of them - how will the mouse behave with a hundred of them? In that case I'd need something like this (carousel type - horizontal) or this, without any buttons of course.

                    • 7. Re: Creating a left/right navigation by mousemove
                      TimJaramillo Level 4

                      Hi there,

                       

                      This goes back to the question I posed in my first post: how you envision the user interaction working. If you have 100 images, using a 1 to 1 ratio as in my example probably would not give an optimal user experience.

                       

                      It looks like the example you posted has pretty good examples- you could try using that library, or it wouldn't be too hard to roll your own by setting up a function to handle incrementing and decrementing x position based on mouse position.