Before-After Slider Code HTML/CSS/JS

Hey all, I wanted to share my process for implementing this on my site. I've actually modified the twentytwenty plugin to work natively with squarespace stacked galleries. Take a look at my blog for a tutorial and to download the code:

http://www.massexod.us/blog/how-to-create-before-and-after-images-for-squarespace

My pleasure, Ed. I actually created a blog post and finished it yesterday. Hopefully this will help you out. Feel free to post any questions at the bottom of the blog post. Happy to help!

http://www.jakelaughlinphotography.com/blog/using-twentytwenty-with-squarespace

I'm successfully using Foundation's TwentyTwenty slider on a few sites: http://zurb.com/playground/twentytwenty

I'll have a tutorial posted here sometime soon: http://squarefront.com/addons

I'll repost it here when it's ready.

Thanks Jason, the twentytwenty plugin looks great. I look forward to seeing your tutorial.

You are the man Jake! Thanks so much!

Thanks to jrlaughlin3 for the help. His instructions are on point! I know many including myself have struggled to get this plugin working and I for one am grateful that Jason took the time to not only figure it out, but to also note each and every step. Huge thanks!

Jake - you’ve got a bit of repetition in there.

• Step 6 is unnecessary, if you look at the screen at step 7, you will see: “Enter code that will be injected into the ‘head’ tag on every page of your site”
• Further on, on adding a Code Block you include the jQuery, jQuery eventmove and TwentyTwenty files again!

So on every page with the slider you’re including it all twice, and on one page you have it included 3 times.

Thanks for all the input here, I have (with a bit of work) got it working now.

The plug in works great-but I have an issue when I link the page I created with the slider to the index page. When I go to the page now it briefly flashes then disappears. Any help would be appreciated!

The problem with me is that the preview when i click view page is not of my photos instead the broken image link icon and i've doubled check all the steps and used dropbox as well like you suggested. i hope you can assist me as soon as you can

This is brilliant thanks. Squarespace should implement this natively.

Can this be applied to videos also?

Does this apply to squarespace 7.1 aswell?

Any luck making this work in 7.1?

There's a solution for 7.1 done and being sold by Rebecca Grace for 50 CAD.

I guess it's just the 7.0 version updated to work with the new gallery item, just need to figure out what needs to be updated in the old code.

This can be done for free with numerous scripts that are available and some code blocks.

https://github.com/kavyasukumar/imgSlider

Is a very easy one to set up and use.