CODEWITHSUNDEEP
javascriptjqueryscrollzooming
Knight1805
Knight1805

Reputation: 131

Change variable value on scroll - jQuery

I have this variable: coords.zoom. I'm using the value of coords.zoom to set the width and height of a zoomed image, thus giving me a magnification effect. And it works great!

My only problem is that I don't know how to increment (or decrement) the value of this variable, when the user scrolls over my image. I need to create some function that will change the value of this variable on user scroll, but actually nothing is scrolling up or down. I would also like this variable to always be between 1 and 3.

Any ideas?

Upvotes: 0

Views: 2302

Answers (2)

Knight1805
Knight1805

Reputation: 131

I've found a nice light solution to this problem. For anyone who needs this kind of mechanism, you've come to the right place.

Let's say you have a div with the ID of zoom. To increment (or decrement) the value of my coords.zoom variable paste this code between your body tags: 

<script>
   coords.zoom = 1.5 // set a start value to coords.zoom  
   $('.image').bind('mousewheel', function(e){
   if(e.originalEvent.wheelDelta > 0){ 

       coords.zoom = coords.zoom + 0.1;
       if (coords.zoom>3){coords.zoom = 3} // 3 is the max value of coords.zoom
       $("#zoom").text(coords.zoom);

   } else {

       coords.zoom = coords.zoom - 0.1;
       if (coords.zoom<1.2){coords.zoom = 1.2} // 1.2 is the min value of coords.zoom
       $("#zoom").text(coords.zoom);
    }
  });
</script>



There we go! Nice and efficient. Obviously, I've chose to increment the value by 0.1, but you can set it to any value in any range... Have a good day!

Upvotes: 1

Abhisek Malakar
Abhisek Malakar

Reputation: 899

It this code will execute when the document will be scrolled. And the code will execute in a proper manner with setTimeout.

            var scrltimeout = null;
            jQuery(document)
            .scroll(function(){
            clearTimeout(scrltimeout);
              scrltimeout = setTimeout(
            function(){
            alert('document scrolled');
            }, 300)

            });

Upvotes: 0

Related Questions