Before/after slider on a personal subscription plan.

Site URL: https://juxtapose.knightlab.com/#preview-embed

Hello

I would like to implement a before/after slider on my Squarespace portfolio, with the ability to show my work with ‘before and after’ retouching/edited photos.

I was building my Squarespace portfolio/website on a trial. I found a ‘before-after slider’ code from this code provider https://juxtapose.knightlab.com/

I made the befor after code uploading the photos to dropbox, and had inserted this code in a codeblock:

<iframe frameborder="0" class="juxtapose" width="100%" height="803" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=2cfd5df6-aab6-11ec-b5bb-6595d9b17862"></iframe>

It worked very well and everything was fine. When I then subscribed to Squarespace with a personal plan, the functionality of the code stopped working.

I found out that a personal plan does not support javascript or iframe code.

I then tried to embed a different code from juxtapose in an embed block instead:

https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=2cfd5df6-aab6-11ec-b5bb-6595d9b17862

The before/after slider was working now on my personal plan with the embed block, and everything was fine. I thought I had found a solution.

But two days after without me making any changes, now the embed code stopped working. Instead of the before/after slider, now black boxes with a youtube play button icon are showing instead.

I am wondering what happened? Why did the code stop working?

Can anybody help me if it is possible to make a before/after photo slider functionality on a personal plan?

For me, it is very expensive to have to subscribe to a business plan ( almost the double price of a personal plan) just to make this before/after slider work in my portfolio.

Thank you in advance!

Here you go:

Go to your embed code and type in the following HTML:

<div class="iframe-container">
  <iframe src="your-source-here" frameborder="0"></iframe>
</div>

*** "your-source-here" is the code snippet Juxstapose gives you. In your case this one: https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=2cfd5df6-aab6-11ec-b5bb-6595d9b17862 ***

Now go to your Custom CSS code and insert the following:

//JUXTAPOSE TEXT CODE//
.iframe-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .iframe-container {
    padding-top: 100%; /* Adjusting for different aspect ratio on smaller screens */
  }
}