Read the story here: https://medium.com/jotform-form-builder/making-a-responsive-image-comparison-slider-in-css-and-javascript-f3a691a9dd71
Created
December 24, 2016 21:57
-
-
Save ValerieAnne563/d164bea3c6adf47e1a88a8f1c505dab0 to your computer and use it in GitHub Desktop.
Responsive Image Comparison Slider
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="ba-container"> | |
| <div class="ba-slider"> | |
| <img src="http://egegorgulu.com/assets/img/beforeafter/after.jpg" alt=""> | |
| <div class="resize"> | |
| <img src="http://egegorgulu.com/assets/img/beforeafter/before.jpg" alt=""> | |
| </div> | |
| <span class="handle"></span> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Call & init | |
| $(document).ready(function(){ | |
| $('.ba-slider').each(function(){ | |
| var cur = $(this); | |
| // Adjust the slider | |
| var width = cur.width()+'px'; | |
| cur.find('.resize img').css('width', width); | |
| // Bind dragging events | |
| drags(cur.find('.handle'), cur.find('.resize'), cur); | |
| }); | |
| }); | |
| // Update sliders on resize. | |
| // Because we all do this: i.imgur.com/YkbaV.gif | |
| $(window).resize(function(){ | |
| $('.ba-slider').each(function(){ | |
| var cur = $(this); | |
| var width = cur.width()+'px'; | |
| cur.find('.resize img').css('width', width); | |
| }); | |
| }); | |
| function drags(dragElement, resizeElement, container) { | |
| // Initialize the dragging event on mousedown. | |
| dragElement.on('mousedown touchstart', function(e) { | |
| dragElement.addClass('draggable'); | |
| resizeElement.addClass('resizable'); | |
| // Check if it's a mouse or touch event and pass along the correct value | |
| var startX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX; | |
| // Get the initial position | |
| var dragWidth = dragElement.outerWidth(), | |
| posX = dragElement.offset().left + dragWidth - startX, | |
| containerOffset = container.offset().left, | |
| containerWidth = container.outerWidth(); | |
| // Set limits | |
| minLeft = containerOffset + 10; | |
| maxLeft = containerOffset + containerWidth - dragWidth - 10; | |
| // Calculate the dragging distance on mousemove. | |
| dragElement.parents().on("mousemove touchmove", function(e) { | |
| // Check if it's a mouse or touch event and pass along the correct value | |
| var moveX = (e.pageX) ? e.pageX : e.originalEvent.touches[0].pageX; | |
| leftValue = moveX + posX - dragWidth; | |
| // Prevent going off limits | |
| if ( leftValue < minLeft) { | |
| leftValue = minLeft; | |
| } else if (leftValue > maxLeft) { | |
| leftValue = maxLeft; | |
| } | |
| // Translate the handle's left value to masked divs width. | |
| widthValue = (leftValue + dragWidth/2 - containerOffset)*100/containerWidth+'%'; | |
| // Set the new values for the slider and the handle. | |
| // Bind mouseup events to stop dragging. | |
| $('.draggable').css('left', widthValue).on('mouseup touchend touchcancel', function () { | |
| $(this).removeClass('draggable'); | |
| resizeElement.removeClass('resizable'); | |
| }); | |
| $('.resizable').css('width', widthValue); | |
| }).on('mouseup touchend touchcancel', function(){ | |
| dragElement.removeClass('draggable'); | |
| resizeElement.removeClass('resizable'); | |
| }); | |
| e.preventDefault(); | |
| }).on('mouseup touchend touchcancel', function(e){ | |
| dragElement.removeClass('draggable'); | |
| resizeElement.removeClass('resizable'); | |
| }); | |
| } | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .ba-container { | |
| width: 400px; | |
| } | |
| .ba-slider { | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .ba-slider img { | |
| width: 100%; | |
| display: block; | |
| } | |
| .resize { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 50%; | |
| overflow: hidden; | |
| } | |
| .handle { | |
| /* Thin line seperator */ | |
| position: absolute; | |
| left: 50%; | |
| top: 0; | |
| bottom: 0; | |
| width: 4px; | |
| margin-left: -2px; | |
| background: rgba(0, 0, 0, .5); | |
| cursor: ew-resize; | |
| } | |
| .handle:after { | |
| /* Big green knob */ | |
| position: absolute; | |
| top: 50%; | |
| width: 64px; | |
| height: 64px; | |
| margin: -32px 0 0 -32px; | |
| content: '\21ff'; | |
| color: #008000; | |
| /* a dark green */ | |
| // font-weight:bold; | |
| font-size: 48px; | |
| text-align: center; | |
| line-height: 64px; | |
| background: #99ff99; | |
| /* @darker green of gradient */ | |
| border: 1px solid #008000; | |
| /* a green */ | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .5), inset 0 60px 50px -30px #e6ffe6; | |
| /* lighter green in gradient */ | |
| } | |
| .draggable:after { | |
| width: 48px; | |
| height: 48px; | |
| margin: -24px 0 0 -24px; | |
| line-height: 48px; | |
| font-size: 30px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment