How to Create an Image Rollover on Carousel Gallery (and open links in a new tab)

Note: This post assumes you have some basic level understanding of JS/HTML/CSS. To request a custom Squarespace tweak get in touch here.

---

Request

Can you create a mouseover effect so these brand names change to a different color when you mouseover the image? Also, the links for these images are not able to open in a new window.

Problem

As it is, this particular gallery design doesn't allow clickthrough in new tab and creating a rollover for the Carousel (while possible) is a little trickier than the grid.

 

Solution

After hacking around I figured it would be easier to code it from scratch using a JQuery plugin called Slick.

Here's how you can do it too, to create the same hover effect and enable your clickthrough links to open in a new tab.

 

How to Install a Custom Carousel Gallery for Squarespace Using Slick

Step 1.

Add the following code to your PAGE HEADER CODE INJECTION

No option to open in a new window

<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<!-- Add the slick-theme.css if you want default styling -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>

Step 2.

Put this code in a Code Block wherever you want your gallery to be. Note the target="_blank" attribute in the <a> tag. This will ensure your image links open in a new tab.  I'm also using 2 images, the 2nd is your mouseover image. 

<div class="your-class"> 
  
<div>
<a class="foo" href="https://www.whereyouwannago.com" target="_blank">
<img src="/s/color1.png">
<img src="/s/color2.png">
  </a></div>
  
<div>your content</div> 
<div>your content</div> 
</div>

Step 3.

Put this script in a Code Block. You'll find the settings here to customize things like your gallery speed, responsiveness and a lot more.

<script type="text/javascript"> 
$(document).ready(function(){ 
$('.your-class').slick({ 
setting-name: setting-value 
}); 
}); 
</script>

Step 4. 

Insert the following in your Design > Custom CSS. The first 3 lines handle the mouseover effect. Hiding the 2nd image unless the mouse if over the 1st. Make sense?

.foo img:last-child{display:none}
.foo:hover img:first-child {display:none}
.foo:hover img:last-child {display:block}

.slick-slide img{
  max-height: 100px;
}

.slick-prev:before{
    content: "\e02c" !important;
}

.slick-next:before{
    content: "\e02d" !important;
}

.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before{
  opacity: .6;
}

.slick-prev:before, .slick-next:before{
font-family: 'squarespace-ui-font' !important;
    font-style: normal;
      font-size: 32px !important;
    width: 32px;
    height: 32px;
    line-height: 32px !important;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased !important;
  opacity: 1;
      color: #C5C5C5 !important;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

.slick-prev, .slick-next{
font-family: 'squarespace-ui-font' !important;
    font-style: normal;
      font-size: 0px;
    width: 32px !important;
    height: 32px !important;
    line-height: 32px !important;
    speak: none;
    font-weight: normal;
    -webkit-font-smoothing: antialiased !important;
      color: #C5C5C5 !important;
    text-align: center;
    display: inline-block;
    vertical-align: middle;
}

When it's done here's what you get...

---