Twin Slideshow

TwinGallery.gif

Showcase your portfolio or products with this compelling & unique slideshow gallery. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.


Step 1: Create a Code Block

Insert a Code Block where you want your Twin Slideshow to be and paste this code into it:

<twinSlideshow></twinSlideshow>
twinSlideshowCodeScreenshot.png

Step 2: Insert a Carousel gallery

Directly below the Code Block you just created, insert a Gallery Block and set it to the 'Carousel' style following our recommended settings:
 

Automatically Transition Between Slides -  ✘
Show Next and Previous Controls -
Active Alignment - Center

 

Step 3: Upload Carousel images

Now upload the landscape images that you'd like to display in the foreground of your Twin Slideshow. 

Note: all of these images need to be the same dimensions and ratio. We recommend 16:9, 4:3 or 3:2

download (1).png

Step 4: Insert a Slideshow gallery

Directly below the Carousel Gallery you just created, insert another Gallery Block and set it to the 'Slideshow' style following our recommended settings:
 

Automatically Transition Between Slides - 
Show Next and Previous Controls - 
Automatically Crop Images - 
Show Thumbnails - 
Show Title and Description - 

 

Step 5: Upload Slideshow images

Now upload the portrait images that you'd like to display in the background of your Twin Slideshow. 

Note: all of these images need to be the same dimensions and ratio. We recommend 9:16, 3:4 or 2:3. 

For best results, landscape and portrait image ratios should be paired (i.e. 16:9 & 9:16 or 4:3 & 3:4)


Step 6: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

Copy & paste this code:

  1. Change #fafafa to match your site's content background colour and #fecb2f to your desired bar colour.

  2. To change the thickness (height) of your progress bar, replace 4px with the required amount. All 'height' and 'margin-top' values must be exactly the same.

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){$(window).on("resize",function(){$("twinSlideshow").parent().parent().css("height",$(".twinSlideshow .slide img").eq(0).css("height")),$(".twinSlideshow").css("height",$(".twinSlideshow .slide img").eq(0).css("height")),$("twinSlideshow").css("height",$(".twinSlideshow .slide img").eq(0).css("height"))}),$("twinSlideshow").closest(".sqs-block-code").addClass("twinCode").next(".sqs-block-gallery").addClass("twinCarousel").next(".sqs-block-gallery").addClass("twinSlideshow");var e=$(".twinSlideshow .slide").eq(0);new ResizeSensor(e,function(){setTimeout(function(){$("twinSlideshow").parent().parent().css("height",$(".twinSlideshow .slide img").eq(0).css("height")),$(".twinSlideshow").css("height",$(".twinSlideshow .slide img").eq(0).css("height")),$("twinSlideshow").css("height",$(".twinSlideshow .slide img").eq(0).css("height"))},1800)}),$(".twinCarousel .next").click(function(){$(".twinSlideshow .active").next().length>0?$(".twinSlideshow .active").removeClass("active").next().addClass("active"):($(".twinSlideshow .active").removeClass("active"),$(".twinSlideshow .slide").eq(0).addClass("active"))}),$(".twinCarousel .previous").click(function(){$(".twinSlideshow .active").prev().length>0?$(".twinSlideshow .active").removeClass("active").prev().addClass("active"):($(".twinSlideshow .active").removeClass("active"),$(".twinSlideshow .slide:last-of-type").addClass("active"))})}),$(window).on("load",function(){setTimeout(function(){$("twinSlideshow").parent().parent().css("height",$(".twinSlideshow .slide img").eq(0).height()),$(".twinSlideshow").css("height",$(".twinSlideshow .slide img").eq(0).height()),$("twinSlideshow").css("height",$(".twinSlideshow .slide img").eq(0).height())},1800),$(".twinSlideshow .slide").eq(0).addClass("active"),console.log($(".twinSlideshow .slide img").eq(0).css("height")),$("twinSlideshow").append($(".twinSlideshow")).append($(".twinCarousel")),console.log($(".twinSlideshow .slide img").eq(0).css("height"))});
</script>

Site wide Code Injection:

sitewide-1.png
sitewide-2.png
sitewide-3.png

Individual Page Header Code Injection:

download.png
header-2.png
header-3.png
header-4.png

Step 7: Insert the CSS 

Insert the following code into your Squarespace site's Custom CSS editor or the Individual Page Header CSS injection (more info below) - the values in bold can be changed to suit your branding and site design. 

Where colour values are added, you can use either of the following:

  • Valid colour name e.g. 'red' or 'yellow'

  • Hex value e.g. #FECB2F

  • RGB(a) value e.g. rgb (255,255,255) or rgba (255,255,255,0.8) - optional opacity value '0.8'

  • HSL(s) value (optional opacity values '0.8') e.g. hsl (0, 0%, 20%) or hsla (0, 0%, 20%, 0.8) - optional opacity value '0.8'

If you need help finding colours and building colour palettes - coolors.io is an awesome resource!

To change the position of the Carousel gallery, adjust the 'top' value in bold as follows:

Top = top: 40%;
Centred = top: 60%; (current)
Bottom = top: 80%; 

Left Aligned CSS:

Left Aligned CSS:

/* TWIN SLIDESHOW CSS - LEFT ALIGNED */

@media all and (min-width: 1201px){
  .twinCode{
    padding-top: 0%;
    padding-bottom: 20%;
  }
  twinSlideshow{
    display: block;
  }
  .twinSlideshow{
    position: absolute;
    margin-top: 0%;
    width: 40%;
    top: 40%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  .twinSlideshow .sqs-gallery-block-slideshow{
    background-color: transparent;
  }
  .sqs-gallery-design-stacked{
    height: auto !important
  }

  .slide.active{
    opacity: 1 !important;
    visibility: visible !important;
  }
  .slide{
    opacity: 0 !important;
    visibility: hidden !important;
    -webkit-transition: all .3s ease-in-out !important;
    -moz-transition: all .3s ease-in-out !important;
    -o-transition: all .3s ease-in-out !important;
    transition: all .3s ease-in-out !important;
  }
  .slide  img{
    height: initial !important
  }


  .twinCarousel{
    -webkit-box-shadow: 4px 4px 20px 2px rgba(60,60,60,0.3);
    box-shadow: 4px 4px 20px 2px rgba(60,60,60,0.3);
    z-index: 999;
    position: absolute;
    width: 50%;
    top: 40%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 0px !important;
  }
  .twinCarousel .previous:before, .twinCarousel .next:before{
    color: #000000
  }
  .twinCarousel .previous, .twinCarousel .next{
    pointer-events: auto;
    position: absolute !important;
    display: block;
    top: 100%;
    left: 50px;
    left: initial;
    margin: auto !important;
    background-color: transparent !important;
  }
  .twinCarousel .next{
    left: 50px;
  }
  .twinCarousel .sqs-intrinsic{
    padding-bottom: 75% !important;
  }
  .twinCarousel .sqs-gallery-design-strip{
    left: 0px;
  }
  .twinCarousel img{
    max-width: 100%;
    pointer-events: none;
  }
}
@media all and (max-width: 1200px){
  .twinCode{
    height: auto !important;
  }
  .twinCarousel, .twinSlideshow{
    height: initial !important;
    position: initial !important;
    left: initial !important;
    top: initial !important;
    margin: auto !important;
  }
  .twinCarousel .previous, .twinCarousel .next{
    pointer-events: auto;
    margin: auto;
  }
  .twinCarousel .sqs-intrinsic{
    padding-bottom: 75% !important;
  }
  .twinSlideshow .sqs-gallery-block-slideshow{
    background-color: transparent;
  }
  .twinSlideshow .slide.active{
    opacity: 1 !important;
    visibility: visible !important;
  }
  .twinSlideshow .slide{
    opacity: 0 !important;
    visibility: hidden !important;
    -webkit-transition: all .3s ease-in-out !important;
    -moz-transition: all .3s ease-in-out !important;
    -o-transition: all .3s ease-in-out !important;
    transition: all .3s ease-in-out !important;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1;
  }
}
twinSlideshow{
  opacity: 0;
  animation: 1s ease-out 2s 1 fadeIn;
  animation-fill-mode: forwards; 
  pointer-events: none;
}

Right Aligned CSS:

Right Aligned CSS:

/* TWIN SLIDESHOW CSS - RIGHT ALIGNED */

@media all and (min-width: 1201px){
  .twinCode{
    padding-top: 0%;
    padding-bottom: 20%;
  }
  twinSlideshow{
    display: block;
  }
  .twinSlideshow{
    position: absolute;
    margin-top: 0%;
    width: 40%;
    top: 40%;
    left: 35%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
  }
  .twinSlideshow .sqs-gallery-block-slideshow{
    background-color: transparent;
  }
  .sqs-gallery-design-stacked{
    height: auto !important
  }

  .slide.active{
    opacity: 1 !important;
    visibility: visible !important;
  }
  .slide{
    opacity: 0 !important;
    visibility: hidden !important;
    -webkit-transition: all .3s ease-in-out !important;
    -moz-transition: all .3s ease-in-out !important;
    -o-transition: all .3s ease-in-out !important;
    transition: all .3s ease-in-out !important;
  }
  .slide  img{
    height: initial !important
  }


  .twinCarousel{
    -webkit-box-shadow: 4px 4px 20px 2px rgba(60,60,60,0.3);
    box-shadow: 4px 4px 20px 2px rgba(60,60,60,0.3);
    z-index: 999;
    position: absolute;
    width: 50%;
    top: 40%;
    left: 65%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 0px !important;
  }
  .twinCarousel .previous:before, .twinCarousel .next:before{
    color: #000000
  }
  .twinCarousel .previous, .twinCarousel .next{
    pointer-events: auto;
    position: absolute !important;
    display: block;
    top: 100%;
    right: 50px;
    left: initial;
    margin: auto !important;
    background-color: transparent !important;
  }
  .twinCarousel .next{
    right: 0px;
  }
  .twinCarousel .sqs-intrinsic{
    padding-bottom: 75% !important;
  }
  .twinCarousel .sqs-gallery-design-strip{
    left: 0px;
  }
  .twinCarousel img{
    max-width: 100%;
    pointer-events: none;
  }
}
@media all and (max-width: 1200px){
  .twinCode{
    height: auto !important;
  }
  .twinCarousel, .twinSlideshow{
    height: initial !important;
    position: initial !important;
    left: initial !important;
    top: initial !important;
    margin: auto !important;
  }
  .twinCarousel .previous, .twinCarousel .next{
    pointer-events: auto;
    margin: auto;
  }
  .twinCarousel .sqs-intrinsic{
    padding-bottom: 75% !important;
  }
  .twinSlideshow .sqs-gallery-block-slideshow{
    background-color: transparent;
  }
  .twinSlideshow .slide.active{
    opacity: 1 !important;
    visibility: visible !important;
  }
  .twinSlideshow .slide{
    opacity: 0 !important;
    visibility: hidden !important;
    -webkit-transition: all .3s ease-in-out !important;
    -moz-transition: all .3s ease-in-out !important;
    -o-transition: all .3s ease-in-out !important;
    transition: all .3s ease-in-out !important;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1;
  }
}
twinSlideshow{
  opacity: 0;
  animation: 1s ease-out 2s 1 fadeIn;
  animation-fill-mode: forwards; 
  pointer-events: none;
}

Site wide CSS Injection:

 
sitewide-1.png
 
 
sitewide-3.png
 

Individual Page Header CSS Injection:

If using this method, be sure to wrap your CSS in <style></style> tags as shown in image 4!

 
 
 
 

 

Step 8: Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.

Noughts & Ones