TripleAAA Posted April 15 Share Posted April 15 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
Web_Solutions Posted April 16 Share Posted April 16 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? Earvin 1 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
TripleAAA Posted April 16 Author Share Posted April 16 9 hours ago, Web_Solutions said: Are you telling about this? Yes I am Link to comment
tuanphan Posted April 17 Share Posted April 17 (edited) 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 (2) Add 3 Gallery Sections under Text Block When you add a Section > Click Images > Choose section with (i) icon, it is Gallery Section Hover on Gallery > Click Edit Section Choose Grid Simple, adjust number of items/row and enable Gallery Caption Next, click Edit Gallery and add some text for images and add some text/url (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"] (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> (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 April 18 by tuanphan Earvin 1 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
TripleAAA Posted April 17 Author Share Posted April 17 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 (2) Add 3 Gallery Sections under Text Block When you add a Section > Click Images > Choose section with (i) icon, it is Gallery Section Hover on Gallery > Click Edit Section Choose Grid Simple, adjust number of items/row and enable Gallery Caption Next, click Edit Gallery and add some text for images and add some text/url (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"] (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> (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"] Earvin 1 Link to comment
tuanphan Posted April 18 Share Posted April 18 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 like this (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. Earvin 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment