Jump to content

Update image when corresponding text is clicked

Recommended Posts

I'd like to have an image block that changes what image is shown based on which item in list has been clicked. In other words, when you click on the second item in a list, the image on the left changes to show a different image that is associated with that list item. See below for a screenshot of what I am trying to achieve. Ability to rotate through list items and corresponding photos would be nice but is not essential. 

My website is using Brine template. 

Thanks for any suggestions or tips!

 

874906434_ScreenShot2020-03-09at11_47_18AM.thumb.png.7c4e1753475e82929ea497cd51dc0482.png

Link to comment

Hi @_kate,

I've used the code from Image on Hover Collection (aff) for this with great results. There are versions for both Squarespace 7.0 and 7.1

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment

You can search Google with some keywords, eg: jquery change image on text click, change image on click...

eg this code: https://codepen.io/mnosova/pen/oddBxR

To do this is a bit difficult and time-consuming, it's outside the free support range, so I just gave the above suggestion. You can search, test the code, and can ask more questions, if I know I will answer.

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
  • 1 year later...
  • 7 months later...
On 3/9/2020 at 10:33 PM, _kate said:

I'd like to have an image block that changes what image is shown based on which item in list has been clicked. In other words, when you click on the second item in a list, the image on the left changes to show a different image that is associated with that list item. See below for a screenshot of what I am trying to achieve. Ability to rotate through list items and corresponding photos would be nice but is not essential. 

My website is using Brine template. 

Thanks for any suggestions or tips!

 

874906434_ScreenShot2020-03-09at11_47_18AM.thumb.png.7c4e1753475e82929ea497cd51dc0482.png

 

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.