9 Replies Latest reply on Feb 14, 2013 3:38 AM by goldenReign

    Scrolling thumbnails

    goldenReign

      Has anyone created a scrolling 'image slider' (similar to the Grifform Kitchen Sinks example) that uses the mouse x pos to control the animation rather than invisible buttons that play(); or playReverse(); ? Or has anyone seen a tutorial that explains how to code it?

        • 1. Re: Scrolling thumbnails
          TimJaramillo Level 4

          Hi there, this thread may help you out:

           

          http://forums.adobe.com/message/5023518

           

          Here is an example:

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

           

          Source for the example:

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

          • 2. Re: Scrolling thumbnails
            goldenReign Level 1

            Hi,

            my first impression from your test is that it is exactly what I had in mind.

            Thank you so much. I'll confirm once I've updated my pages.

            • 3. Re: Scrolling thumbnails
              goldenReign Level 1

              Hi,

              I've now integrated your code in my markup and discovered just one issue before I can deploy it - the position of the scrolling thumbnails is set by the browser window and not by the stage or the parent div. Consequently, if your creative is centred, as it is on my website, some of the thumbnails are hidden off stage left and there is a gap right when scrolled fully to that side: http://www.jubbster.com/web/timjamarillo/test_centred.html I'm not a good enough coder to know whether it's the CSS that's responsible or the e.pageX property.

              Please can you help me out?

              • 4. Re: Scrolling thumbnails
                TimJaramillo Level 4

                Hi there, here is an example with the content centered.

                 

                Example:

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

                 

                Source:

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

                 

                In my test, I'm centering the Edge content inside of Edge with this line:

                $("#Stage").css("margin","auto");

                 

                Since we are positioning the slide content itself with css:left, we need to compensate for the centered parent. We can get that offset with this line:

                var slideOffset = $("#Stage").offset().left;

                 

                Then, when we position the slider, we simply subtract the "slideOffset" var from the "mouseX" positioning like this:

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

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

                 

                Hope this helps!

                • 5. Re: Scrolling thumbnails
                  goldenReign Level 1

                  Hi Tim,

                  thanks for your reply. I'm afraid it doesn't quite work - if you resize the browser window after the file has loaded then the problem returns. I suspect that when the margins change the position calculation has run and doesn't update (?). I would guess that a CSS solution based on fixed parameters will always fail in this way.

                  When I built this feature in Actionscript I used getBounds(_root) to set up the mouseslide function, has that method been deprecated in Edge? As it was independent of the Stage position it was always consistant.

                  Steve

                  • 6. Re: Scrolling thumbnails
                    TimJaramillo Level 4

                    Hi there, this is a super simple fix. Notice in my code how I was setting the "slideOffset" var only once, at the launch of the app? When you change your browser size, the $("#Stage").offset().left value changes. In order to make sure we always have the updated value, simply move this code inside the "moveSlide" function.

                     

                    I've updated my example and source links with this fix.

                     

                    So the code on Stage.compositionReady will now be this:

                     

                    // center Edge content

                    $("#Stage").css("margin","auto");

                     

                     

                    var slideOffset;//compensate for centering

                    var slidePosition;// holds position of image symbol

                    var mouseMin = 0;// minimum mouse stage position

                    var mouseMax = 800;// maximum mouse stage position

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

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

                     

                     

                    sym.moveSlide = function(mouseX){


                    slideOffset = $("#Stage").offset().left

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

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

                    }

                     

                     

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


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

                       return translatedVal;

                    }

                    1 person found this helpful
                    • 7. Re: Scrolling thumbnails
                      goldenReign Level 1

                      Cool, I'll amend my project in the morning - it's 8pm in UK (if you're on a beach in California Tim). My code sits two levels down in my project but it should be OK.

                      Steve

                      • 8. Re: Scrolling thumbnails
                        TimJaramillo Level 4

                        Cool, good luck with it! And I wish I was at the beach right now, hehe! I'm actually in Los Angeles, about 30 minutes from the nearest beach.

                        • 9. Re: Scrolling thumbnails
                          goldenReign Level 1

                          Yes, that fixed it Tim. It's seamless too - I was half expecting to see the thumbnails re-adjust as the page was resized.

                          Many thanks,

                          Steve