blazingstar Posted April 1, 2020 Share Posted April 1, 2020 (edited) Site URL: https://www.blazingstargardens.com/ Hi all, I have one solution and one question that I'd like to share: First, I was looking for a way to add thumbnails below the "Design: Carousel" Product Item image gallery, like the way thumbnails display below the "Design: Slideshow" Product Item image gallery. The carousel design is preferable because it doesn't crop the images to vertical or horizontal like the slideshow design (it leaves them in their original landscape or portrait configuration). The slideshow design is nice because it display thumbnails for easier navigation to interesting product pictures. I thought it would be nice to have the Thumbnail gallery available on the Carousel product item image gallery design. This is the how I added thumbnails beneath the carousel design (added in Design>Custom CSS). (Caution: I am not a coder and and do not know much about css. I found some css code that @tuanphan shared for adding thumbnails to mobile screens and edited it until it worked. This might not be a good thing to do. @tuanphan if this is wrong, please let me know). I inserted this code into the Design>Custom CSS page: .ProductItem-gallery-thumbnails { display: flex; } .ProductItem-gallery { flex-direction: column-reverse; } .ProductItem-gallery-slides { width: 100%; } Second, I noticed that on some of my product pages (such as https://www.blazingstargardens.com/plants/butterfly-milkweed-asclepias-tuberosa) I have too many images (sometimes 10 or 11, I should probably just thin them...) and the thumbnails get cut off at 7 or 8 thumbnails and there is no way to see the rest of the thumbnails. You can see all thumbnails when the Gallery Thumbnail Placement is to the Side, but I prefer them Below. Is there a way to wrap the thumbnails into two lines below the main image? Thank you Edited April 1, 2020 by blazingstar kindandbrave 1 Link to comment
TheDetourEffect Posted August 31, 2021 Share Posted August 31, 2021 (edited) Thanks for this! I wonder how I would do the same thing but for regular image galleries rather than product galleries? I guess replace ".ProductItem-gallery" with something else like ".image-gallery" or ".sqs-gallery-design-strip"? Edited August 31, 2021 by TheDetourEffect more ideas Link to comment
tuanphan Posted September 1, 2021 Share Posted September 1, 2021 3 hours ago, TheDetourEffect said: Thanks for this! I wonder how I would do the same thing but for regular image galleries rather than product galleries? I guess replace ".ProductItem-gallery" with something else like ".image-gallery" or ".sqs-gallery-design-strip"? Can you share link to page where you added regular gallries? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
TheDetourEffect Posted September 1, 2021 Share Posted September 1, 2021 51 minutes ago, tuanphan said: Can you share link to page where you added regular gallries? Here's one page where I have a bunch of slideshow galleries: https://thedetoureffect.com/blog/grand-canyon-trip-planning I would prefer all those slideshows to be carousel-style instead, but I haven't made them into carousels yet because then they wouldn't have thumbnails or titles. Link to comment
IAA Posted March 18, 2022 Share Posted March 18, 2022 On 4/1/2020 at 3:51 PM, blazingstar said: Site URL: https://www.blazingstargardens.com/ Hi all, I have one solution and one question that I'd like to share: First, I was looking for a way to add thumbnails below the "Design: Carousel" Product Item image gallery, like the way thumbnails display below the "Design: Slideshow" Product Item image gallery. The carousel design is preferable because it doesn't crop the images to vertical or horizontal like the slideshow design (it leaves them in their original landscape or portrait configuration). The slideshow design is nice because it display thumbnails for easier navigation to interesting product pictures. I thought it would be nice to have the Thumbnail gallery available on the Carousel product item image gallery design. This is the how I added thumbnails beneath the carousel design (added in Design>Custom CSS). (Caution: I am not a coder and and do not know much about css. I found some css code that @tuanphan shared for adding thumbnails to mobile screens and edited it until it worked. This might not be a good thing to do. @tuanphan if this is wrong, please let me know). I inserted this code into the Design>Custom CSS page: .ProductItem-gallery-thumbnails { display: flex; } .ProductItem-gallery { flex-direction: column-reverse; } .ProductItem-gallery-slides { width: 100%; } Second, I noticed that on some of my product pages (such as https://www.blazingstargardens.com/plants/butterfly-milkweed-asclepias-tuberosa) I have too many images (sometimes 10 or 11, I should probably just thin them...) and the thumbnails get cut off at 7 or 8 thumbnails and there is no way to see the rest of the thumbnails. You can see all thumbnails when the Gallery Thumbnail Placement is to the Side, but I prefer them Below. Is there a way to wrap the thumbnails into two lines below the main image? Thank you Hi I wonder if someone can help me with this one. I've tried the code, but it didn't work for me. I'm using version 7.1 Any help will be greatly appreciated. :) Thanks Link to comment
tuanphan Posted March 21, 2022 Share Posted March 21, 2022 On 3/18/2022 at 7:27 PM, IAA said: Hi I wonder if someone can help me with this one. I've tried the code, but it didn't work for me. I'm using version 7.1 Any help will be greatly appreciated. :) Thanks Can you share link to a product? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
IAA Posted March 28, 2022 Share Posted March 28, 2022 On 3/21/2022 at 7:12 AM, tuanphan said: Can you share link to a product? Hi Tuanphan, Sorry, I missed this message. https://iheartpapercuts.squarespace.com/ Password: Tuesday12. Also, do you also have a code for moving to the main nav to the left hand side of the page? Like this" Thank you very much for your help. Ify Link to comment
IAA Posted March 29, 2022 Share Posted March 29, 2022 On 3/28/2022 at 5:29 PM, IAA said: Hi Tuanphan, Sorry, I missed this message. https://iheartpapercuts.squarespace.com/ Password: Tuesday12. Also, do you also have a code for moving to the main nav to the left hand side of the page? Like this" Thank you very much for your help. Ify https://iheartpapercuts.squarespace.com/shop/p/abc Link to comment
tuanphan Posted March 31, 2022 Share Posted March 31, 2022 On 3/30/2022 at 5:50 AM, IAA said: https://iheartpapercuts.squarespace.com/shop/p/abc Hi, #1. You want thumbnails appear in 2 lines? #2. No idea to this. I remember there is a course on how to do this Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
IAA Posted April 4, 2022 Share Posted April 4, 2022 On 3/31/2022 at 8:09 AM, tuanphan said: Hi, #1. You want thumbnails appear in 2 lines? #2. No idea to this. I remember there is a course on how to do this One line please. Link to comment
jfurniture Posted May 27, 2022 Share Posted May 27, 2022 @IAA Did you find a resolution for this? I just made the move from 7 to 7.1 and it would be great to still see the thumbnails... Thanks! 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