Connecting 3D/360° Virtual Tour Buyers to Service Providers powered by
the Most In-Depth, Relevant and Up-to-Date Content and Training for the 3D/360° Community
Join FREE! 50+ Benefits
Become a Virtual Tour Pro
Learn How to Plan, Shoot, Edit,
Get Clients and Get Paid
Succeed Faster with
Virtual Tour Pro
Course Created By Ben Claremont
Save 15% with Coupon Code WGANVTP
Enroll in Course
Recommended by
Dan Smigrod, WGAN Founder
Just Getting Started with
Real Estate Photography
and Matterport 3D Tours?
Succeed Faster with
Real Estate Photographer Pro
Course Created by Eli Jones
Save $400 with
Enroll in Course
Recommended by
Dan Smigrod, WGAN Founder
One Order  |  One Quote  |  One Contact
Book Multiple USA Commercial Locations
  • ✔  As-Builts
  • ✔  Construction Progress
  • ✔  Facillities Management
Last 24 Hours: 475 Unique Visitors
7,344 WGAN Members in 140 Countries
Last 30 Days: 55,839 Page Views | 18,228 Unique Visitors | 59 New Members
We Get Around Network Forum
WGAN-TV Training U in Matterport
WGAN Text2Win
Sweepstakes | #20
to 877-805-0960
for Your Chance to Win . . .
United States and Canada only; message and data rates may apply; 10 messages per month; reply STOP to 877-805-0960 to cancel. Texting and Random Drawing powered by SimpleTexting.
WGAN-TV: Now Playing
How to DIY Virtually Stage a Matterport
Tour using CAPTUR3D with Fracesca Tosolini

How to get the space to open in a new window3628

terrygrant private msg quote post Address this user
I am setting up my website and need to know how to get the embed code that matterport sends me to open full screen when the thumbnail is clicked on (I have reduced the frame size as I want a gallery). Can anyone help me with this?

<iframe width="310" height="250" src="" frameborder="0" allowfullscreen></iframe>


Post 1 IP   flag post
homepagerealty private msg quote post Address this user
You're using the embed code, so you'll have to hyperlink a custom thumbnail image instead. Use the following example with your own image URL in the src tag to have its work.

<a href="" target="_blank"><img src="IMAGE URL GOES HERE" width="310" height="250"></a>
Post 2 IP   flag post
terrygrant private msg quote post Address this user
That's really helpful thanks very much.

Is is it possible to make it start as a non full screen separate window so it is clear how to get back/out?

And is there a source of detailed information about this side of things (Short of learning full blown HTML :-) ?

Thanks again

Post 3 IP   flag post
homepagerealty private msg quote post Address this user
That kind of coding would have to be on Matterport's side, but since its loading a WebGL or Unity box with all the assets, I don't think there is a way to click inside Matterport and have it load somewhere else through their embed/link.

I've not seen a resource, but its what we use in office (theres a web guy) to get stuff done.
Post 4 IP   flag post
Frisco, Texas
Metroplex360 private msg quote post Address this user
If you are using WordPress, you might like my shortcode plugin that uses a light box overlay.
Post 5 IP   flag post
UserName private msg quote post Address this user
Do you want to give users the ability to click an image thumbnail and switch to fullscreen in the current tab? Or open a separate popup window? Or open in fullscreen in a different tab? If so, you can do that with a little code that calls the fullscreen api that works in all modern browser.

See it in action by clicking ON the picture that's on this demo page. Click that' page's button only puts you in fullscreen mode without enlarging the picture. Click the image and it image will appear in fullscreen mode. In your code, you'd simply replace that image tag with your iframe code and give the iframe an ID value. You might also need to add an iframe class to the style sheet that sets the iframe's display value to block and give height and width CSS values of 100%.

Note: To make this work, you'd have to click a thumbnail PHOTO of your model -- not the model itself. Clicking a model causes it to "play." In your HTML you could overlay a photo of the model (that you made via your Snipping Tool) and position that photo on top of the real model (or simply make the real model invisible initially.) When people clicked that photo, which looks like the modle, the code runs, hides the photo and reveals the actual model running in fullscreen mode.

You could also display a button that makes a model appear in fullscreen when users click the button. However, I'm not sure why you don't just let users click the fullscreen icon that's already visible in a model's bottom-right corner. If you make your own fullscreen functionality, people may not be able to click the model's fullscreen icon to get out of fullscreen. They'd have to remember that the ESC key does that. If you're shooting for popup windows, remember that some users some may have popup blockers running.

You also have the option of showing a slider people could use to gradually resize a model. It's even possible to give people the ability to drag a model with a mouse and resize it using a mouse. You'll have to do a little coding though but you'd have a bit of extra fun.
Post 6 IP   flag post
83841 6 6
This topic is archived. Start new topic?