Embed Multiple Models on One Page

Embedding two or more Matterport models on a single webpage can affect the performance of your website - in the worst case, multiple embedded models can make your browser become unresponsive, or crash altogether. 

That being said, if you want to include multiple Matterport models on a single page (similar to the layout of the Matterport Gallery), we recommend utilizing lightboxes with third party apps like Fancybox, or using the WP3D Models plugin with Wordpress. If you have coding experience, you can also create your own gallery from scratch - we'll outline each of these options below. 

Lightboxes

Lightboxes are, well, boxes that open on top of webpages. You can use these to directly embed a Matterport model, thus creating an entirely new window that lessens the strain on your main page.  

To see what this looks like, check out matterport.com/aec and click the orange "EXPLORE A 3D SPACE" button. 

matterport-com-aec.png

As mentioned above, this opens the model in a new window that is simple and easy to use: 

  1. To open the model, press the "Play" icon in the center of the window. 
  2. To return to the main page, simply click the "X", or click anywhere outside of the lightbox. 

Implementing Lightboxes  

As every website is different, implementing lightboxes depends on how your website or content management system (CMS) is set up. There are, however, tools that will help you implement lightboxes (as long as you have a basic understanding of HTML, CSS and Javascript). 

Try Fancybox 

Check out fancyapps.com - this service (called Fancybox) will provide you with a JavaScript lightbox library, built specifically for presenting a wide range of media types. There are detailed instructions in their help center that will walk you through the installation and implementation process. 

Wordpress WP3D Models plugin 

WP3D Models is a Wordpress plugin designed specifically for Matterport - you can read more about how WP3D Models work in their help center

Get Started on Develop your Own Gallery 

With the right amount of web design experience, you can create your own gallery - below are some tips that will help you get started on building your gallery 

You can use thumbnail images from your Matterport model

  1. Open your model in the Matterport Cloud. 
  2. Click the "Photos" icon under the "Media" tab. 
    thumbnail_share1.png
  3. At the top-right corner of each thumbnail, click the "Share thumbnail" icon. 
  4. This will provide you with a URL you can copy and use for each model featured in your gallery. 

thumbnail_share2.png

 

Have more questions? Submit a request