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

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

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