/src/imagezoom/demo.html
HTML | 214 lines | 171 code | 33 blank | 10 comment | 0 complexity | a4e0b92fea5e9c48a3b512196de4db1f MD5 | raw file
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>S.ImageZoom Demo</title>
- <link href="../../build/cssbase/base-min.css" rel="stylesheet"/>
- <script src="../../build/kissy.js"></script>
- <script src="imagezoom.js"></script>
- <script src="mod-autorender.js"></script>
- <style>
- body { padding: 20px 50px 50px; }
- h2 { margin: 10px 0 10px -20px; padding: 5px 10px; font-size: 14px; font-weight: normal; background: #F2F2F2; }
- p.code-switch { color: #09f; cursor: pointer; margin-top: 10px; }
- pre.code {
- color: #444;
- cursor: auto;
- border-left: 2px solid #7F96AA;
- margin-top: 5px;
- padding: 0 10px 20px 10px;
- font-size: 14px;
- }
- </style>
- <style>
- .demo {
- position: relative;
- width: 310px;
- height: 310px;
- border: 1px solid grey;
- }
- .ks-imagezoom-lens {
- background: url(http://img04.taobaocdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png) repeat;
- cursor: move;
- }
- .ks-imagezoom-icon {
- height: 23px;
- width: 23px;
- border-right: 1px solid #999;
- border-bottom: 1px solid #999;
- background: url(http://img02.taobaocdn.com/tps/i2/T1uJNuXX8tXXXXXXXX-23-23.png) no-repeat scroll left top transparent;
- }
- .ks-imagezoom-viewer {
- border: 1px solid #CCCCCC;
- overflow: hidden;
- text-align: center;
- z-index: 999;
- }
- .ks-imagezoom-loading {
- background: #fff url(assets/loading.gif) no-repeat center center;
- }
- </style>
- </head>
- <body>
- <h2>标准模式</h2>
- <div class="demo">
- <img id="standard" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1fftwXf8jXXX7ps79_073021.jpg_310x310.jpg"/>
- </div>
- <h2>小图不能访问</h2>
- <div class="demo">
- <img id="bad-small" src="http://google.com/non-exist.jpg"/>
- </div>
- <style>
- #imgList img {
- cursor: pointer;
- border: 1px solid grey;
- padding: 4px;
- }
- </style>
- <h2>多图加载</h2>
- <div class="demo">
- <a href="#"><img id="multi" data-ks-imagezoom="http://img03.taobaocdn.com/bao/uploaded/i3/T1fftwXf8jXXX7ps79_073021.jpg" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1fftwXf8jXXX7ps79_073021.jpg_310x310.jpg"/></a>
- </div>
- <ul id="imgList">
- <li>
- <img src="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg_40x40.jpg" data-ks-imagezoom="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg" />
- </li>
- <li>
- <img src="http://img06.taobaocdn.com/imgextra/i6/354823861/T2vWNlXbFdXXXXXXXX_!!354823861.jpg_40x40.jpg" data-ks-imagezoom="http://img06.taobaocdn.com/imgextra/i6/354823861/T2vWNlXbFdXXXXXXXX_!!354823861.jpg"/>
- </li>
- </ul>
- <h2>auto render</h2>
- <div class="demo">
- <img class="KS_Widget" data-widget-type="ImageZoom" data-widget-config="{ 'bigImageSrc': 'http://img03.taobaocdn.com/bao/uploaded/i3/T1fftwXf8jXXX7ps79_073021.jpg' }" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1fftwXf8jXXX7ps79_073021.jpg_310x310.jpg"/>
- </div>
- <h2>inner</h2>
- <style>
- .inner {
- border: none;
- }
- </style>
- <div class="demo">
- <img id="inner" src="http://img03.taobaocdn.com/bao/uploaded/i3/T1fftwXf8jXXX7ps79_073021.jpg_310x310.jpg"/>
- </div>
- <br />
- <ul id="imgGallery">
- <li>
- <img src="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg_120x120.jpg" data-ks-imagezoom="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg"/>
- </li>
- <li>
- <img src="http://img06.taobaocdn.com/imgextra/i6/354823861/T2vWNlXbFdXXXXXXXX_!!354823861.jpg_120x120.jpg" data-ks-imagezoom="http://img06.taobaocdn.com/imgextra/i6/354823861/T2vWNlXbFdXXXXXXXX_!!354823861.jpg"/>
- </li>
- </ul>
- <!--<h2>GIF</h2>
- <div>
- <img id="innerGIF" src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ2vnXhnmkMfCAIxmWCk30RMkCEQzCuZqiBW2A31f0IlnpTKrk&t=1&usg=__SgHRt2YpoMzLSom2RwryLZ9h-b0=" data-ks-imagezoom="http://spiff.rit.edu/classes/phys235/badrock/kt_impact.gif" />
- </div>
- <h2>PNG</h2>
- <div>
- <img id="innerPNG" src="http://t2.gstatic.com/images?q=tbn:ANd9GcRh4hSB5hJrHqBhqg_qMbxWIaFHAIrcHl_5Eh3hkWIx67ARSUs&t=1&usg=__qWOTgiUVJAxh66euWNsLiXm_NYw=" data-ks-imagezoom="http://d.lanrentuku.com/down/png/0904/Mario_Galaxy/Mario_Galaxy_002.png" />
- </div>
- -->
- <script>
- KISSY.ready(function(S) {
- var a = new S.ImageZoom("#standard", {
- //alignTo: S.DOM.parent('#bad-small')
- });
- a.set('bigImageSrc', "http://img03.taobaocdn.com/bao/uploaded/i3/T1fftwXf8jXXX7ps79_073021.jpg");
- var m = new S.ImageZoom("#multi");
- S.Event.on("#imgList img", 'click', function() {
- var data = S.DOM.attr(this, 'data-ks-imagezoom');
- m.changeImageSrc(data+'_310x310.jpg');
- //S.DOM.attr('#multi', 'src', data+'_310x310.jpg');
- m.set('bigImageSrc', data);
- });
- var b = new S.ImageZoom("#inner", {
- position: 'inner',
- offset: 0,
- zoomCls: 'inner'
- });
- b.set('bigImageSrc', "http://img03.taobaocdn.com/bao/uploaded/i3/T1fftwXf8jXXX7ps79_073021.jpg");
- /*new S.ImageZoom("#innerGIF", {
- position: 'inner',
- bigImageSize: [512, 512],
- offset: 0,
- lensIcon: false
- });
- new S.ImageZoom("#innerPNG", {
- position: 'inner',
- bigImageSize: [650, 487],
- offset: 0,
- lensIcon: false
- });*/
- S.ImageZoom.autoRender();
- S.each(S.query("#imgGallery img"), function(img) {
- var t = new S.ImageZoom(img, {
- position: 'inner',
- offset: 0,
- zoomCls: 'inner',
- lensIcon: false
- });
- t.set('bigImageSrc', S.DOM.attr(img, 'data-ks-imagezoom'));
- });
- });
- </script>
- <p class="code-switch">显示源码</p>
- <script>
- (function() {
- var S = KISSY, DOM = S.DOM,
- SHOW_CODE = '显示源码', HIDE_CODE = '隐藏源码';
- S.all('p.code-switch').each(function(p) {
- p.on('click', function() {
- var showing = (p.text() === SHOW_CODE),
- next = p.next(),
- pre = next;
- if (next[0].nodeName !== 'PRE') {
- pre = S.Node('<pre>');
- pre.attr('class', 'code')
- .html(p.prev().html());
- if (S.UA.ie) {
- pre.html(pre.html() + '<br />// 请用非 ie 内核浏览器查看。');
- }
- DOM.insertAfter(pre[0], p[0]);
- }
- pre.css('display', showing ? 'block' : 'none');
- p.html(showing ? HIDE_CODE : SHOW_CODE);
- });
- });
- })();
- </script>
- </body>
- </html>