Jump to content

Creating a Team page with "read more" lightbox

Recommended Posts

Posted (edited)

Hey guys. So I'm trying to create a team page for a client and they want to include Name, title and bio information with each photo. What I want to do is just have the photo and their name and title with a read more link that opens a light box window which will show the photo and their bio text. 

You guys have any suggestions for how am I pull that off? Hell, I even settle for a read more link that expands the section to show their bio info... Only been using squarespace for a few months and I'm still trying to figure out what it can do and what it can't... Any suggestions will be greatly appreciated!

Edited by ChrisGates
Clarity
  • Replies 2
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

You can use a Lightbox Plugin (affiliate link) to achieve this.

But if you have no budget to do this, we can achieve it with custom code (but will time-consuming)

Or you can consider using accordion, I mean show photo, name, title and a short of bio + read more text, if users click read more will show full info + change to read less

If you still want to use Lightbox, my idea is, you can add some sections to Footer with your desired lightbox layout, then when users click on each name/title/bio on team page >> will show a lightbox with content from section. The disadvantage of this method is that when adding a new team member, you will need to add some extra code to the old code

What do you think?

 

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!)

  • 7 months later...

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.