Sample timeline configurations

Timeline configurations

Here are some of the sample timeline configurations, just so you don't have to look into the source code of each of the examples to see the variable names.

MIT Nobel Prize Example - link

This example uses ex:start, ex:marker, ex:bubbleWidth, ex:bubbleHeight, and a custom lens. If no custom lens is specified, it the popup bubble will show the default lens.

<div ex:role="exhibit-view"
     ex:viewClass="Exhibit.TimelineView"
     ex:start=".nobel-year"
     ex:marker=".discipline"
     ex:bubbleWidth="150"
     ex:bubbleHeight="150">
            <div ex:role="exhibit-lens" class="nobelist-timeline-lens">
                <img ex:src-content=".imageURL" />
                <div><span ex:content=".label"></span></div>

                <div>
                    <span ex:content=".discipline" class="discipline"></span>, 
                    <span ex:content=".nobel-year" class="year"></span>
                </div>
            </div>
</div>

US Presidents Example - link

This example uses ex:label, ex:proxy, ex:start, ex:end, ex:marker, ex:bubbleWidth, and ex:bubbleHeight.

<div ex:role="exhibit-view"
     ex:viewClass="Exhibit.TimelineView"
     ex:label="Terms"
     ex:proxy=".presidency"
     ex:start=".inDate"
     ex:end=".outDate"
     ex:marker=".party"
     ex:bubbleWidth="320"
     ex:bubbleHeight="200">
</div>

Breakfast Cereal Example - link

This example uses ex:start, ex:marker,ex:topBandIntervalPixels, ex:bottomBandIntervalPixels, ex:bubbleWidth, ex:bubbleHeight, ex:densityFactor.

<div ex:role="exhibit-view" 
     ex:viewClass="Exhibit.TimelineView"
     ex:start=".decade"
     ex:marker=".brand"
     ex:topBandIntervalPixels="250"
     ex:bottomBandIntervalPixels="400"
     ex:bubbleWidth="400"
     ex:bubbleHeight="250"
     ex:densityFactor="1">
</div>