dojox.widget.rotator.ThumbnailController¶
| Authors: | Chris Barber |
|---|---|
| Project owner: | Chris Barber |
| Available: | since V1.4.1 |
A controller that manipulates a dojox.widget.Rotator or dojox.widget.AutoRotator by displaying thumbnails for each pane.
Introduction¶
The ThumbnailController will look at each of the rotator’s panes and only if the node is an <img> tag, then it will create an thumbnail of the pane’s image using the <img> tag’s “thumbsrc” or “src” attribute.
You may have multiple Controllers tied to a single Rotator instance.
The size of the thumbnails and the style of the selected thumbnail is controlled using CSS. The Controller’s DOM node may also be styled for positioning or other styled preferences.
Usage¶
| Parameter | Type | Description |
|---|---|---|
| rotator | string | The name of an instance of a Rotator widget defined by jsId. |
Examples¶
Programmatic example¶
WARNING! Following example is just a template and not a real example. The Dojo version on Dojo Campus doesn’t contain the ThumbnailController yet.
<style type="text/css">
.rotator{
background-color:#fff;
border:solid 1px #e5e5e5;
width:400px;
height:180px;
overflow:hidden;
}
.pane{
background-color:#fff;
width:400px;
height:180px;
overflow:hidden;
padding: 10px;
}
.pane0{
background-color:#fff79e;
}
.pane1{
background-color:#ffd4a0;
}
.pane2{
background-color:#ffa0a0;
}
</style>
<script type="text/javascript">
dojo.require("dojox.widget.AutoRotator");
dojo.require("dojox.widget.rotator.Controller");
dojo.require("dojox.widget.rotator.Fade");
dojo.addOnLoad(function(){
var myAutoRotatorInstance1 = new dojox.widget.AutoRotator(
{
transition: "dojox.widget.rotator.fade",
duration: 2500,
pauseOnManualChange: true,
suspendOnHover: true,
panes: [
{ className: "pane pane0", innerHTML: "<h3>Dojo</h3><p>Tons of features like CSS-based queries, event handling, animations, Ajax, class-based programming, and a package system</p>" },
{ className: "pane pane1", innerHTML: "<h3>Dijit</h3><p>Dojo's themeable, accessible, easy-to-customize UI Library</p>" },
{ className: "pane pane2", innerHTML: "<h3>DojoX</h3><p>Dojo eXtensions</p>" }
]
},
dojo.byId("myAutoRotator1")
);
new dojox.widget.rotator.Controller(
{ rotator: myAutoRotatorInstance1 },
dojo.byId("myRotatorController")
);
});
</script>
<div id="myAutoRotator1" class="rotator"></div>
<div id="myRotatorController"></div>
<button onclick="dojo.publish('myAutoRotator1/rotator/control', ['prev']);">Prev</button>
<button onclick="dojo.publish('myAutoRotator1/rotator/control', ['next']);">Next</button>
Declarative example¶
WARNING! Following example is just a template and not a real example. The Dojo version on Dojo Campus doesn’t contain the ThumbnailController yet.
<style type="text/css">
.rotator{
background-color:#fff;
border:solid 1px #e5e5e5;
width:400px;
height:100px;
overflow:hidden;
}
.pane{
background-color:#fff;
width:400px;
height:100px;
overflow:hidden;
}
.pane0{
background-color:#fff79e;
}
.pane1{
background-color:#ffd4a0;
}
.pane2{
background-color:#ffa0a0;
}
</style>
<script type="text/javascript">
dojo.require("dojox.widget.AutoRotator");
dojo.require("dojox.widget.rotator.Controller");
dojo.require("dojox.widget.rotator.Fade");
</script>
<div dojoType="dojox.widget.AutoRotator" class="rotator" id="myAutoRotator2" jsId="myAutoRotatorInstance2" transition="dojox.widget.rotator.crossFade" duration="2500">
<div class="pane pane0">Pane 0</div>
<div class="pane pane1">Pane 1</div>
<div class="pane pane2">Pane 2</div>
</div>
<h3>Default Controller</h3>
<div dojoType="dojox.widget.rotator.Controller" rotator="myAutoRotatorInstance2"></div>
<h3>Prev, Numbers, Next</h3>
<div dojoType="dojox.widget.rotator.Controller" rotator="myAutoRotatorInstance2" commands="prev,#,next"></div>
See also¶
- dojox.widget.Rotator rotates through a series of panes using a transitions.
- dojox.widget.AutoRotator adds automatic rotating to a Rotator.