| <?xml version='1.0'?> |
| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| |
| --> |
| |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> |
| <head> |
| <title>thumbnail - example</title> |
| |
| <link href="/style/style.css" media="screen" rel="stylesheet" type="text/css" /> |
| <link href="./style/demo.css" media="screen" rel="stylesheet" type="text/css" /> |
| |
| </head> |
| |
| <body> |
| |
| <!-- content --> |
| <div id="tx-content" class="demo"> |
| |
| <!-- list / thumbnail --> |
| <div class="tx-list"> |
| |
| <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/eye1.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/tiger1.jpg" alt="" class="tx-height" /></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> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/eye1.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/eye1.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| <span class="tx-icon tx-icon-alert tx-right" title="The rights on this assets expire on 17.07.2009"></span> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 24.06.2009"></span> |
| </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="" /> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/tiger1.jpg" alt="" class="tx-height" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 08.07.2009"></span> |
| </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="" /> |
| </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="" /> |
| <span class="tx-icon tx-icon-alert tx-right tx-tooltip" title="The rights on this assets expire on 12.08.2009"></span> |
| </div> |
| </li> |
| <li> |
| <div class="tx-thumb"><a href=""><img src="temp/img/eye1.jpg" alt="" class="tx-width" /></a></div> |
| <div> |
| <input type="checkbox" value="" /> |
| </div> |
| </li> |
| </ol> |
| </fieldset> |
| </form> |
| |
| <div id="demo"> |
| |
| <h3>Description</h3> |
| |
| In the tx-content a <div> with class <b>tx-list</b> is created. Within this <strong>div.tx-list</strong> an ordered list is placed. |
| <br/> |
| <br/> |
| |
| <strong>ol.tx-size3</strong>, <strong>ol.tx-size2</strong> and <strong>ol.tx-size1</strong> are the sizes of the thumbnail. |
| <br/> |
| <br/> |
| <strong>.tx-size3</strong>: 90px height or width<br/> |
| <strong>.tx-size2</strong>: 120px height or width<br/> |
| <strong>.tx-size1</strong>: 150px height or width<br/> |
| <br/> |
| <br/> |
| <strong>img.tx-width</strong> (landscape) and <strong>img.tx-height</strong> (portrait) defines the orientation of the thumbnails. |
| <br/> |
| <br/> |
| |
| <strong>div.tx-list</strong> is the main container for the list view. If no class is defined on the <strong>div.tx-list</strong> element the list has 100% width. |
| <br/> |
| The classes <strong>.tx-show-panel</strong>, <strong>.tx-hide-panel</strong> and <strong>.tx-halfwidth-right</strong> define the position of the tree view. |
| <br/> |
| <br/> |
| |
| <strong>.tx-show-panel</strong>: position with a panel on the left side.<br/> |
| <strong>.tx-hide-panel</strong>: position with a panel on the left side, hidden.<br/> |
| <strong>.tx-halfwidth-right</strong>: position on the right, 50% width.<br/> |
| <br/> |
| <br/> |
| |
| <br/> |
| <br/> |
| |
| <h3>Example code</h3> |
| |
| <pre> |
| <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> |
| </pre> |
| </div> |
| </div> |
| <!-- // list / thumbnail --> |
| </div> |
| <!-- // content --> |
| |
| </body> |
| </html> |
| |