Detailed explanation of using jQuery Magnify plug-in-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the use of the jQuery Magnify plug-in. What are the precautions when using the jQuery Magnify plug-in? The following is a practical case, let's take a look.

Due to some special business needs, after more than a month of dormancy and thinking, I developed this jQuery image viewer plug-in Magnify, which implements Windows All functions of the photo viewer, such as dragging, resizing, and maximizing the modal window, zooming, rotating, panning, and keyboard control of the image, etc. Plug-in styles are all basic css, it is very easy to customize and you can easily modify it to your favorite style. React and Vue will be released later. Relevant versions of plugins. This article mainly introduces the characteristics and usage of plug-ins, and details about plug-in development will be explained in subsequent specific articles.

Due to my busy work schedule recently, I get home at ten o'clock in the evening almost every day, and then start writing plug-ins. It is already past midnight when I go to bed, and now I am physically and mentally exhausted. Because no relevant plug-ins were found, I racked my brains to think independently on many issues, such as scaling pictures with the mouse as the center, restrictions on picture movement when changing the size of the pop-up window, scaling and panning after picture rotation, etc., and developing plug-ins The most troublesome thing is the details, even most of the time is spent repairing a single function. bug.

In addition, the biggest difficulty in developing plug-ins is not the function implementation, but how to design the plug-in and how to make the use of the plug-in easier and more convenient. How to design plug-ins is not the focus of this article. I will write a special article introducing plug-in design ideas later.

Almost all the code of the plug-in adjusts the width, height, left, and top of the pop-up window or image, so the compatibility problem is not big. It is mainly a 2D rotation problem. IE 9 and below need to use filters to achieve this. In order to facilitate the adjustment of styles, there are many relative position calculations.

Magnify is written in a file-separated manner and packaged using npm plug-ins. It does not use new syntax or popular packaging tools. Using the npm tool has become a trend in project development and packaging for release.

Demo

If you don’t want to click on the URL to view the example, you can view the plug-in effect through the following CodePen. Except for the size of the window, there is no difference between the two methods:

If you cannot open CodePen due to network speed or other reasons, you can view the image demonstration below.

The main function

The functions of Magnify can be compared to Windows Photo Viewer, which basically completes all the functions that can be achieved.

1. Modal window drag

If the image size is not larger than the display area, the pop-up window can also be dragged through the image display area. This is the same operation method as QQ picture viewer.

2. Modal window resizing

There is a little bug in the current resizing, but it does not affect the overall use.

3. Maximize the modal window

In addition to pop-up window maximization, a minimization function was also designed in the early stages of development, but it felt a bit tasteless, so it has not been added yet.

4. Image scaling

Can be operated via mouse wheel, buttons, keyboard, etc.

5.Picture rotation

The current image rotation function has not added code to support versions below IE9.

6.Keyboard control

The buttons for Magnify and Windows Photo Viewer are the same

← Previous → Next Zoom in- Zoom outctrl alt 0 Actual sizectrl , Rotate leftctrl . Rotate right 7. Full screen display

Magnify's full-screen display only implements basic display functions, and does not yet implement automatic slide rotation. Use the keyboard to control images in full-screen environment.

Instructions

The use of Magnify is no different from that of most other lightbox plug-ins. If you are used to using other plug-ins, there will be no obstacles to using Magnify.

1. Need to reference files

<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>

Copy after login

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

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

Copy after login

2.HTML structure

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

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

Copy after login

You can also use the following more concise structure

<img data-magnify="gallery" src="big-1.jpg" src="small-1.jpg">
<img data-magnify="gallery" src="big-2.jpg" src="small-2.jpg">
<img data-magnify="gallery" src="big-3.jpg" src="small-3.jpg">

Copy after login

Magnify’s HTML structure contains the following options

Add the src attribute to link to the larger image. If used within a <a> tag, it overrides the value of the href attribute. Add the data-caption attribute to display the title. If you don't use this attribute, the plugin will display the image name in the URL. Add the data-group attribute to group images. 3.Initialize plug-in

If you add the data-magnify attribute in HTML, the plugin will be initialized automatically.

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

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

Copy after login

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'
  }
}

Copy after login

Regarding the specific meaning of the plug-in parameters, I will not copy and paste them here. Please refer to the official documentation for detailed instructions. If you have any questions, you can leave a message here.

Custom style

Because the plug-in style is relatively simple, it is also very easy to modify. In addition to the Windows photo viewer, QQ’s picture viewer is also very advanced. We can achieve the effect of QQ picture viewer with simple modifications, but some functions such as Thumbnails have not been implemented yet. The following is a real-time demonstration:

Facing such a picture viewer is refreshing~

Summarize

At present, the plug-in as a whole has been perfected, but there are still many details that need to be modified and added, especially the support for mobile terminals. You can star Stay tuned for updates on the project. I won’t go into details about the introduction of the plug-in. If you find a bug, If you have better suggestions, you can ask questions in GitHub or leave a message here. Your support is my biggest motivation to move forward! If this plug-in is helpful to you or you use this plug-in in your project, please leave a message to let us know!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!