Create a webpage Image Viewer for mobile phones and a webpage Image Viewer for mobile phones

Create a webpage Image Viewer for mobile phones and a webpage Image Viewer for mobile phones

The development of a custom image Viewer for the project has been completed in the past few days.

Development scenario: In a multi-File Download display list, if some files are detected as images, the image Viewer opens when you click the file to display the image, other images in the list are displayed in the viewer queue at the same time, which can be viewed by swiping and other functions

At first glance, the features seem to be a little more complicated and need to be sorted out.

 

Functions

First, we need to obtain the clicked image file object and the matching image file object set.

Secondly, Image Viewer creation and image queue display

Then, the image-friendly Loading Method

Finally, the implementation of the image viewer's touch sliding and sliding Functions

It seems that there are not many

 

Prepare a mobile phone webpage Image Viewer for official development based on functional points

First, we add a unified identifier for image files in a known list container. Whether the file is an image or image path is known during storage. We directly add a unified attribute for the element.

<a url="..."></a>

Second, create a full-screen gray background, display the image queue, and use NO. the position of the currently displayed image is marked in the form of/n. If all the styles are provided, they are not described in detail (some of the attributes in the figure style are swipe. js required)

.dialog,.dialog figure{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1001;}.dialog section{height:100%;background:#333;-webkit-opacity:0.7;}.dialog footer{padding:10px;position:absolute;bottom:0;left:0;right:0;z-index:1002;font-size:13px;}.dialog footer span{padding:0 20px;float:right;border:1px solid #999;border-radius:15px;color:#ddd;}.dialog figure{overflow:hidden;}.dialog figure ul{height:100%;overflow:hidden;}.dialog figure li{width:100%;height:100%;display:-webkit-box;float:left;position:relative;-webkit-box-pack:center;-webkit-box-align:center;}.dialog figure img{max-width:100%;max-height:100%;margin:10px;}

Then, convert the image into a loading.gif image during regionalization, and then dynamically load the image.

Finally: swipe. js lightweight touch slide plug-in learning to use, first call

var obj = document.getElementById('swipe');window.mySwipe = Swipe(obj, {    ...});

Configuration parameters

StartSlide: 0, // start position auto: 3000, // automatic playback time continuous: true, // infinite loop; I suggest assigning a value of false if the number of all items is unknown, otherwise, 2 disableScroll: false, // call back: function (index, element) {} is not allowed during touch. // The callback function is used when sliding, the parameters are sliding element sorting and object transitionEnd: function (index, element) {}// callback function after sliding is completed. The parameters are the same as above

API method

Prev (); // previous page next (); // next page getPos (); // current page index getNumSlides (); // The number of all items slide (index, duration ); // sliding effect

Basic html Structure

<figure id="swipe">    <ul>        <li></li>    </ul></figure>

Required css attributes

figure{overflow:hidden;position:relative;}figure ul{overflow:hidden;}figure li{width:100%;float:left;position:relative;}

Simple and Easy to use regardless of the size or documentation

Download swipe. min. js

 

Complete development officially started

We use the unified trigger event in the list to obtain the url attribute of the trigger object. If this attribute exists, we call the Image Viewer and stop the program on the download page.

$('.download a').click(function(){    var obj = $(this);    var url = obj.attr('url');    if(url && url.length > 0){        var set = $('.download a[url]');        base_module.dialog(obj, set);        return false;    };    ...});

Now, after data collection is complete, we will first display our object model, the attributes of the object model, and the definition rules of the methods.

var base_module = (function(){    var base = {};    base.options = {        LOCK : false    };    base.fn = function(){        ...    };    return base;})();

Compile the main function of the Image Viewer

/* ** Image Viewer * @ param object obj operation object * @ param object set */base. dialog = function (obj, set) {var I = set. index (obj); // index var rel = set. length; // Number of all items var html = '<section class = "diipe"> <section> </section> <figure id = "swipe"> <ul> '; // start to draw the Image Viewer set. each (function () {var url = $ (this ). attr ('url '); // image path html + = '<li>  </li> '; // draw the image list cyclically}); html + = '</ul> </figure> <footer> <span id = "po">' + (I + 1) + '/' + rel + '</span> </footer> </section>'; // draw end $ ('body '). append (html); // render the Image Viewer // js file loading status base. loadJs ('HTTP: // files.cnblogs.com/johnl/swipe.min.js', function () {base. swiper (I); // callback function, swipe parameter configuration}); var url = obj. attr ('url'); // The base of the image loading status. loadImg (url, function () {base. imager (I); // callback function, Image Display });};

Load swipe. js as needed

/*** Load js as needed * @ param string url file path * @ param object fn callback function */base. loadJs = function (url, fn) {if (typeof Swipe! = 'Undefined') {if (fn) fn (); return false ;}; var js = document. createElement ('script'); js. src = url; document. getElementsByTagName ('head') [0]. appendChild (js); js. onload = function () {if (fn) fn ();};};

Configure swipe. js Parameters

/*** Slide configuration * @ param int I current page index */base. swiper = function (I) {var obj = document. getElementById ('swip'); window. mySwipe = Swipe (obj, {startSlide: I, continuous: false, disableScroll: true, callback: function (index, element) {var I = index + 1; var s = $ ('# swipe li '). length; $ ('# po '). text (I + '/' + s); var url = $ (element ). find ('img '). attr ('url'); base. loadImg (url, function () {base. imager (index );});}});};

Attach images as needed

/*** Load img as needed * @ param string url file path * @ param object fn callback function */base. loadImg = function (url, fn) {var img = new Image (); img. src = url; if (img. complete) {if (fn) fn (); return false ;}; img. onload = function () {if (fn) fn ();};};

After the image is loaded, it is displayed.

/*** Display the loaded image * @ param int I current page index */base. imager = function (I) {var obj = $ ('# swipe li '). eq (I ). find ('img '); var url = obj. attr ('url'); obj. replaceWith (' ');};

Success! No picture is available now. You can say JB.

Or click "View ".

 

At present, it is only preliminary completion, and optimization and improvement are also needed, mainly including the following points:

The image viewer has been successfully drawn and should not be deleted but hidden when it is closed. When you call the viewer again, the list of parts does not change, and the image viewer does not have to be re-drawn.

The image cannot be enlarged or reduced. If the width and height are too long, the preview effect will be poor and the image cannot be viewed.

No thumbnails. during development, we found that we didn't compress images when storing images. The traffic when loading images is too bad. Of course, this problem must be solved first in the background storage.

 

I will fill these pitfalls one by one.