Only need to introduce Jquery.js, VIEWER.CSS and Viewer.js
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <Scriptsrc= "Https://code.jquery.com/jquery-3.3.1.slim.min.js"></Script> <Linkrel= "stylesheet"href= "./viewer.css"> <Scriptsrc= "./viewer.js"></Script></Head><Body> <ulID= "Viewer"> <Li><imgdata-original= "Images/tibet-1.jpg"src= "Images/thumbnails/tibet-1.jpg"alt= "Cuo Na Lake"></Li> <Li><imgdata-original= "Images/tibet-2.jpg"src= "Images/thumbnails/tibet-2.jpg"alt= "Tibetan Plateau"></Li> </ul></Body><Script> $('#viewer'). Viewer ();</Script></HTML>
Demo instantiation of the use of the ID, in fact, can also be used class, with class is when the picture is classified, with class instantiation, preview is also grouped, such as:
Plugin: Https://github.com/fengyuanchen/viewer
Powerful image display plugin, jquery picture preview Display Plugin