Mobile End JS Picture Viewer _javascript Tips

This article examples for you to share the JS Picture Viewer plug-in use method, the production of mobile phone use of the Web page image Viewer for your reference, the specific content as follows

The last few days in the development of a tailor-made picture viewer for the project, has been initially completed requirements.

The development scenario is: In a multiple file download display list, such as detecting certain files as pictures, open the picture Viewer to display the picture when you click the file, and display the other pictures in the list in the viewer queue, which can be used for sliding view and other incidental functions.

At first glance the function point seems a little more complicated and needs to be combed

Function Point Finishing

First, we want to get the clicked Picture file object and the set of qualified picture file objects

Second, the picture viewer's production and picture queue display

Then, the picture-friendly loading mode

Finally, the image viewer touch sliding and the implementation of the related function after sliding

It's simple, it doesn't seem like much.

Make mobile Web page picture Viewer

Prepare for formal development based on functional points

First: We add a uniform ID to the picture file in the known list container, whether the file is a picture or a picture path we know when we store it, add the unified attribute directly to the element

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

Second: Make a full screen gray background, display the picture queue, and the no./n form of the current display picture position; All the styles are given, not one of them in detail (figure in the style part of the property is Swipe.js must)

. 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%;d isplay:-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: When initializing, replace the picture directly with the Loading.gif picture, and then dynamically load

Finally: Swipe.js Lightweight touch Slider plugin learning to use, first call

var obj = document.getElementById (' swipe ');
Window.myswipe = Swipe (obj, {
 ...
});

Configuration parameters

Startslide  : 0,//starting position
Auto    : 3000,//Auto play time
continuous  : true,//infinite loop, personal recommendation false when all items are indeterminate Otherwise, 2 is 2
disablescroll:false,//when touching, no scrolling
callback: function   (index, Element) {},//sliding callback function, Parameter for sliding element sort with Object
transitionend:function (index, Element) {}//Sliding completion callback function, parameter ibid

API methods

Prev (); Previous page
next ();//Next page GetPos ();/
/Current page index
getnumslides ()///All Items number
slide (index, duration);//Sliding effect

Basic HTML structure

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

Required CSS Properties

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

It's very lightweight and easy to start with, regardless of volume or document.

Swipe.min.js Download

Full development officially started

We use the unified trigger event of the list to get the URL property of the trigger object, such as the property that is present, call the picture Viewer and stop the following entry to the download interface program

$ ('. 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 into the data collection after the processing process, first show our object model, object model of the attributes and methods of the definition of rules

var Base_module = (function () {
 var base = {};
 Base.options = {
  lock:false
 };

 Base.fn = function () {
  ...
 };

 return base;
}) ();

Write the picture Viewer main function

/** *
 Picture Viewer
 * @param object obj action Objects
 * @param Object Set Object sets *
/base.dialog = function (obj, set) {
 var i = set.index (obj); Current page index
 var rel = set.length///number of items
 var html = ' <section class= ' dialog ' ><section></section ><figure id= "swipe" ><ul>; Start drawing the picture viewer
 Set.each (function () {
  var url = $ (this). attr (' url ');//picture path
  html = ' <li></li>"; Looping drawing of pictures list
 });
 html + + ' </ul></figure><footer><span id= ' po ' > ' + (i + 1) + '/' + rel + ' </SPAN></FOOTER&G T;</section> '; Draw End

 $ (' body '). Append (HTML);//Render Picture viewer
 //js file load status
 base.loadjs (' Swipe.min.js ', function () {
  Base.swiper (i); callback function, swipe parameter configuration
 });

 var url = obj.attr (' url ');
 Picture Loading status
 base.loadimg (URL, function () {
  base.imager (i);//callback function, picture display
 });

Load Swipe.js on Demand

/**
 * On-demand load JS
 * @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 ();;};

Configuring Swipe.js Parameters

/**
 * Slide configuration
 * @param int i current page index
/base.swiper = function (i) {
 var obj = document.getElementById (' swipe ');
 Window.myswipe = Swipe (obj, {
  startslide:i,
  continuous:false,
  disablescroll:true,
  callback< c29/>: 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);
   });
  }
 };

Load pictures on Demand

/**
 * On-Demand loading img
 * @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 ();;};

Display after the picture has finished loading

/**
 * Show loading picture
 * @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 ('  ');

At present, it is only preliminary completion, the following needs to be optimized and perfected , mainly

The picture Viewer has been successfully drawn, should not be deleted but hidden when it is closed, and when the viewer is recalled, if the picture list does not change, it is invoked directly without redrawing;

The picture cannot enlarge the contraction, the width height is too long, the preview effect will be very poor cannot see the picture;

There is no thumbnail, the development only found that we store the picture without compressing the processing of graphics, loading pictures when the traffic is too pit, of course, the problem itself first in the background storage processing.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.