Html
<! DOCTYPEHtml>
<Html>
<Headlang="EN">
<Metacharset="UTF-8">
<Title></Title>
<LinkRel="Stylesheet"href="Css/viewer.css"/>
</Head>
<Body>
<UlId="Myul">
<Li><ImgSrc="Img/1a.jpg"/></Li>
<Li><ImgSrc="Img/2a.jpg"/></Li>
<Li><ImgSrc="Img/3a.jpg"/></Li>
<Li><ImgSrc="Img/4a.jpg"/></Li>
<Li><ImgSrc="Img/5a.jpg"/></Li>
</Ul>
<ScriptSrc="Js/jquery-1.11.0.js"></Script>
<ScriptSrc="Js/viewer.js"></Script>
<script src="js/demo01.js"></script>
</Body>
</HTML>
Demo01.js
/**
* Created by Loki on 2017/2/21.
*/
$("#myul").Viewer ({
Bottom navigation bar 0: does not appear;
NavBar0,
Whether the close button in the upper-right corner is displayed: True is the default display;
buttonTrue
Whether to enter the page display mask layer, default false;
InlineFalse
Whether the bottom navigation shows 0: The bottom button is not displayed;
Toolbar2,
Whether you can drag
Movable:True
Whether it can be rotated
rotatable:< Span style= "color: #000080; Font-weight:bold ">true,
//can I zoom the picture
scalable:true,
//whether there is a transition animation (small size)
transition:true,
//Click to play full screen playback
fullscreen:true
})
Viewer.js's Simple Practice