Embedded thumbnail

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.

Simple integration

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:

thumbnail_content

‘image’, ‘name’, ‘description’, ‘price’ (default: all) : A comma separated list of the thumbnail content.

click

‘details’, ‘gallery’, ‘0’ : action performed when the user clicks on the design, ‘0’ to disable

nav

‘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

To be able to display external files or script the thumbnail, a slightly more complex integration method must be used. First, you need to include a small bit of Javascript in the <head> section of your page:

<script src="//www.sculpteo.com/js/sculpteo.widget.js" type="text/javascript"></script>

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>

The Javascript included in the header will automatically turn this <div> element into a thumbnail for you.

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’.

Scripting is achieved by using the ‘sculpteo.thumbnail()’ javascript object. Several methods are provided via a fully asynchronous API:

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:

click(data)

triggered by click on model, returns a design information object containing the design name, description and uuid

Prev: Embedded 3D gallery Next: Embedded product frame

» webapi documentation » Embedding Sculpteo Web Components » Embedded thumbnail

Last update: 1970-01-01 01:00 (CET)