Skip to content

Instantly share code, notes, and snippets.

@NazarkinRoman
Created July 17, 2015 14:06
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save NazarkinRoman/4086b39dc6d02d25f459 to your computer and use it in GitHub Desktop.
Save NazarkinRoman/4086b39dc6d02d25f459 to your computer and use it in GitHub Desktop.
Improved version of Image Comparison Slider from CodyHouse http://codyhouse.co/gem/css-jquery-image-comparison-slider/
// improved drags function, replace it in your code
function drags(dragElement, resizeElement, container, labelContainer, labelResizeElement) {
var $ = jQuery;
dragElement.on('mousedown vmousedown', function (e) {
dragElement.addClass('cd-draggable');
resizeElement.addClass('cd-resizable');
var dragWidth = dragElement.outerWidth(),
xPosition = dragElement.offset().left + dragWidth - e.pageX,
containerOffset = container.offset().left,
containerWidth = container.outerWidth(),
minLeft = containerOffset + 10,
maxLeft = containerOffset + containerWidth - dragWidth - 10;
dragElement.parent().bind('mousemove.cd vmousemove.cd', function (e) {
var leftValue = e.pageX + xPosition - dragWidth;
// constrain the draggable element to move inside his container
if (leftValue < minLeft) {
leftValue = minLeft;
} else if (leftValue > maxLeft) {
leftValue = maxLeft;
}
var widthValue = (leftValue + dragWidth / 2 - containerOffset) * 100 / containerWidth + '%';
$('.cd-draggable', container).css('left', widthValue).one('mouseup vmouseup', function () {
$(this).removeClass('cd-draggable');
resizeElement.removeClass('cd-resizable');
});
$('.cd-resizable', container).css('width', widthValue);
updateLabel(labelResizeElement, resizeElement, 'left');
updateLabel(labelContainer, resizeElement, 'right');
}).one('mouseup vmouseup', function (e) {
dragElement.removeClass('cd-draggable');
resizeElement.removeClass('cd-resizable');
dragElement.parent().unbind('mousemove.cd vmousemove.cd');
});
e.preventDefault();
}).on('mouseup vmouseup', function (e) {
dragElement.removeClass('cd-draggable');
resizeElement.removeClass('cd-resizable');
});
}
@gfargo
Copy link

gfargo commented Nov 9, 2015

This is terrific 👍 thanks again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment