Discussion on HTML Before-After Viewer | jQuery plugin

Discussion on HTML Before-After Viewer | jQuery plugin

Cart 343 sales

wickedpixel supports this item


43 comments found.

How can I enable autoplay?

The mover layer (wpw-ba-door) is not showing up for me, double checked my jquery version – css includes and more. Also tried manually calling the function for a gallery. Works in demo not my site, any thoughts?

Is there live support for this product?


I’m having a real hard time installing this on a Squarespace site using the code generator method. Do you happen to have specific instructions for use on Squarespace? I’ve seen it working on other squarespace sites but cannot figure out why mine is only showing a static image.

Thanks for your help and great plugin!


Will it work fine with jQuery v1.9 or more..

Hi – does this work in Firefox? How difficult is it to install in to a website. I don’t use Wordpress, can it be added to other websites other than Wordpress?



I have installed this plugin but in the lightbox feature when it opens a new window the pic behind the window is still visible. Can it have a solid background rather than a transparent background so that when it opens in lightbox we canot see what is behind?

Hi, Probably it needs a small css tweak. For the z-index value on the elements. Probably something higher than the current value.

Thanks for that. It worked. Can I also ask you if I need to add a short description of the image when it opens in lightbox how can I do it ?

Great Jobs, thanks man. ¿Works in Prestashop?

I would like to add a Before-After Viewer to the description of my next Videohive project.. but I don’t know if it’s possible :( Can you help me ?

Thank You!

Contact me:

Spent 9 hours trying to figure this out myself and only 30 minutes installing your script. Thanks much!

Hi there, i’ve tried installing but its not working at all. Could you please help me out?

There seems to be a problem with lightbox display on long pages with a lot of content. Image inside lightbox triggered with a button falls to the bottom of the page.

Tested with the latest Chrome and Safari on Mac.

Hm. Wu=ill test to see what’s up.

Any progress on this? Also, in the embedded gallery, when using images of different sizes (where height is the same for all images but width varies) it doesn’t seem possible to keep height fixed but not the width. Gallery defaults to fixed width anyway but height is being resized. Tested on Chrome. This is the code I’m using:

<div class="wpw-auto-init-ba" data-width="auto" data-height="1000" data-animspeed="1200" data-startpercent="0.1" data-maxwidth="1500" data-maxheight="1000" data-lightbox="simple+lightbox" data-disableintro="false"> <img src="images/1_before.jpg" data-second="images/1_after.jpg" /> <img src="images/2_before.jpg" data-second="images/2_after.jpg" /> </div>

This thing is not working at all, any suggestions?

1. What account has bought the viewer? Yours seems is not the buyer.
2. A good idea is to give me a private message with a link where the viewer does not work.

I bought it yesterday, edinchavez is the account. Here is a link:

BIG UPDATE: 11 May 2013 – Version 2.0

New additions:
- lightbox feature
- tweaks to improve compatibility with uses in tabs
- support for links on captions
- a code generator tool, to help easy generate viewer code.

You can download again the plugin to get the updated files.


Is there a way for me to add a link to the caption area? I am working on a project in which the client wants to make the images and/or the caption ontent linkable. Any help would be appreciated! Thank you!

An update is waiting for approval. I just added that feature. Will post here a message when the update is online.

whoops, got it! nice stuff.

great stuff, thanks for this! 2 rather silly items that I am sure I can tweak but am having a hard time getting going. 1. Speed of intro 2. having the final intro end more to one side or other of image. could you point me to the code/vars? thx!

On an android device (and possibly other touch devices), when you touch and swipe up/down on a BA gallery nothing happens, including scrolling. It seems the BA gallery recognizes any sort of touch gesture as interaction when it should only recognize left/right movement.

On a small devices (phone) without much real estate the BA gallery is likely to take up a majority of the screen. This raises quite a concern when the user can no long use that area to continue scrolling a page.

Is there any chance you would be able to look into this?


Sorry for all the questions! But I have another… Is it okay to initialize the wpwBAgallery() in a $(window).resize() function?

Just wondering if there’s any issues with it trying to re-initialize every time the window is resized. It doesn’t seem to be causing any errors but I just wanted to ask to make sure.


The gallery runs only once per element. If viewer object is found, it will not create the same thing again. So I guess you are safe.

Great, sounds good.

Hi again. I’ve noticed that my page is endlessly stuck ‘loading’ when I use your gallery. It appears as though everything loads fine, but it I’m still seeing a spinning dial for my favicon and the status bar reads “Transfering data from localhost…” (I’m working locally).

I don’t have any console errors… I’ll do some more testing but I thought I’d ask in case you’d run into this previously in your development.


You can use the tools Chrome has. Tools > Developer Tools > Network > Record. There you can see what is loading. Firefox is also having something similar. Give it a try.


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey