Source :
<?xml version="1.0" encoding="UTF-8"?>
<zk xmlns:h="native">
<style>
.main {
padding : 0 80px;
zoom : 1;
}
/*Following CSS refer to Zoomer Gallery's Document'*/
.main li {
height: 77px;
width: 123px;
position: relative;
float: left;
list-style:none outside none;
margin: 30px 30px 0 0;
}
.main li img {
height: 77px;
width: 123px;
border:3px solid #DDDDDD;
position: absolute;
-ms-interpolation-mode: bicubic;
}
</style>
Thumbs of Grid Series Demo
<div height="350px">
<!-- Data From Server -->
<zscript><![CDATA[
String dir = "/widgets/effects/image_zoomer";
List imgs = new ArrayList();
imgs.add("grid_simple.png");
imgs.add("data_filter.png");
imgs.add("iterative_renderer.png");
imgs.add("inline_row_editing.png");
imgs.add("grouping_model.png");
imgs.add("dynamic_data.png");
imgs.add("grid_grouping.png");
imgs.add("header_and_footer.png");
imgs.add("inline_editing.png");
imgs.add("dynamic_renderer.png");
imgs.add("grid_hierarchy.png");
imgs.add("grid_lod.png");
]]></zscript>
<!-- Page Dom Structure -->
<h:ul id="zoomArea" class="main">
<h:li forEach="${imgs}">
<image src="${dir}/img/${each}" />
</h:li>
</h:ul>
<!-- Client Programming : JQuery Zoomer Gallery -->
<script type="text/javascript" src="${dir}/zoomer.js" />
<script type="text/javascript">
zk.afterMount(function() {
jq("#zoomArea li").Zoomer({speedView:200,speedRemove:200,altAnim:false,speedTitle:400,debug:false});
});
</script>
</div>
<hlayout>
<label value="Animation Speed : " />
<radiogroup>
<radio label="Fast">
<attribute name="onCheck"><![CDATA[
Clients.evalJavaScript("jq('#zoomArea li').Zoomer({speedView:100,speedRemove:200,altAnim:false,speedTitle:400,debug:false})");
]]></attribute>
</radio>
<radio label="Normal" checked="true">
<attribute name="onCheck"><![CDATA[
Clients.evalJavaScript("jq('#zoomArea li').Zoomer({speedView:500,speedRemove:400,altAnim:false,speedTitle:400,debug:false})");
]]></attribute>
</radio>
<radio label="Slow">
<attribute name="onCheck"><![CDATA[
Clients.evalJavaScript("jq('#zoomArea li').Zoomer({speedView:1000,speedRemove:500,altAnim:false,speedTitle:400,debug:false})");
]]></attribute>
</radio>
</radiogroup>
</hlayout>
</zk>
Hasil :
