Autospin collection

collections
(Astro Logix) #1

Hi -

Is it possible to embed a collection and set the models to automatically spin?

Thanks,
Rob

(Moroplogo) #2

It is not possible actually (there is only option autostart) but I suppose you can to make it if you create your playlist with a script !

(Astro Logix) #3

Hmmm, sounds technical. I am using an iframe to place the collection on a page, do you know what extra code I need to add to make this work?

(Moroplogo) #4

I made a simple example of a playlist with the models to automatically spin that you can see here :
https://www.oviaivo.net/test-embed-collection.html
The code source is not perfect but it operates correctly.
You may use the following code for your work but for each model , you need to look for the link to the thumbnail.

<iframe id='ifr' src="https://sketchfab.com/models/8a27e4da66d24ad6be0744e666f55e66/embed?autospin=0.2&amp;autostart=1" frameborder="0" scrolling="no" width="711" height="400"></iframe>

  <nav>
  <ul> 
  <li>
  <div style="background-image: url(https://media.sketchfab.com/urls/8a27e4da66d24ad6be0744e666f55e66/dist/thumbnails/e03ab8c339f8428c8f426e35090c16cd/720x405.jpeg); height: 150px; width: 150px; background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/8a27e4da66d24ad6be0744e666f55e66/embed?autospin=0.2&amp;autostart=1";'></div>
    </li>
    <li>
    <div style="background-image: url(https://media.sketchfab.com/urls/2bc77a3ab36248deb14c6132ae73106f/dist/thumbnails/763dbb7311ff45aa8eadd0f0808652f8/640x360.jpeg); height: 150px; width: 150px; background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/2bc77a3ab36248deb14c6132ae73106f/embed?autospin=0.2&amp;autostart=1";'></div>
    </li>
    <li>
    <div style="background-image: url(https://media.sketchfab.com/urls/d91b080b9963425aa1385edeba6c1924/dist/thumbnails/d7071b51f5e9402fbbad75f913b06485/640x360.jpeg); height: 150px; width: 150px; background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/d91b080b9963425aa1385edeba6c1924/embed?autospin=0.2&amp;autostart=1";'></div>
    </li>
    <li>
    <div style="background-image: url(https://media.sketchfab.com/urls/691e05b303f949a3b28e79bdbe2c776f/dist/thumbnails/996f0838cc8246889f57eec6ce4527bd/640x360.jpeg); height: 150px; width: 150px; background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/691e05b303f949a3b28e79bdbe2c776f/embed?autospin=0.2&amp;autostart=1";'></div>
    </li>
    </ul>
    </nav>
(Astro Logix) #5

Fantastic! This will be very useful for me, thanks for the code :smiley:

(Astro Logix) #6

Moroplogo -

I'm playing around with your code, is there a way to make the thumbnails responsive? Eg shrink when the screen shrinks?

Thanks,
Rob

(Moroplogo) #7

You can try this simple code :
( you can see the result here :
https://www.oviaivo.net/test-embed-collection.html )

<html lang="en">
<head>
<style>
html,body{  
  height:100%;
  margin:0;
  padding:0;
}
</style>
</head>
<body style="text-align: center">
<iframe id="ifr" style="width:640px; height: 480px;" src="https://sketchfab.com/models/8a27e4da66d24ad6be0744e666f55e66/embed?autospin=0.2&amp;autostart=1" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<br>
<div style=" margin-left: auto; margin-right: auto; width:50%; height: 50%;" >
<div style="background-image: url(https://media.sketchfab.com/urls/8a27e4da66d24ad6be0744e666f55e66/dist/thumbnails/e03ab8c339f8428c8f426e35090c16cd/720x405.jpeg); width: 20%;min-width: 50px; height: 100%;min-height: 50px;  background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/8a27e4da66d24ad6be0744e666f55e66/embed?autospin=0.2&amp;autostart=1";'></div>
<div style="background-image: url(https://media.sketchfab.com/urls/2bc77a3ab36248deb14c6132ae73106f/dist/thumbnails/763dbb7311ff45aa8eadd0f0808652f8/640x360.jpeg);  width: 20%;min-width: 50px; height: 100%;min-height: 50px;   background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/2bc77a3ab36248deb14c6132ae73106f/embed?autospin=0.2&amp;autostart=1";'></div>
<div style="background-image: url(https://media.sketchfab.com/urls/d91b080b9963425aa1385edeba6c1924/dist/thumbnails/d7071b51f5e9402fbbad75f913b06485/640x360.jpeg);  width: 20%;min-width: 50px; height: 100%;min-height: 50px;    background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/d91b080b9963425aa1385edeba6c1924/embed?autospin=0.2&amp;autostart=1";'></div>
<div style="background-image: url(https://media.sketchfab.com/urls/691e05b303f949a3b28e79bdbe2c776f/dist/thumbnails/996f0838cc8246889f57eec6ce4527bd/640x360.jpeg);   width: 20%;min-width: 50px; height: 100%;min-height: 50px;   background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/691e05b303f949a3b28e79bdbe2c776f/embed?autospin=0.2&amp;autostart=1";'></div>
</div>

or this code ( using flex )

<html lang="en">
<head>
<style>
html,body{  
  height:100%;
  margin:0;
  padding:0;
}
</style>
</head>
<body style="text-align: center">
<iframe id="ifr" style="width:640px; height: 480px;" src="https://sketchfab.com/models/8a27e4da66d24ad6be0744e666f55e66/embed?autospin=0.2&amp;autostart=1" frameborder="0" allowvr allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" onmousewheel=""></iframe>
<br>
<div style=" display: flex; justify-content: space-around; margin-left: auto; margin-right: auto; width:35%;" >
<div style="background-image: url(https://media.sketchfab.com/urls/8a27e4da66d24ad6be0744e666f55e66/dist/thumbnails/e03ab8c339f8428c8f426e35090c16cd/720x405.jpeg); width: 20%;min-width: 50px; height: 100%;min-height: 50px;  background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/8a27e4da66d24ad6be0744e666f55e66/embed?autospin=0.2&amp;autostart=1";'></div>
<div style="background-image: url(https://media.sketchfab.com/urls/2bc77a3ab36248deb14c6132ae73106f/dist/thumbnails/763dbb7311ff45aa8eadd0f0808652f8/640x360.jpeg);  width: 20%;min-width: 50px; height: 100%;min-height: 50px;   background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/2bc77a3ab36248deb14c6132ae73106f/embed?autospin=0.2&amp;autostart=1";'></div>
<div style="background-image: url(https://media.sketchfab.com/urls/d91b080b9963425aa1385edeba6c1924/dist/thumbnails/d7071b51f5e9402fbbad75f913b06485/640x360.jpeg);  width: 20%;min-width: 50px; height: 100%;min-height: 50px;    background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/d91b080b9963425aa1385edeba6c1924/embed?autospin=0.2&amp;autostart=1";'></div>
<div style="background-image: url(https://media.sketchfab.com/urls/691e05b303f949a3b28e79bdbe2c776f/dist/thumbnails/996f0838cc8246889f57eec6ce4527bd/640x360.jpeg);   width: 20%;min-width: 50px; height: 100%;min-height: 50px;   background-position: center; background-size: cover; cursor: pointer; display: inline-block" onmouseover="" onClick='document.getElementById("ifr").src="https://sketchfab.com/models/691e05b303f949a3b28e79bdbe2c776f/embed?autospin=0.2&amp;autostart=1";'></div>
</div>

But the result will be better if you use a framework like materialise or bootstrap .
Good luck!

(Mar K) #8

Thanks! Finally, my helicopter is moving. :slight_smile:
http://leonardo.cadtip.eu/
Can not change the direction of rotation? :-S
Mar.K

(Moroplogo) #9

@mar.k To change the direction of rotation you put a negative value in "autospin" parameter like this :

https://sketchfab.com/models/2c7e9bf67ab04da8ab6601c95aa719b4/embed?autospin=-0.2&autostart=1

(Mar K) #10

Perfectly..! Thanks :slight_smile:

(Astro Logix) #11

Fantastic! Thanks for this, I'll have a play around.

Is it possible for the thumbnails to shrink vertically and horizontally?