Pure JS to create more powerful than QQ space image browser-support drag, zoom, filter, thumbnail, etc.

Online demo address (after opening the page, click on the Merchant Atlas):

Http://www.sport7.cn/cc/jiangnan/football5.html

Take a look at it first:

The image browser implements the following functions:

1. Mouse wheel zoom picture;

2. Drag the mouse image;

3. Click the Zoom in/out icon to switch to the original size and best in-store mode;

4. Click the left and right arrows to turn the page;

5. Click the thumbnail to display a larger image;

6. Thumbnails support left and right arrows paging, automatic paging to the selected picture;

7. Right image filter;

8. Press the ESC key to automatically exit the picture browser.

Want to know how it's going to come true? The first look at the page is loaded with which JS. First Use Chrome browser to open the page, press F12, view the JS file list as follows:

In addition to jquery and jQueryUI and statistical JS files, I wrote JS only 2 files. Ydx.core.js is the whole station Universal JS file, and Schedule.js is the page JS. Careful you may have found that the page has complex pre-function features in addition to a very powerful picture browser. How is this complex JS structured? The answer is grunt.

Click Schedule.js to find that the file has been obfuscated by compression. Such as:

Yes, this is a basic requirement for a production site.

In our JS code architecture, this schedule.js is composed of multiple JS files, each JS source files are small easy to read and easy to maintain. Look at the configuration of one of the parts of the grunt file:

... company: {                index: [Libs.publics.imageviewer, Libs.publics.companyNavManager, Libs.slider, Libs.imagezoomer],                category: [Libs.publics.imageviewer, Libs.publics.companyNavManager, Libs.slider, Libs.imagezoomer],                schedule: [Libs.publics.imageviewer, Libs.publics.companyNavManager, Libs.slider, Libs.imagezoomer, Libs.dropdown]            }, ...

What, isn't it very elegant?

If you're interested in architecting an ultra-complex JS project (or page), take a look at this GitHub Open source project: Https://github.com/leotsai/mvcsolution. The project has a complete example of using grunt to build ultra-complex JS projects.

Pure JS to create more powerful than QQ space image browser-support drag, zoom, filter, thumbnail, etc.