Simplified version of mobile phone photo preview component_javascript skills

Poor, I use a Huawei 3C mobile phone, and it’s easy to use other people’s ready-made components. In order to adapt to a loser like me, I simplified and wrote a version of the photo preview effect. There is no zoom function for the time being. I may try it again when I have time. Add it, you can also add it yourself, this is an open source project on github. Its github address is: https://github.com/tianxiangbing/mobile-photo-preview

The following is a preview,

Usage examples:

var photoPreview = new MobilePhotoPreview();
    photoPreview.init({
      target: $('.preview-list'),
      trigger: '.preview',
      show: function(c) {
        var del = $('<span class="icon-del"><span>');
        $('.imgViewTop', c).append(del);
        del.tap(function() {
          photoPreview.current.remove();
          photoPreview.hide();
        });
      }
    });

or:

$('.preview-list').MobilePhotoPreview({
      trigger: '.preview',
      show: function(c) {
        var del = $('<span class="icon-del"><span>');
        $('.imgViewTop', c).append(del);
        var _this = this;
        del.tap(function() {
          _this.current.remove();
          _this.hide();
        });
      }
    });
　　

Note: There is no essential difference between the two methods. The first one is recommended.

API properties, methods and callbacks:

target:
It means that the elements in this container will trigger the event. It is a range and is used together with trigger to delegate the event node, so it is necessary. It is recommended not to delegate the root node.
trigger:
Represents the object that triggers the event. It can be dynamic. By default, it is triggered by a link under the target
show:
The callback after display, the parameter is the dialog container, and this currently points to the instance of MobilePhotoPreview. This is a callback method to extend more functions. In order to better use this callback, you may be interested in the following properties
Properties and methods under this:
current:
Current node object
currentIndex:
Current index
objArr:
Array object, here, you can get a collection, including index, element, width, and height. This will be very useful stuff.
hide:
What is called is the hide.

of dialog

The above is the entire content of this article, I hope you all like it.