SteveTaber Posted June 13, 2014 Share Posted June 13, 2014 (edited) I have found this great feature I would love to use in my site http://codepen.io/ace/pen/BqEer. I have added the HTML and CSS and the pictures line up on top of each other (http://taberphotography.co.uk/test) but I don't understand what to do with the JS code. Any thoughts would be much appreciated. Thanks. Edited August 18, 2016 by edokken jonfree1 1 Link to comment
XaQQhcQtEhfdzDvpDdQb Posted June 13, 2014 Share Posted June 13, 2014 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. Link to comment
SteveTaber Posted June 14, 2014 Author Share Posted June 14, 2014 Thanks Jason, the twentytwenty plugin looks great. I look forward to seeing your tutorial. Link to comment
jrlaughlin3 Posted July 10, 2014 Share Posted July 10, 2014 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 Link to comment
ededdneddie Posted July 10, 2014 Share Posted July 10, 2014 You are the man Jake! Thanks so much! Link to comment
ededdneddie Posted July 14, 2014 Share Posted July 14, 2014 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! Link to comment
neeklamy Posted July 15, 2014 Share Posted July 15, 2014 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. The name is an Anglicised form of the Greek Korvetti — I like to think there’s a little bit of the ancient Hellenic drive in me. Link to comment
SteveTaber Posted July 31, 2014 Author Share Posted July 31, 2014 Thanks for all the input here, I have (with a bit of work) got it working now. Link to comment
beewrangler Posted July 31, 2014 Share Posted July 31, 2014 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! Link to comment
amrtahtawi Posted August 29, 2014 Share Posted August 29, 2014 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 Link to comment
angushume Posted December 19, 2015 Share Posted December 19, 2015 This is brilliant thanks. Squarespace should implement this natively. Link to comment
Kitw Posted January 10, 2018 Share Posted January 10, 2018 Can this be applied to videos also? Link to comment
NewGlue Posted April 21, 2020 Share Posted April 21, 2020 Does this apply to squarespace 7.1 aswell? DKP 1 Link to comment
DKP Posted April 24, 2020 Share Posted April 24, 2020 Any luck making this work in 7.1? Link to comment
gtslifestyle Posted July 4, 2020 Share Posted July 4, 2020 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. Link to comment
rwp Posted July 5, 2020 Share Posted July 5, 2020 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. Link to comment
aok93 Posted August 24, 2020 Share Posted August 24, 2020 @rwp Could you please clarify whether the free script you've linked is compatible with Squarespace 7.1? It appears that several of the steps listed require the Developer Platform, which is no longer available in 7.1 to my knowledge. Link to comment
IXStudio Posted August 24, 2020 Share Posted August 24, 2020 Hi guys, We made a custom Chrome extension that let you make Before After Image Slider without worrying about coding. No need to write a line of code! It works on 7.0 and 7.1. Demo: https://www.sqsp.ixstudio.net/image-comparison Free Download: https://chrome.google.com/webstore/detail/squarespace-ninja-kit-ext/klkcninekpnpemndealaeebjajmkabcf Please check it and let me know your feedback. I'd love to add new and free elements on it! Thanks. Best, Leopold LightGraphix 1 Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
rwp Posted August 24, 2020 Share Posted August 24, 2020 1 hour ago, aok93 said: @rwp Could you please clarify whether the free script you've linked is compatible with Squarespace 7.1? It appears that several of the steps listed require the Developer Platform, which is no longer available in 7.1 to my knowledge. Works in 7.1 for sure. Link to comment
Guest Posted September 22, 2020 Share Posted September 22, 2020 On 8/24/2020 at 10:32 PM, IXStudio said: Hi guys, We made a custom Chrome extension that let you make Before After Image Slider without worrying about coding. No need to write a line of code! It works on 7.0 and 7.1. Demo: https://www.sqsp.ixstudio.net/image-comparison Free Download: https://chrome.google.com/webstore/detail/squarespace-ninja-kit-ext/klkcninekpnpemndealaeebjajmkabcf Please check it and let me know your feedback. I'd love to add new and free elements on it! Thanks. Best, Leopold Hi, I've installed the extension and made a image slider on my site (trial version) But the image doesn't show. In site edit mode the Image Comparison block is visible and I can open it to edit, it shows the before and after image etc., but it's not visible on the page. What is wrong, what do I need to do? Thanks for your reply. Ca_Milo Link to comment
IXStudio Posted September 22, 2020 Share Posted September 22, 2020 Hi @Ca_Milo Did you follow this installation guide?https://www.ixstudio.net/ninjakit/installation-guide Also, please share your website URL. Please use the like button if it helps you! Best, Leopold Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
Guest Posted September 22, 2020 Share Posted September 22, 2020 Thanks for your help Leopold! It works now. Just have to figure out best size for the image etc. (newbie in squarespace) Great! Link to comment
IXStudio Posted September 22, 2020 Share Posted September 22, 2020 (edited) You are welcome friend! @Ca_Milo Try 300 to 400px. Also please check the demo page.https://sqsp.ixstudio.net/ Best, Leopold Edited February 3, 2021 by IXStudio Ninja Kit Extension: Upgrade your Squarespace website without coding.YouTube Preview - FREE DOWNLOAD Link to comment
RolandFuseHub Posted February 3, 2021 Share Posted February 3, 2021 On 8/24/2020 at 1:56 PM, rwp said: Works in 7.1 for sure. Hi @rwp Would you be willing to outline how you got it to work? I run FuseHub Creative Group, a syndicate of creatives from all over the world with one common goal - to develop creative and strategic solutions for ambitious organizations, and develop cool plugins which you can find on the SQS Mods platform - Circle Members always get a 10% discount with this code: SQSMOD10. Link to comment
BeeDesign Posted October 27, 2021 Share Posted October 27, 2021 (edited) On 9/22/2020 at 7:25 PM, IXStudio said: Hi @Ca_Milo Did you follow this installation guide?https://www.ixstudio.net/ninjakit/installation-guide Also, please share your website URL. Please use the like button if it helps you! Best, Leopold Hi @IXStudio I have download and stilled following your instructions but can not get the Image comparison to work im just getting the below option. In fact I get the same for all the option other than gallery. Can you help please Edited October 28, 2021 by BeeDesign Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment