jotform / before-after.js Goto Github PK

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?

I could provide a PR.

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?

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

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.

Commit 76fe500 broke the slider functionality in sample.html for me:
the slider slides but the images don't change.
@hugoam 's pull request #9 fixes it.

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?

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!

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?

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.

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?

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.

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