Prev: Embedded 3D gallery Next: Embedded product frame
When a full embedded gallery is not an option, or more fine-grained control on the thumbnail placement is needed, it is possible to embed each design thumbnail independently.
A thumbnail may be integrated to any external web page using a <iframe> tag, like so:
<iframe type="text/html" width="250" height="350" src="//www.sculpteo.com/en/embed/thumbnail/23284182618746233915471266391450873072" frameborder="0" scrolling="no"></iframe>
This will create a 250x350 zone in the page where the design will appear, like so:
In this case, the design was already uploaded to Sculpteo’s website, and is identified by the number “23284182618746233915471266391450873072”. Several options that may be appended to the URL in the src attribute, to configure the appearance and behaviour of the thumbnail:
‘image’, ‘name’, ‘description’, ‘price’ (default: all) : A comma separated list of the thumbnail content.
‘details’, ‘gallery’, ‘0’ : action performed when the user clicks on the design, ‘0’ to disable
‘window’ (default), ‘frame’, ‘box’ : follow links either in the same page, in the same frame, or by overlaying a box containing the content
Widget integration and scripting¶
Then you may add a viewer anywhere you want in your web page by simply creating a <div> element with the “sculpteo_thumbnail” class. You may use CSS to position it and set its size, for example:
<div class="sculpteo_thumbnail" style="width: 250px; height: 350px; position: relative"></div>
Options are passed to the thumbnail at initialization time by adding attributes to the <div>. Additionally, all the attributes supported in ‘simple integration’ are also supported as attributes to the ‘<div>’ element, except for ‘thumbnail_content’ which is named simply ‘content’.
- bind(String event, function onevent(…))
Listen to event, arguments of callback function are event-dependent
- click(function onevent(…))
equivalent to bind(“click”, onevent)
- unbind(String event)
Stop listening to event
The following events are supported:
triggered by click on model, returns a design information object containing the design name, description and uuid