TwinGallery.gif

Twin Slideshow

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:
 

<hiveSlideshow></hiveSlideshow>
 
Screen Shot 2017-12-18 at 17.59.20.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

 

 
 

 

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:

<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(){$("hiveSlideshow").parent().parent().css("height",$(".hiveSlideshow .slide img").eq(0).css("height")),$(".hiveSlideshow").css("height",$(".hiveSlideshow .slide img").eq(0).css("height")),$("hiveSlideshow").css("height",$(".hiveSlideshow .slide img").eq(0).css("height"))}),$("hiveSlideshow").closest(".sqs-block-code").addClass("hiveCode").next(".sqs-block-gallery").addClass("hiveCarousel").next(".sqs-block-gallery").addClass("hiveSlideshow");var e=$(".hiveSlideshow .slide").eq(0);new ResizeSensor(e,function(){setTimeout(function(){$("hiveSlideshow").parent().parent().css("height",$(".hiveSlideshow .slide img").eq(0).css("height")),$(".hiveSlideshow").css("height",$(".hiveSlideshow .slide img").eq(0).css("height")),$("hiveSlideshow").css("height",$(".hiveSlideshow .slide img").eq(0).css("height"))},1800)}),$(".hiveCarousel .next").click(function(){$(".hiveSlideshow .active").next().length>0?$(".hiveSlideshow .active").removeClass("active").next().addClass("active"):($(".hiveSlideshow .active").removeClass("active"),$(".hiveSlideshow .slide").eq(0).addClass("active"))}),$(".hiveCarousel .previous").click(function(){$(".hiveSlideshow .active").prev().length>0?$(".hiveSlideshow .active").removeClass("active").prev().addClass("active"):($(".hiveSlideshow .active").removeClass("active"),$(".hiveSlideshow .slide:last-of-type").addClass("active"))})}),$(window).on("load",function(){setTimeout(function(){$("hiveSlideshow").parent().parent().css("height",$(".hiveSlideshow .slide img").eq(0).height()),$(".hiveSlideshow").css("height",$(".hiveSlideshow .slide img").eq(0).height()),$("hiveSlideshow").css("height",$(".hiveSlideshow .slide img").eq(0).height())},1800),$(".hiveSlideshow .slide").eq(0).addClass("active"),console.log($(".hiveSlideshow .slide img").eq(0).css("height")),$("hiveSlideshow").append($(".hiveSlideshow")).append($(".hiveCarousel")),console.log($(".hiveSlideshow .slide img").eq(0).css("height"))});
</script>
 

Site wide Code Injection:

 
 

Individual Page Header Code Injection:

 
 

 

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. 

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%; 

 
TwinSlideshowLeftAligned.jpg

Left Aligned CSS:

/* TWIN SLIDESHOW CSS - LEFT ALIGNED */

@media all and (min-width: 1201px){
  .hiveCode{
    padding-top: 0%;
    padding-bottom: 20%;
  }
  hiveSlideshow{
    display: block;
  }
  .hiveSlideshow{
    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;
  }
  .hiveSlideshow .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
  }


  .hiveCarousel{
    -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;
  }
  .hiveCarousel .previous:before, .hiveCarousel .next:before{
    color: #000000
  }
  .hiveCarousel .previous, .hiveCarousel .next{
    pointer-events: auto;
    position: absolute !important;
    display: block;
    top: 100%;
    left: 50px;
    left: initial;
    margin: auto !important;
    background-color: transparent !important;
  }
  .hiveCarousel .next{
    left: 50px;
  }
  .hiveCarousel .sqs-intrinsic{
    padding-bottom: 75% !important;
  }
  .hiveCarousel .sqs-gallery-design-strip{
    left: 0px;
  }
  .hiveCarousel img{
    max-width: 100%;
    pointer-events: none;
  }
}
@media all and (max-width: 1200px){
  .hiveCode{
    height: auto !important;
  }
  .hiveCarousel, .hiveSlideshow{
    height: initial !important;
    position: initial !important;
    left: initial !important;
    top: initial !important;
    margin: auto !important;
  }
  .hiveCarousel .previous, .hiveCarousel .next{
    pointer-events: auto;
    margin: auto;
  }
  .hiveCarousel .sqs-intrinsic{
    padding-bottom: 75% !important;
  }
  .hiveSlideshow .sqs-gallery-block-slideshow{
    background-color: transparent;
  }
  .hiveSlideshow .slide.active{
    opacity: 1 !important;
    visibility: visible !important;
  }
  .hiveSlideshow .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;
  }
}
hiveSlideshow{
  opacity: 0;
  animation: 1s ease-out 2s 1 fadeIn;
  animation-fill-mode: forwards; 
  pointer-events: none;
}
TwinSlideshowRightAligned.jpg

Right Aligned CSS:

/* TWIN SLIDESHOW CSS - RIGHT ALIGNED */

@media all and (min-width: 1201px){
  .hiveCode{
    padding-top: 0%;
    padding-bottom: 20%;
  }
  hiveSlideshow{
    display: block;
  }
  .hiveSlideshow{
    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;
  }
  .hiveSlideshow .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
  }


  .hiveCarousel{
    -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;
  }
  .hiveCarousel .previous:before, .hiveCarousel .next:before{
    color: #000000
  }
  .hiveCarousel .previous, .hiveCarousel .next{
    pointer-events: auto;
    position: absolute !important;
    display: block;
    top: 100%;
    right: 50px;
    left: initial;
    margin: auto !important;
    background-color: transparent !important;
  }
  .hiveCarousel .next{
    right: 0px;
  }
  .hiveCarousel .sqs-intrinsic{
    padding-bottom: 75% !important;
  }
  .hiveCarousel .sqs-gallery-design-strip{
    left: 0px;
  }
  .hiveCarousel img{
    max-width: 100%;
    pointer-events: none;
  }
}
@media all and (max-width: 1200px){
  .hiveCode{
    height: auto !important;
  }
  .hiveCarousel, .hiveSlideshow{
    height: initial !important;
    position: initial !important;
    left: initial !important;
    top: initial !important;
    margin: auto !important;
  }
  .hiveCarousel .previous, .hiveCarousel .next{
    pointer-events: auto;
    margin: auto;
  }
  .hiveCarousel .sqs-intrinsic{
    padding-bottom: 75% !important;
  }
  .hiveSlideshow .sqs-gallery-block-slideshow{
    background-color: transparent;
  }
  .hiveSlideshow .slide.active{
    opacity: 1 !important;
    visibility: visible !important;
  }
  .hiveSlideshow .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;
  }
}
hiveSlideshow{
  opacity: 0;
  animation: 1s ease-out 2s 1 fadeIn;
  animation-fill-mode: forwards; 
  pointer-events: none;
}
 

Finding your Custom CSS editor:

 

Individual Page Header CSS injection:

 

⚡️ 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.