Jump to content

Gallery "click on image"

Recommended Posts

Site URL: https://www.robertdeanarchitects.com/about

I have custom code on team gallery section and I added last image 'we are hiring" with CTA "click here for details" looks like link is not responding to the URL added, can I change anything on this code to make the image clickable? https://www.robertdeanarchitects.com/about

 

https://static1.squarespace.com/static/5f6e689c2d5dea39910d0158/t/5fc557a3eaf37e3b644e5ef6/1606768548051/RDA_weblogo_rda_logo_full_color_rgb.png
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
/* footer tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-4 {
    width: 40%;
}
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-8 {
    width: 60%;
}
}
/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-96bcdd020e2048e1d369 {
    padding-right: 0;
}
}

 

Thank you in Advance!

@tuanphan

Link to comment
37 minutes ago, gagica said:

Site URL: https://www.robertdeanarchitects.com/about

I have custom code on team gallery section and I added last image 'we are hiring" with CTA "click here for details" looks like link is not responding to the URL added, can I change anything on this code to make the image clickable? https://www.robertdeanarchitects.com/about

 

https://static1.squarespace.com/static/5f6e689c2d5dea39910d0158/t/5fc557a3eaf37e3b644e5ef6/1606768548051/RDA_weblogo_rda_logo_full_color_rgb.png
@media screen and (max-width:767px) {
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
/* footer tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-4 {
    width: 40%;
}
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-8 {
    width: 60%;
}
}
/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-96bcdd020e2048e1d369 {
    padding-right: 0;
}
}

 

Thank you in Advance!

@tuanphan

You can hide the overlay on the clickthrough enabled item

.has-clickthrough .gallery-grid-item-wrapper:after {
    background: #72649E;
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
32 minutes ago, bangank36 said:

You can hide the overlay on the clickthrough enabled item


.has-clickthrough .gallery-grid-item-wrapper:after {
    background: #72649E;
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

 

Im sorry im not sure I understand,  add this code you wrote if so where? I just want the last box to be clickable the rest of gallery should not change. Is that possible?

 

thank you for your fast reply @bangank36

Link to comment
1 hour ago, gagica said:

Im sorry im not sure I understand,  add this code you wrote if so where? I just want the last box to be clickable the rest of gallery should not change. Is that possible?

 

thank you for your fast reply @bangank36

Add it to Design->Custom CSS, it will disable the overlay animation on grid item which has click-through link enable

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
8 hours ago, bangank36 said:

Add it to Design->Custom CSS, it will disable the overlay animation on grid item which has click-through link enable

Hi @bangank36 I did add it, still not responding im also getting Syntax error line 1 could that be an issue?

here is all the code I have there now:

https://static1.squarespace.com/static/5f6e689c2d5dea39910d0158/t/5fc557a3eaf37e3b644e5ef6/1606768548051/RDA_weblogo_rda_logo_full_color_rgb.png
@media screen and (max-width:767px) 
{
    .gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}
/* footer tablet */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-4 {
    width: 40%;
}
div#page-section-5f6e689d2d5dea39910d018d>.row:nth-child(2) .span-8 {
    width: 60%;
}
}
/* tablet footer */
@media screen and (max-width:991px) and (min-width:768px) {
div#block-96bcdd020e2048e1d369 {
    padding-right: 0;
}
}
.has-clickthrough .gallery-grid-item-wrapper:after {
    background: #72649E;
    content: "";
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}

Link to comment

remove this line first

image.png.be86add51b24bd107849d7192172875b.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
5 minutes ago, gagica said:

Thank  you @bangank36, it worked like a charm. 🙂 

You rock! 

Here is some more effect that may attract you

https://beyondspace-showcase.squarespace.com/gallery-hovers

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. 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.