34557

Jump to next & prev image (vertical scroll) with jQuery

Question:

I have a linear list of images (vertical) and I search to use the keyboard up & down to navigate to next or prev images. My problem is that I don't know where I'm on the scroll and where I need to scroll to go to the next or prev image.

I saw <a href="http://jsfiddle.net/JjhUN/5/" rel="nofollow">this example</a> but it's in horizontal. I tried to make it vertical, but without success…

I also tried some things with the inView jQuery plugin, without success too. Some start :

$("body:not(.photo) #images img").each(function() { $(this) .css({cursor: "pointer"}) .on("click", function() { var $n = $(this).next(), offset = ($n.length) ? $n.offset().top : 0; scrollTo(offset); }); }); // http://jsfiddle.net/JjhUN/5/ var elems = []; $("#images").children().each(function() { elems.push(this.offsetTop); }); console.log(elems);

Answer1:

I have played with that horizontal example, and change it to vertical. <a href="http://jsfiddle.net/6gCA6/1/" rel="nofollow">http://jsfiddle.net/6gCA6/1/</a>

I hope it was helpful.

<strong>JS</strong>

$(function() { var boxLefts = []; $('.box').each(function(i, el){ boxLefts.push(this.offsetTop); }); $(document).keydown(function(e) { var dir = false, targetUp = -1; switch (e.keyCode) { case 38: dir = -1; break; case 40: dir = 1; break; default: break; } if (dir) { e.preventDefault(); winUp = window.scrollY; $.each(boxLefts, function(i, v){ if ((dir == 1 && winUp < v && targetUp < 0) || (dir == -1 && winUp > v)) { targetUp = v; } }); if (targetUp >= 0) { $('html, body').animate({scrollTop: targetUp}, 1000); } } }); });

<strong>CSS</strong>

#wrapper { white-space: nowrap; width: 1500px; } .box { width: 200px; height: 200px; border: 1px solid red; margin: 0 10px 0 0; /*display: inline-block;*/ }

Recommend

  • Infinite Scroll Effect with javascript
  • Scroll Down [GeckoFx + Javascript]
  • Selenium python unable to scroll down
  • jQueryUI sortable and draggable target won't scroll horizontally for drop but will for sort
  • Query timeout expired in django-mssql when executing custom SQL directly
  • div fade-in when window is scrolled a certain distance from the top
  • How to define an array of floats in Shader properties?
  • Pre-populated SQLite Database not reading properly in Android Studio
  • A new chart every sheet
  • Converting query results into DataFrame in python
  • Possible to get mouse events fired when cursor is outside page?
  • Thread 1: EXC_BAD_ACCESS (code =1 address = 0x0)
  • Center align outputs in ipython notebook
  • Object and struct member access and address offset calculation
  • How to assign byte[] as a pointer in C#
  • Adjust width of select element according to selected option's width
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to add a column to a Pandas dataframe made of arrays of the n-preceding values of another column
  • Modifying destination and filename of gulp-svg-sprite
  • jquery mobile loadPage not working
  • Data Validation Drop Down Box Arrow Disappearing
  • retrieve vertices with no linked edge in arangodb
  • How to delete a row from a dynamic generate table using jquery?
  • Android Studio and gradle
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • using HTMLImports.whenReady not working in chrome
  • How do you join a server to an Active Directory (domain)?
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • Change div Background jquery
  • Authorize attributes not working in MVC 4
  • apache spark aggregate function using min value
  • EntityFramework adding new object to nested object collection
  • Binding checkboxes to object values in AngularJs
  • How can i traverse a binary tree from right to left in java?
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?