Jump to content

Gallery Slideshow Description Position

Go to solution Solved by tuanphan,

Recommended Posts

Hello, I am working on designing my gallery slideshow into somewhat of a "module" using some custom CSS. The goal is to have site visitors click on a thumbnail and see the description of the image. I have gotten pretty close to my desired outcome. Here's what I've done so far:

  1. Hid the main (big) image so only the thumbnails and image description are visible.
  2. Designed the image thumbnails and moved them to the left of the main (big) image.
  3. Designed the image description and moved it to the right of the thumbnails.

But I am running into a hiccup; see below and attached screencast.

When I first click on a thumbnail the description appears at the very top (beyond the margin actually). Then, when I click on that same thumbnail again (after clicking on a different thumbnail first) the description loads in the correct position (vertically centered with the thumbnails). How can I keep the image description from initially loading beyond the top margin? I want to be able to click on a thumbnail for the first time and the description appears vertically centered in the correct position.

Here is my code:

#block-yui_3_17_2_1_1709700216968_1936 {
  //hide main image
	.thumb-image {
    visibility:hidden;
    background-color:white!important;
  }
  
  // description
    .sqs-gallery-design-stacked-slide {
    z-index:1;
    padding-top:10px!important;
    padding-bottom: 10px!important;
  }
  .sqs-gallery-block-slideshow .meta {
    position: inherit!important;
    top: 0 !important;
    left: 50% !important;
    background-color: white!important;
    overflow: visible!important;
    min-width: 40% !important;
    max-width: 80px;
    margin-left: -75px!important;
    pointer-events: none;
  }
   .sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p{
    color:black!important;
    font-size: 24px;
    line-height:1.2em
  }
  .meta-title {
    color:#990000!important;
    font-family: 'Violine'!important;
    font-size: 40px;
    line-height:2em
  }
  .sqs-gallery-block-slideshow {
    pointer-events: none;
  }
  
  
  // thumbnails look
  .sqs-gallery-design-strip-slide {
    opacity: 1!important;
    margin-right: 10px;
    margin-left: 10px;
    border: 5px solid white!important;
    border-radius: 50%;
  }
.sqs-gallery-design-strip-slide:hover {
    background-color:#e7e6e6!important
  }
.sqs-gallery-design-strip-slide.sqs-active-slide {
  background-color:#e7e6e6!important;
  border: 5px solid black!important;
  border-radius: 50%;
  padding: 2px!important
  }
  
  
  //thumbnails position
 .sqs-gallery-design-strip .sqs-wrapper {
    width: 200% !important;
    left: 50% !important;
  	top:-75%!important;
    display: flex;
    flex-wrap: wrap;
  }
  .sqs-block .sqs-gallery-thumbnails .sqs-gallery-design-strip-slide {
    width: 20% !important;
  }
  .sqs-gallery-design-stacked {
    position: static;
    text-align: left;
    height: 100px !important;
  }
  .sqs-gallery-design-strip {
    overflow: visible !important;
  	width:20%!important;
    z-index:9998!important;
    margin-bottom: 30px!important
  }
} 

Here is the link the to screencast: https://www.loom.com/share/2d3037425e414b6db57690f9feb1e2c7?sid=085158a3-8a70-4bf6-839a-cd701598df2b

Here is the attachment of the screencast: Screen Recording 2024-03-06 at 11.18.05 AM.mov

Edited by EnrichedEducator
add link to video
Link to comment
  • Replies 3
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Posted (edited)
On 3/9/2024 at 3:23 AM, tuanphan said:

So you want click Left Image >> Show text on right? Can you share link to page in screenshot?

Or you can also use this approach, in my guide, I used Video, and Buttons, but you can repeat same with Image and Text

 

Correct! I think I figured it out for desktop view. On mobile it is still looks horrible, so I've replaced it with a different version.  Here is the link to the page (see the "core values" section).
https://www.theenrichededucator.com/aboutus

If you can help me figure out how to keep the circle images on the left from changing positions when the screen adjusts to a smaller width, that would be really helpful! Ideally, I'd like to keep the images displayed 2X2 regardless of the screen width.

This is how I would like the module to look on all screens.png

Here's my updated code:

//Core Values Module - desktop//
#block-yui_3_17_2_1_1709813932004_17418 {
  //description formatting
  .sqs-gallery-block-slideshow .meta {
    background-color: transparent!important;
    pointer-events: none;
    width:200%!important;
    overflow: visible !important;
    display:block!important
  }
  .sqs-gallery-block-slideshow .meta-inside {
    padding: 0px!important;
}
   .sqs-gallery-block-slideshow .meta .meta-description, .sqs-gallery-block-slideshow .meta .meta-description p{
    color:black!important;
    font-size: 18px!important;
     line-height:1.2em!important
  }
  .meta-title {
    color:#990000!important;
    font-family: 'Violine'!important;
    font-size: 30px;
    line-height:1.2em
  }
//make description non-click
  .sqs-gallery-block-slideshow {
    pointer-events: none;
  }
 //main image
  .sqs-gallery-design-stacked-slide img{
    opacity:0!important
}
//gallery container position and style
  .sqs-gallery-design-stacked {
  display: flex;
    height:300px!important;
    background-color:white!important;
}
.sqs-gallery-design-stacked-slide {
  order: 1;
  width: 100%;
  height: 100%;
  margin-left: 40%;
}
  .sqs-wrapper {
    position:static;
    overflow:visible!important;
    display: flex;
    flex-wrap: wrap;
    margin-left: 24px;
    
  }
//thumbnails positioning
  .sqs-gallery-design-strip {
    margin-left: 0;
    max-width: 70%;
    position: absolute;
    height: 100%;
    top: 0 !important;
    overflow:visible!important;
    display: flex;
    flex-wrap: wrap;
}
.sqs-gallery-design-strip-slide {
  margin-left: 0;
  width: 100%;
}
// thumbnails style
  .sqs-gallery-design-strip-slide {
    opacity: 1!important;
    margin-right: 10px;
    margin-left: 10px;
    border: 5px solid white!important;
    border-radius: 50%;
}
.sqs-gallery-design-strip-slide:hover {
    background-color:#e7e6e6!important
  }
.sqs-gallery-design-strip-slide.sqs-active-slide {
  background-color:#e7e6e6!important;
  border: 5px solid black!important;
  border-radius: 50%;
  padding: 2px!important
  }
}

 

Edited by EnrichedEducator
added updated code
Link to comment
  • Solution

Try this CSS code

@media screen and (max-width:991px) {
div#block-yui_3_17_2_1_1710084071588_10540 {
.slide {
    position: static !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.sqs-gallery-design-stacked {
    height: auto !important;
    display: grid !important;
    grid-template-columns: repeat(2,1fr) !important;
}

.sqs-gallery-design-stacked-slide img {
    width: 100% !important;
    height: auto !important;
    position: static !important;
}}
}

 

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.