Viewer.js of inline mode

Start

  • A few days ago received a little support to do a demo image preview and operational functions, and gives the reference template. At first simply looked to the template, one boxImg.js, and the other is Viewer.js.

problem

  • In fact, there are many plug-picture preview, but mostly after clicking pop up a modal layer display pictures, but this requirement is displayed directly on the page, displayed directly in a div. Beginning with boxImg to do a version using the iframe, directly into the page when a div with, the effect is very good, but the side effects feeling getting bigger, and this effect is ugly, because I did not use here, it is another a department use, and then put this version to pass up.

  • FIG effect boxImg.js

  • To do this thing the biggest problem is not be displayed in a modal box, then saw another Viewer.js , feel more powerful, but also very nice, the most important is that it has an inline mode, partial modal box, Finally, check with it.

modify

  1. Mainly for instance custom-toolbar.html code is modified, according to the api inline mode, the frame mode in addition to a gray background, the top right button removed.
  2. Hide the background image and the positioning so that the bottom of the toolbar into a vertical, I think the cross of very good looking, but needs to change so that the vertical.
  3. For some style changes, mainly through the css style of coverage, rather than directly change the source code, so the future facilitate the development process.

effect

  • regular version

  • Vertical version of Toolbar

The relevant code refer to my github: braised chicken rice

Guess you like

Origin www.cnblogs.com/yanht/p/11714063.html