jotform / before-after.js Goto Github PK
View Code? Open in Web Editor NEWAn Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/
License: MIT License
An Image Comparision Slider: See an example demo here: http://www.jotform.com/formscentral/
License: MIT License
Very nice script, also responsive!
Unfortunately when using 'tabs' it doesn't work. On "TAB 1" the images are displaying correctly, the slider works perfectly but when going to "TAB 2" it's show only the image "after", the image "before" is not showing... The slider works but without the image "before" :-).
Does anyone knows a workaround for this issue?
Hey!
First of all, thanks for the nice work. We used it in production, works great.
We used it in a situation it wasn't originally designed for, when images are loaded dinamically.
The function does have an implicit trust on all images being loaded for it to work, so I solved it by adding this code to the beforeAfter function:
$('.ba-slider > img:first').on('load', function() {
var width_first_image = $('.ba-slider > img:first').width() + 'px';
cur.find('.resize img').css('width', width_first_image);
});
I can make the pull request if you wish - just wanted to discuss and validate the solution first.
As the title implies, I am curious if there is a way to use before-after.js package without Jquery? Any tips would be greatly appreciated!
Thanks!
Hi great plugin man! Really nice. Unfortunately, If i have any slider from slick.js on same page along before-after element. Then upon dragging handle of before-after element left and right. I came to realize that slider is also going left and right. Even after leaving handle of before-after element, It seems that slick slider is still following left and right drag event of mouse.
Here have a look i create codepen for you http://codepen.io/yoeman/pen/yVBBjP
Hey, I am getting an issue where when you select the handle an error comes up with minLeft is not defined, has this happened to anyone before?
I'm using a class to call the plugin and then utilising this on multiple mage comparisons. Is there a way to set this up so that only the one image comparison is altered without having to initiate multiple calls?
If I put this in the first mouseup callback:
console.log(" in mouseup 1");
and this in the second mouseup callback:
console.log(" in mouseup 2");
and this in the third mouseup callback:
console.log("in mouseup 3");
and I manipulate the slider a few times, the console shows this:
in mouseup 3
75 in mouseup 1
3 in mouseup 2
in mouseup 3
195 in mouseup 1
6 in mouseup 2
in mouseup 3
375 in mouseup 1
9 in mouseup 2
in mouseup 3
615 in mouseup 1
12 in mouseup 2
in mouseup 3
990 in mouseup 1
15 in mouseup 2
in mouseup 3
1170 in mouseup 1
18 in mouseup 2
The numbers in the left column are the number of times the message was printed consecutively.
Hey, your before-after is great, its light weight! end easy the use. Can you give some advise how to make the drag event a hoover event. So I can compare the images just by hovering over the images?.
Your help would be much appreciated and I good do some device testing for you with my browserstack account, just name the devices that you woud like to test your slider on.
Is it possible to limit the drag of the handle to say 90% of the images on both sides?
EDIT: I found this part:
minLeft = o + 10, maxLeft = o + u - f - 10
, but, is there any way I can make it in percentage of the image or even the div?
Hi, still learning the ropes of implementing open-source code, and I'm having some difficulties.
I was wondering if I could get some help implementing this code on a bootstrap site. The code is all currently resting in a div with a column class "col-xs-6" which would set the width of this div to 50%.
I was playing around with having the column classes or not as the images weren't appearing at all originally. Upon initial load with the column class, the image in the "resize" div appears at 50px.
Another odd thing I found was that the scrollbar wouldn't go all the way to the side, as seen in the following screenshot. This leaves some of the original image visible.
Oddly enough, changing the browser size "resets" things and matches the image size properly, but that isn't a solution. Any input would be very appreciated!
<div class="ba-slider col-sm-6 col-xs-12"> <img src="https://images-na.ssl-images-amazon.com/images/I/410H2zGlWpL._SY300_.jpg"> <div class="resize col-sm-6 col-xs-12"> <img src="https://seeklogo.com/images/S/Star_Wars-logo-2B2C24F703-seeklogo.com.png"> </div> <span class="handle"></span> </div>
Thanks, Justin
Can't seem to figure this one out... If I use more than one slider on a page they all drag simultaneously if I drag one of them.
For now the solution (hack?) I've come up with is creating an individual class for each slider
$('.ba-slider-1').beforeAfter(); $('.ba-slider-2').beforeAfter(); $('.ba-slider-3').beforeAfter(); etc...
and then adding the class to the CSS as well, but it seems a bit of a hassle having to multiply this for every slider I wanna add...
Is there a smarter solution for this by any chance?
I could provide a PR.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.