For a recent project I was required to create a scrollable map that also acted as a slideshow of content. I was pointed in the direction of an online script called dragdealer.js. On first view this seemed to have all the features I needed and would be easily customizable to the design I was working from.

So I started editing the markup to create my 3x4 grid but immediately hit a problem with my slides not scrolling to the coordinates I had set. With little explanation to the script online I eventually realized that I would need a grid of equal slides horizontally and vertically, so I reworked my coordinates. The drawback of this was I would have to use extra markup to create these empty slides.

So my code then looked like this; with steps being the number of slides horizontally/vertically.

var canvasMask = new Dragdealer('canvas', { x: 1, y: 0, vertical: true, steps: 5, loose: true });

var slideCoordinates = [[1, 0], [2, 0], [3, 0], [1, 1], [2, 1], [3, 1], [1, 2], [2, 2], [3, 3], [1, 3]];

However at this point my dragging functionality still wasn’t working correctly. After a lot of trial and error I worked out this formula.

x = x / (steps -1) & y = y /( steps-1)

So..

var canvasMask = new Dragdealer('canvas', { x: 0.25, y: 0, vertical: true, steps: 5, loose: true });

var slideCoordinates = [[0.25, 0], [0.5, 0], [0.75, 0], [0.25, 0.25], [0.5, 0.25], [0.75, 0.25], [0.25, 0.5], [0.5, 0.5], [0.75, 0.5], [0.25, 0.75]];

Take a look at my demo