Streaming live at 10am (PST)

Carousel Cycle Pages or Images with Text tied to them


#1

I’m a non-coder looking for someone who can help.
I’ve built a template for an artist portfolio: http://bflynn.webflow.io

I want to allow users to cycle through all the images within any one chosen category type (media type, year, all works)
Currently, once users navigate to a specific work, they are then needing to scroll down to then select and view other works within said category.
It’s not ideal. I would like to have forward & backward arrows which could be clicked to advance to the next or last work, and make this controlled by the keyboard arrows, tapping, or swiping.
Note: You’ll notice there is both an image AND a video at the top of a works’ page. It will be one OR the other displayed ultimately.


#2

Hi @TJwebflow .

Is lightbox something you could use? https://university.webflow.com/article/lightbox


#3

I now realise that it may lend itself to my needs. Do you know @Sven_Erik_Slattedale if there is a way to append more text beside a lightbox image in case an artist wanted more than just name, media, date, and series name? I would like to have some styled text and a description associated with each image.


#4

Hi @TJwebflow . Sorry for my late reply.
To be honest, I’m not sure if you can style the lightbox in a way to add more text than the regular capture, but I don’t think you can.
You’re share only link is not working anymore, so I can’t see how your design looks like… so it makes it a bit difficult to come up with alternative ideas on how to solve this. However… I have been searching around a little bit, to see if I can come up with something that can be of any help.
The first is sabannas tutorial on making a cms custom lightbox. If you also scroll down the page a little, you will see there is a tutorial on how to connect lightboxes. This way, you can make the image as big as you want, and you can also add as much text as you want, and it will be easy for you customer to use cms collection to add new content. The back side of it is, the tutorial don’t show you how to add arrows like in Lightbox, but I’m pretty sure I’ve read a post here on the forum about this… so if you want, I can try to search for it. Here’s the link to the tutorial:

I also run into another tutorial on how to make a full CMS lightbox, But this will not help you with adding more text, so I don’t know if this will be useful at all, but you can have a look at it here:

I did get another thought, very different from all the above…but this depend very much on your design. Maybe one way to solve this issue with the text is to set a hover interaction on the lightbox thumbnail, so that the text will show before you open the lightbox? Something similar to what they do on this tutorial (only here they are using click interaction instead of hover): https://university.webflow.com/lesson/show-hide-elements-on-click-interactions.

Don’t know if any of this is of any help at all, but hopefully it can give some new ideas.


#5

I did find a tutorial on how to add those arrows too (Pagination). Link to tutorial here:


#6

Thank you so much @Sven_Erik_Slattedale !