CODEWITHSUNDEEP
jqueryhtmlcss
MukulAgr
MukulAgr

Reputation: 291

I want to scroll image vertically using mouse position

I have been trying to modify a code which scrolls the images horizontally. I want to scroll it vertically. I don't know JQuery at all. After trying for hours I couldn't find any way to sort this thing out. Can anyone help me out in this regard.

Heres the whole code.

$(function() {
  $(window).load(function() {
    var $gal = $("#propertyThumbnails"),
      galW = $gal.outerWidth(true),
      galSW = $gal[0].scrollWidth,
      wDiff = (galSW / galW) - 1, // widths difference ratio
      mPadd = 60, // Mousemove Padding
      damp = 20, // Mousemove response softness
      mX = 0, // Real mouse position
      mX2 = 0, // Modified mouse position
      posX = 0,
      mmAA = galW - (mPadd * 2), // The mousemove available area
      mmAAr = (galW / mmAA); // get available mousemove fidderence ratio
    $gal.mousemove(function(e) {
      mX = e.pageX - $(this).parent().offset().left - this.offsetLeft;
      mX2 = Math.min(Math.max(0, mX - mPadd), mmAA) * mmAAr;
    });
    setInterval(function() {
      posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"	
      $gal.scrollLeft(posX * wDiff);
    }, 10);
  });
});
#parent {
  position: relative;
  margin: 0 auto;
  width: 100%;
  background: #ddd;
}
#propertyThumbnails {
  position: relative;
  overflow: hidden;
  background: #444;
  width: 100%;
  white-space: nowrap;
}
#propertyThumbnails img {
  vertical-align: middle;
  display: inline;
  margin-left: -4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
  <div id="propertyThumbnails">
    <img src="http://placehold.it/1000x100" />
  </div>
</div>

Heres the demo:

http://jsbin.com/alokat/1/edit?html,css,js,output

I changed the script as

$(function(){

    $(window).load(function(){

        var $gal   = $("#propertyThumbnails"),
            galW   = $gal.outerHeight(true),
            galSW  = $gal[0].scrollHeight,
            wDiff  = (galSW/galW)-1,  // widths difference ratio
            mPadd  = 60,  // Mousemove Padding
            damp   = 20,  // Mousemove response softness
            mX     = 0,   // Real mouse position
            mX2    = 0,   // Modified mouse position
            posX   = 0,
            mmAA   = galW-(mPadd*2), // The mousemove available area
            mmAAr  = (galW/mmAA);    // get available mousemove fidderence ratio

        $gal.mousemove(function(e) {
            mX = e.pageY - $(this).parent().offset().top - this.offsetTop;
            mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
        });

        setInterval(function(){
            posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"    
            $gal.scrollTop(posX*wDiff);
        }, 10);

    });

});

Upvotes: 1

Views: 1844

Answers (2)

Can iSchool
Can iSchool

Reputation: 61

You need to define the direction of the scroll/overflow. Here is the change you need to make:

CSS

#propertyThumbnails {
    position: relative;
    overflow-y: scroll; // or just overflow:auto; should also work
    background: #444;
    width: 100%;
    white-space: nowrap;
}

Upvotes: 1

John Weisz
John Weisz

Reputation: 32032

You are pretty head-on with your JavaScript modifications, but you also need to alter the stylesheet a bit to accomodate the new behaviour:

CSS

#propertyThumbnails img {
    display: block;
    /* ... */
}

Working example on JSFiddle.

This little change will make the browser place the images below each other (block-level elements), instead of next to each other (inline elements).

Also of note the altered initialization in the JavaScript part.

Upvotes: 1

Related Questions