Description
In the tx-content a <div> with class
tx-list is created. Within this
div.tx-list an ordered list is placed.
ol.tx-size3,
ol.tx-size2 and
ol.tx-size1 are the sizes of the thumbnail.
.tx-size3: 90px height or width
.tx-size2: 120px height or width
.tx-size1: 150px height or width
img.tx-width (landscape) and
img.tx-height (portrait) defines the orientation of the thumbnails.
div.tx-list is the main container for the list view. If no class is defined on the
div.tx-list element the list has 100% width.
The classes
.tx-show-panel,
.tx-hide-panel and
.tx-halfwidth-right define the position of the tree view.
.tx-show-panel: position with a panel on the left side.
.tx-hide-panel: position with a panel on the left side, hidden.
.tx-halfwidth-right: position on the right, 50% width.
Example code
<form action="" method="post">
<fieldset>
<!-- tx-size1, tx-size2, tx-size3, different thumbnail sizes -->
<ol class="tx-size3">
<li>
<!-- img.tx-height, portrait thumbnail format -->
<div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div>
<div>
<input type="checkbox" value="" />
</div>
</li>
<li>
<!-- img.tx-width, landscape thumbnail format -->
<div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
<div>
<input type="checkbox" value="" />
</div>
</li>
<li>
<div class="tx-thumb"><a href=""><img src="temp/img/tiger2.jpg" alt="" class="tx-width" /></a></div>
<div>
<input type="checkbox" value="" />
<!-- custom defined icons, tx-right, global for "float: right" -->
<span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 19.08.2009"></span>
</div>
</li>
</ol>
</fieldset>
</form>