JQuery implements simple image Viewer _ jquery

Source: Internet
Author: User
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)

   
   

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.