Detailed description on development of the jQuery image viewing plug-in Magnify

Detailed description on development of the jQuery image viewing plug-in Magnify

Due to some special business requirements, after more than a month of waiting and thinking, I developed the jQuery Image Viewer plug-in Magnify, which implements all the features of the Windows photo viewer, for example, drag, resize, maximize, zoom, rotate, pan, and keyboard control of the modal window. The style of the plug-in is the most basic css, which is very easy to customize and can be easily modified into your favorite style. Later, React and Vue-related plug-ins will be released. This article mainly introduces the features and usage of plug-ins, and the details about plug-in development will be described in a detailed article later.

Github: https://github.com/nzbin/magnify

Web: https://nzbin.github.io/magnify

Development Note

Due to the recent busy work, I almost got home at every night. Then I began to write plug-ins. It was just a few minutes before I went to bed. Now I am exhausted. Because no related plug-ins are found, many problems are caused by the painstaking efforts to think independently, for example, problems such as mouse-centered image scaling, changing the size of the pop-up window to restrict image movement, scaling and Translation after image rotation, and so on, are the biggest headache for developing plug-ins: details, the bug of a single function is even fixed most of the time.

In addition, the greatest difficulty for developing plug-ins is not the function implementation, but the design of plug-ins, and how to make the use of plug-ins easier and more convenient. The Design of plug-ins is not the focus of this article. I will write an article about plug-in design ideas later.

Almost all the code of the plug-in is adjusting the width, height, left, and top of the pop-up window or image. Therefore, the compatibility problem is not big, mainly due to the 2D rotation problem. filter should be used below IE 9. There are many relative positions for easy style adjustment.

Magnify adopts the file separation method and uses the npm plug-in for packaging. It does not use the new syntax or popular packaging tools. The use of npm tools has become a trend of packaging and publishing projects.

Demo

If you do not want to open a URL to view the example, you can use the following CodePen to view the plug-in effect. There is no difference between the two methods except the window size:

If you cannot enable CodePen for your network speed or other reasons, you can view the following picture.

Main functions

For more information about Magnify functions, see the Windows photo viewer.

1. Drag a modal window

If the image size is not greater than the display area, you can drag a pop-up window through the image display area. This is the same as QQ Image Viewer.

2. Adjust the modal window size

There is a bug in the current size adjustment, but it does not affect the overall usage.

3. Maximize the modal window

In addition to maximizing the pop-up window, the minimum function is also designed in the early stage of development, but it feels a little bad, so it is not added yet.

4. Image Scaling

You can use the scroll wheel, button, keyboard, and other operations.

5. Image Rotation

Currently, no code supporting IE9 or earlier is added to the image rotation function.

6. keyboard control

Magnify and Windows photo viewer have the same buttons.

←Previous→Next+Zoom in-Zoom outctrl + alt + 0Actual Sizectrl + ,Rotate leftctrl + .Rotate to the right 7. Full Screen Display

Magnify only provides basic full-screen display functions, and does not implement automatic slideshow of slides. Use the keyboard to control images in full screen environments.

Usage

Magnify is similar to most other lightbox plug-ins. If you are used to other plug-ins, there is no obstacle to using Magnify.

1. files to be referenced

<link href="/path/to/magnify.css" rel="external nofollow" rel="stylesheet"><script src="/path/to/jquery.js"></script><script src="/path/to/jquery.magnify.js"></script>

Magnify uses the font-awesome icon by default, so you need to reference the font-awesome css file. If you want to use other icons, you can modify the icons parameter of options. In later versions, I may add Custom font Icon files or use svg icons.

<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="external nofollow" rel="stylesheet">

2. HTML Structure

Magnify uses the following structure by default. This structure can be compatible and is also used by most lightboxes.

<a data-magnify="gallery" href="big-1.jpg" rel="external nofollow" > </a><a data-magnify="gallery" href="big-2.jpg" rel="external nofollow" > </a><a data-magnify="gallery" href="big-3.jpg" rel="external nofollow" > </a>

You can also use the simpler structure below

Magnify's HTML structure includes the following options:

Adddata-srcAttributes can be linked to a large image. If<a>Label, it will overwritehrefAttribute Value. Adddata-captionThe property can display the title. If you do not use this attribute, the plug-in displays the image name in the URL. Adddata-groupAttributes can be grouped by image. 3. initialize the plug-in

If you adddata-magnifyProperty, the plug-in will be automatically initialized.

The method for manually initializing the plug-in is the same as that for all jQuery plug-ins:

$('[data-magnify=gallery]').magnify(options);

Parameter configuration

options = {  draggable: true,  resizable: true,  movable: true,  keyboard: true,  title: true,  modalWidth: 320,  modalHeight: 320,  fixedContent: true,  fixedModalSize: false,  initMaximized: false,  gapThreshold: 0.02,  ratioThreshold: 0.1,  minRatio: 0.1,  maxRatio: 16,  headToolbar: [   'maximize',   'close'  ],  footToolbar: [   'zoomIn',   'zoomOut',   'prev',   'fullscreen',   'next',   'actualSize',   'rotateRight'  ],  icons: {   maximize: 'fa fa-window-maximize',   close: 'fa fa-close',   zoomIn: 'fa fa-search-plus',   zoomOut: 'fa fa-search-minus',   prev: 'fa fa-arrow-left',   next: 'fa fa-arrow-right',   fullscreen: 'fa fa-photo',   actualSize: 'fa fa-arrows-alt',   rotateLeft: 'fa fa-rotate-left',   rotateRight: 'fa fa-rotate-right'  }}

I will not copy or paste the plug-in parameters here. Please refer to the details in the official documentation. If you have any questions, leave a message here.

Custom Style

Because the style of the plug-in is relatively simple, it is also very easy to modify. In addition to the Windows photo viewer, QQ's Image Viewer is also very tall. We only need to make a simple modification to achieve the QQ Image Viewer effect, but some features such as thumbnails have not yet been implemented. The following is a real-time Demonstration:

In the face of such an image viewer ~

Summary

At present, the overall plug-in has been improved, but there are still a lot of details to be modified and added, especially for mobile terminal support. You can watch the updates of the project at any time. The introduction of plug-ins will not be repeated. If you find bugs or have better suggestions, you can ask questions in GitHub or leave a message here, everyone's support is my greatest motivation! If this plug-in is helpful to you or you have used this plug-in the project, please leave a message!