Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding an image/gallery slideshow with animation like in the given sample


sheriipop

Question

Recommended Posts

  • 0

Hello,

On 7.1, adding a slideshow in the way that you are talking about and shown in the example above is not possible. The slideshow options are limited to specific pages instead of blocks unfortunately.

However, 7.0 templates support these Gallery/Slideshow blocks.

If you are using 7.1, you'll need to use custom code. You can build a slideshow using a Javascript library or it is also possible to build a simple slideshow using CSS.

 

Link to comment
  • 0
17 hours ago, Wolfsilon said:

Hello,

On 7.1, adding a slideshow in the way that you are talking about and shown in the example above is not possible. The slideshow options are limited to specific pages instead of blocks unfortunately.

However, 7.0 templates support these Gallery/Slideshow blocks.

If you are using 7.1, you'll need to use custom code. You can build a slideshow using a Javascript library or it is also possible to build a simple slideshow using CSS.

 

Hi! Yes, I'm on 7.1, and had thought that CSS might be the only answer. Do you know of any resources for it? Thanks!

Link to comment
  • 0
5 minutes ago, louieandthird said:

Hi! Yes, I'm on 7.1, and had thought that CSS might be the only answer. Do you know of any resources for it? Thanks!

Add  a slideshow on top of the page, we'll see how to edit it using css

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
6 hours ago, louieandthird said:

Here you go – thanks!

https://www.sherriedickinson.com

PW: sdsite

try

#collection-606c538c686fde5fa29b74d3 article.sections {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
}
#collection-606c538c686fde5fa29b74d3 article.sections section {
  width: 100%;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="60df4586f2f26769e1955272"] {
  width: 50%;
  float: left;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="606c53a1bf00740418d004c3"] {
  width: 50%;
  float: left;
}

 

image.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
10 minutes ago, bangank36 said:

try

#collection-606c538c686fde5fa29b74d3 article.sections {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
}
#collection-606c538c686fde5fa29b74d3 article.sections section {
  width: 100%;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="60df4586f2f26769e1955272"] {
  width: 50%;
  float: left;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="606c53a1bf00740418d004c3"] {
  width: 50%;
  float: left;
}

 

image.png

@bangank36 Thank you so much for the code! How can I make the slideshow bleed through the site header as well? Just like the site below.

https://outset-la.com

Link to comment
  • 0
19 minutes ago, louieandthird said:

@bangank36 Thank you so much for the code! How can I make the slideshow bleed through the site header as well? Just like the site below.

https://outset-la.com

try 

#collection-606c538c686fde5fa29b74d3 article.sections {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
}
#collection-606c538c686fde5fa29b74d3 article.sections section {
  width: 100%;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="60df4586f2f26769e1955272"] {
  width: 50%;
  float: left;
  padding-top: 0 !important;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="606c53a1bf00740418d004c3"] {
  width: 50%;
  float: left;
}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Youtube Gallery for Squarespace
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
1 hour ago, bangank36 said:

try 

#collection-606c538c686fde5fa29b74d3 article.sections {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
}
#collection-606c538c686fde5fa29b74d3 article.sections section {
  width: 100%;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="60df4586f2f26769e1955272"] {
  width: 50%;
  float: left;
  padding-top: 0 !important;
}
#collection-606c538c686fde5fa29b74d3 .sections section[data-section-id="606c53a1bf00740418d004c3"] {
  width: 50%;
  float: left;
}

 

Thank you so much @bangank36!! 

Link to comment
  • 0

@bangank36

This is awesome! Learned something new today! How could you use something like this on a page with other sections that don't need to be placed next to each other? Say, if I wanted to add a section underneath the slideshow and text? Because adding a section with this code would place the next section to the right of the text. 

Link to comment
  • 0

@louieandthird Do you still need help?

Also, do you need fix these? We will help

Site URL: https://www.sherriedickinson.com/

1. (Mobile – Footer) make footer links to 2 columns

sherriedickinson.com-01-min.png

 

2. (Mobile/Tablet – homepage) Image don’t show in full size

 

sherriedickinson.com-02-min.png

3. (Tablet – Footer) Make “© Sherrie Dickinson 2021” in the same line

 

sherriedickinson.com-03-min.png

4. (Tablet/Mobile – About)  Image disappear.

https://www.sherriedickinson.com/about

sherriedickinson.com-04-min.png

5. (Mobile/Tablet – Portfolio > Content creation) Image don’t show in full size, want to resize image? Increase text width and reduce space above/below text?

https://www.sherriedickinson.com/creatives

sherriedickinson.com-05-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/11/2021 at 7:32 AM, tuanphan said:

@louieandthird Do you still need help?

Also, do you need fix these? We will help

Site URL: https://www.sherriedickinson.com/

1. (Mobile – Footer) make footer links to 2 columns

sherriedickinson.com-01-min.png

 

2. (Mobile/Tablet – homepage) Image don’t show in full size

 

sherriedickinson.com-02-min.png

3. (Tablet – Footer) Make “© Sherrie Dickinson 2021” in the same line

 

sherriedickinson.com-03-min.png

4. (Tablet/Mobile – About)  Image disappear.

https://www.sherriedickinson.com/about

sherriedickinson.com-04-min.png

5. (Mobile/Tablet – Portfolio > Content creation) Image don’t show in full size, want to resize image? Increase text width and reduce space above/below text?

https://www.sherriedickinson.com/creatives

sherriedickinson.com-05-min.png

@tuanphan oh, wow! I didn't realize all of those issues before. Yes, please help if it's no trouble! Thank you so much!!

Link to comment
  • 0
11 hours ago, louieandthird said:

@tuanphan oh, wow! I didn't realize all of those issues before. Yes, please help if it's no trouble! Thank you so much!!

Q1. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(-n+2) {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(3) {
    clear: left;
}
}

Q2. Mobile, do you want to stacked them?

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
8 hours ago, tuanphan said:

Q1. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(-n+2) {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(3) {
    clear: left;
}
}

Q2. Mobile, do you want to stacked them?

 

Yes, let's stack them, please!

Link to comment
  • 0
19 hours ago, louieandthird said:

Yes, let's stack them, please!

Add to Design  >Custom CSS

/* Split section on tablet-mobile */
@media screen and (max-width:991px) {
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
}
#collection-606c538c686fde5fa29b74d3 article.sections {
    flex-wrap: wrap !important;
}
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
    min-height: unset !important;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
3 hours ago, tuanphan said:

Add to Design  >Custom CSS

/* Split section on tablet-mobile */
@media screen and (max-width:991px) {
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
}
#collection-606c538c686fde5fa29b74d3 article.sections {
    flex-wrap: wrap !important;
}
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
    min-height: unset !important;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

 

This code is giving this preview?

Screen Shot 2021-07-15 at 07.24.34.png

Link to comment
  • 0
17 hours ago, louieandthird said:

This code is giving this preview?

Screen Shot 2021-07-15 at 07.24.34.png

Missing 1 code. Try this new code

/* Split section on tablet-mobile */
@media screen and (max-width:991px) {
section[data-section-id="606c53a1bf00740418d004c3"], #collection-606c538c686fde5fa29b74d3 article.sections section {
    width: 100% !important;
    float: none !important;
}
#collection-606c538c686fde5fa29b74d3 article.sections {
    flex-wrap: wrap !important;
}
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
    min-height: unset !important;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/16/2021 at 12:31 AM, tuanphan said:

Missing 1 code. Try this new code

/* Split section on tablet-mobile */
@media screen and (max-width:991px) {
section[data-section-id="606c53a1bf00740418d004c3"], #collection-606c538c686fde5fa29b74d3 article.sections section {
    width: 100% !important;
    float: none !important;
}
#collection-606c538c686fde5fa29b74d3 article.sections {
    flex-wrap: wrap !important;
}
section[data-section-id="606c53a1bf00740418d004c3"] {
    width: 100% !important;
    float: none !important;
    min-height: unset !important;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 40vh !important;
}
}

 

Thank you!!

 

Link to comment
  • 0
Posted (edited)
On 7/14/2021 at 12:48 AM, tuanphan said:

Q1. Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(-n+2) {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6:nth-child(2)>.row .span-2:nth-child(3) {
    clear: left;
}
}

Q2. Mobile, do you want to stacked them?

 

The footer code to make 2 columns on mobile is no longer working.. 😕

Edited by louieandthird
Link to comment
  • 0
16 hours ago, louieandthird said:

The footer code to make 2 columns on mobile is no longer working.. 😕

Use new code

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3 {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3:nth-child(2n+1) {
    clear: left;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
14 hours ago, tuanphan said:

Use new code

/* Mobile */
@media screen and (max-width:640px) {
/* Footer 2 columns */
div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3 {
    width: 40% !important;
    float: left !important;
}
div#page-section-60a9baaff1f34945c7e6029d .span-6 .span-3:nth-child(2n+1) {
    clear: left;
}
}

 

Thank you!! 

Link to comment
  • 0
21 hours ago, tuanphan said:

Q3. 4. It looks like you fixed. Do you need help with Q5?

Yes to Q5, please! Also, for Q4 I'd actually like the overlapping images to look the same on mobile view as it does on desktop view. I haven't found anything yet to help with that.

Link to comment
  • 0
On 7/23/2021 at 12:26 PM, louieandthird said:

Yes to Q5, please! Also, for Q4 I'd actually like the overlapping images to look the same on mobile view as it does on desktop view. I haven't found anything yet to help with that.

Q5. Add to Design > Custom CSS

/* Reel responsive */
@media screen and (max-width:991px) {
.gallery-reel {
    height: 35vh !important;
}
}

Q4. If overlap on mobile, text/image will be very small.

 I think stacked is better. Also do you want to move image to above text?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/24/2021 at 7:08 PM, tuanphan said:

Q5. Add to Design > Custom CSS

/* Reel responsive */
@media screen and (max-width:991px) {
.gallery-reel {
    height: 35vh !important;
}
}

Q4. If overlap on mobile, text/image will be very small.

 I think stacked is better. Also do you want to move image to above text?

Q5. Thank you for the code!!

Q4. I'd like to see how it would look with the code first, please? 

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...