Jump to content

Recommended Posts

Hello. I am working on a website for a client and I was wondering if it is possible to show off their services like this website does:

https://www.kimley-horn.com

I want the user to be able to filter out by the three services they offer: Engineering, Environmental, Industrial Services

I would want the user to select one and then it would filter out the thumbnails to lead them to that landing page. Thank you in advance!

Link to comment
13 hours ago, TripleAAA said:

Hello. I am working on a website for a client and I was wondering if it is possible to show off their services like this website does:

https://www.kimley-horn.com

I want the user to be able to filter out by the three services they offer: Engineering, Environmental, Industrial Services

I would want the user to select one and then it would filter out the thumbnails to lead them to that landing page. Thank you in advance!

Are you telling about this?

Screenshot_160.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

You can follow these steps to achieve this feature

(1) You add a Text Block with 3 text, then hyperlink them, use this format. And make sure "Open in New Tab" is disabled

  • #Engineering
  • #Environmental
  • #Industrial-services

image.thumb.png.68b4bb29fbcb0ac24a69d9cc9d4664f6.png

image.png.5cb898bf3a4b90f1466faf5e2b460bec.png

 

 

image.png.05fa74d5703037b575c7a4a30e5a0111.png

(2) Add 3 Gallery Sections under Text Block

When you add a Section > Click Images > Choose section with (i) icon, it is Gallery Section

image.thumb.png.44350de70b465294b72a941f9ddc7da6.png

Hover on Gallery > Click Edit Section

image.png.4f6828f66dfdbc6271c10b011f6e86fe.png

Choose Grid Simple, adjust number of items/row and enable Gallery Caption

image.png.5679ebb379cfd2b434d7c8d392d982be.png

Next, click Edit Gallery and add some text for images

image.png.4f6828f66dfdbc6271c10b011f6e86fe.png

and add some text/url

image.thumb.png.588ec2c5275536655065d3d9e147c039.png

(3) Install this free tool to find ID of 3 Galleries you added

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

In my example, we will have

  • Engineering Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd27"]
  • Environmental Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd29"]
  • Industrial Services Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd2a"]

image.thumb.png.dedd1d8cc397763b171d798bc440e72d.png

image.png.cb22ebd42387785c512ebc930a491eb6.png

image.thumb.png.7ef5b1e6d65e43c5dbe2769768f76ea6.png

(4) Use this code to Individual Page Header Code Injection (Page where you added 3 Galleries)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Show initial: Engineering
  $('section[data-section-id="661f1cfbe479ea22f816bd27"]').addClass('show');  
 // Engineering
  $('a[href="#Engineering"]').click(function(){
    $('section[data-section-id="661f1cfbe479ea22f816bd27"]').addClass("show");
    $('section:not([data-section-id="661f1cfbe479ea22f816bd27"])').removeClass('show');
    }
  );
// Environmental
$('a[href="#Environmental"]').click(function(){
   $('section[data-section-id="661f1cfbe479ea22f816bd29"]').addClass("show");
    $('section:not([data-section-id="661f1cfbe479ea22f816bd29"])').removeClass('show');
    }
  );
  // Industrial Services
  $('a[href="#Industrial-services"]').click(function(){
   $('section[data-section-id="661f1cfbe479ea22f816bd2a"]').addClass("show");
    $('section:not([data-section-id="661f1cfbe479ea22f816bd2a"])').removeClass('show');
    }
  );
});
</script>
<style>
section[data-section-id="661f1cfbe479ea22f816bd27"], section[data-section-id="661f1cfbe479ea22f816bd29"], section[data-section-id="661f1cfbe479ea22f816bd2a"]{
    display: none;
  transition: all 0.5s;
}
  section.show {
      display: block !important;
    transition: all 0.5s;
  }
</style>
<style>
figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"]:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
      pointer-events: none;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

image.thumb.png.55047e658f6fcc1de701a3fd89adb74a.png

 

(5) See a demo

https://tuanphan-demo01.squarespace.com/ctext-show-gallery-section-fr?noredirect

pass: abc

If you have problems when adding the code, just comment below

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
3 hours ago, tuanphan said:

You can follow these steps to achieve this feature

(1) You add a Text Block with 3 text, then hyperlink them, use this format. And make sure "Open in New Tab" is disabled

  • #Engineering
  • #Environmental
  • #Industrial-services

image.thumb.png.68b4bb29fbcb0ac24a69d9cc9d4664f6.png

image.png.5cb898bf3a4b90f1466faf5e2b460bec.png

 

 

image.png.05fa74d5703037b575c7a4a30e5a0111.png

(2) Add 3 Gallery Sections under Text Block

When you add a Section > Click Images > Choose section with (i) icon, it is Gallery Section

image.thumb.png.44350de70b465294b72a941f9ddc7da6.png

Hover on Gallery > Click Edit Section

image.png.4f6828f66dfdbc6271c10b011f6e86fe.png

Choose Grid Simple, adjust number of items/row and enable Gallery Caption

image.png.5679ebb379cfd2b434d7c8d392d982be.png

Next, click Edit Gallery and add some text for images

image.png.4f6828f66dfdbc6271c10b011f6e86fe.png

and add some text/url

image.thumb.png.588ec2c5275536655065d3d9e147c039.png

(3) Install this free tool to find ID of 3 Galleries you added

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

In my example, we will have

  • Engineering Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd27"]
  • Environmental Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd29"]
  • Industrial Services Gallery ID: section[data-section-id="661f1cfbe479ea22f816bd2a"]

image.thumb.png.dedd1d8cc397763b171d798bc440e72d.png

image.png.cb22ebd42387785c512ebc930a491eb6.png

image.thumb.png.7ef5b1e6d65e43c5dbe2769768f76ea6.png

(4) Use this code to Individual Page Header Code Injection (Page where you added 3 Galleries)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // Show initial: Engineering
  $('section[data-section-id="661f1cfbe479ea22f816bd27"]').addClass('show');  
  // Engineering
  $('a[href="#Engineering"]').click(function(){
    $('section[data-section-id="661e924ba18cdc6b7897fe7c"]').addClass("show");
    $('section:not([data-section-id="661e924ba18cdc6b7897fe7c"])').removeClass('show');
    }
  );
// Environmental
$('a[href="#Environmental"]').click(function(){
   $('section[data-section-id="661f1cfbe479ea22f816bd29"]').addClass("show");
    $('section:not([data-section-id="661f1cfbe479ea22f816bd29"])').removeClass('show');
    }
  );
  // Industrial Services
  $('a[href="#Industrial-services"]').click(function(){
   $('section[data-section-id="661f1cfbe479ea22f816bd2a"]').addClass("show");
    $('section:not([data-section-id="661f1cfbe479ea22f816bd2a"])').removeClass('show');
    }
  );
});
</script>
<style>
section[data-section-id="661f1cfbe479ea22f816bd27"], section[data-section-id="661f1cfbe479ea22f816bd29"], section[data-section-id="661f1cfbe479ea22f816bd2a"]{
    display: none;
  transition: all 0.5s;
}
  section.show {
      display: block !important;
    transition: all 0.5s;
  }
</style>
<style>
figure[class*="gallery"]:not(.gallery-slideshow-item) {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
.gallery-caption p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
figure[class*="gallery"]:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
div[class*="-item-wrapper"]:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
figure[class*="gallery"]:hover div[class*="-item-wrapper"]:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}
</style>

image.thumb.png.55047e658f6fcc1de701a3fd89adb74a.png

 

(5) See a demo

https://tuanphan-demo01.squarespace.com/ctext-show-gallery-section-fr?noredirect

pass: abc

If you have problems when adding the code, just comment below

So I am having a couple of issues. What would the description and the link text. Also, I copied your same format and here are my section id's. How would I go about plugging them in:

  • Engineering Gallery ID: section[data-section-id="661f463a0375c557356864d9"]
  • Environmental Gallery ID: section[data-section-id="661f4de12cca803853fe465f"]
  • Industrial Services Gallery ID: section[data-section-id="661f4de78bc76e2bfaa210f7"]
Link to comment
21 hours ago, TripleAAA said:

So I am having a couple of issues. What would the description and the link text. Also, I copied your same format and here are my section id's. How would I go about plugging them in:

  • Engineering Gallery ID: section[data-section-id="661f463a0375c557356864d9"]
  • Environmental Gallery ID: section[data-section-id="661f4de12cca803853fe465f"]
  • Industrial Services Gallery ID: section[data-section-id="661f4de78bc76e2bfaa210f7"]

(1) With link

my demo has a problem with link. I adjusted above code. You can check again. You can follow above guide, the link will work

(2) With description, you can enter this format to Title. SS will break <br/> to new line

image.thumb.png.370f931484de52924ce7f6a77c58e4d1.png

like this

image.png.2718b8bb3ee99dd55ab43d44902185e4.png

(3) ID, I will add an explain image here

(I have a problem with code, I updated the code, so you can check again)

You can try, if you still can't make it work, you can share link to page where you added 3 galleries, I will give full code for you.

image.thumb.png.3b0a83c3e82bf2ae23f9b81a90627e4e.png

image.thumb.png.2b038ebdf1d9beb72d0415c3a455a95f.png

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.