Jump to content

Matt143

Member
  • Posts

    1
  • Joined

  • Last visited

Everything posted by Matt143

  1. Hello, I was trying to accomplish something similar and wanted to share my steps. Hopefully this will be helpful to someone in the future. I was trying to build an interactive floor plan for an office space where selections of individual rooms on the full map would trigger a lightbox pop up with more room information. 1) First I purchased and installed the lightbox anything plugin. The plugin is really worth the cost and makes lightbox popups very easy. The instructions that come with the plugin are very easy to follow. 2) To make the final image map responsive I used some java script I downloaded on GitHub. If you hit go to file on the page you will want to download the js/imageMapResizer.js https://github.com/davidjbradshaw/image-map-resizer 3) I then added the java script to my site. Hit the plus icon next to Not Linked in the pages section. Scroll to the bottom of the popup and select Link. Where it says create new link select the gear icon. In the link editor select file and then upload the java script you downloaded there. Be sure to make note of the exact name it is uploaded as. 4) On my site I added a series of not linked pages to store the map image I wanted to use as well as all the popups. This will make more sense if you use the lightbox anything plugin as this is the typical setup to store these. For my example "Floor One Map Hold" was the image of the full floorplan I was using. Each room that I wanted to show up in the lightbox had its own page and number ex (floor 4) 5) To generate my html map I used the below site. It takes a little messing around with but the instructions on the site can help. https://image-map.weebly.com/ 6) Below is the code that it generated for my project. I highlighted some of the key points. Please note I removed my URL and added in the text ImageURLHere ImageURLHere - This is where you paste the url link for the full image you mapped. In my setup I had added the full floor plan image I was using in that Floor One Map Hold from the above step. So I opened that page in squarespace right clicked on the image and copied the address. You then paste that URL where I highlighted in the code. #lightbox_floor2 - this is an example of the links that you add to the html map to get the desired pages or images to open. As I was using the lightbox anything plugin and wanted my images to show up as a lightbox I have that prefix #lightbox_(pagename). But you can use any page link from your site there. /s/ImageMapResizermin.js - You will need to add in the source for the javascript code that was uploaded to your site in earlier steps. To find the link to add to this highlighted section go back to where you uploaded the code as shown in step 3. Click on the javascript code and hit save on the top left. The link will then appear for you to copy (see image references below). Code: 7) Now you are ready to embed this on your site. Open your desired page and hit the plus button to add a new item and choose embed. Editing the embed box you will get the content popup, select the </> and add your code. Save and you should be all set. Here is an example of how it worked on my site. This is a snippet of part of my full floor plan. If I click on the section labled 2 I get a lightbox popup with more information on that room and I can x out of the popup to select from the full map again. Best, Matt
×
×
  • 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.