This article mainly introduces jQuery's implementation of simple image Viewer related information. If you need a friend, you can refer to the project to diy an image viewer. Because the initial code is not your own, but it is not very beautiful after being changed. If you have time to rewrite the style and encapsulation, just accumulate as a slave. If some shoes are useful, you can modify them on this basis, which is easier and the code is simpler.
Image Viewer provides the following functions:
1. display image and Image Information (image name, publisher, etc)
2. Switch Images
3. Disable Image Viewer
Initialize the interface function pictureViewer. init: function (picInfos, tapNumber, isBig)
PicInfos: required. Format: var picInfos = [{"url": "default.png", "data": [{"key": "name :", "value": "Test image" },{ "key": "publisher:", "value": "chua"}] },{ "url": "test.jpeg ", "data": [{"key": "name", "value": "Test image" },{ "key": "publisher:", "value ": "h" },{ "key": "other information about this image", "value": "vsfsgsdgfds234323424"}]},...] // input the parameter Style
TapNumber:The index of the image to be displayed in the image list. required, starting from 0.
IsBig:Whether to use a larger image. The default value is false. Optional.
The source code of html and css is as follows (an example is provided later)