Mobile js image viewer

The example in this article shares with you how to use the js image viewer plug-in to create a web page image viewer for mobile phones for your reference. The specific content is as follows

I have taken the time to develop a tailor-made image viewer for the project these days. , the requirements have been initially completed.

The development scenario is: in a multi-file download display list, if some files are detected as images, then when the file is clicked, the image viewer will be opened to display the image, and other images in the list will be displayed in the viewer queue at the same time. Available for sliding forward and backward to view and other incidental functions.

At first glance, the function points seem to be a bit too many and complicated. We need to sort them out

Organization of the function points

First, we need to obtain the clicked image file object and the set of eligible image file objects

Secondly, the image viewer Production and picture queue display

Then, picture-friendly loading method

Finally, the realization of related functions after touch sliding and sliding in the picture viewer

A simple arrangement, it seems there is not much

Creating a mobile web page picture viewer

Prepare for formal development based on function points

First: We add a unified identification to the image files in the known list container. We know whether the file is an image and the image path when storing, and directly add unified attributes to the elements

f9d63ed037158d8a652ac8033968b86e5db79b134e9f6b82c0b36e0489ee08ed

Secondly: Create a full-screen gray background, display the image queue, and mark the current displayed image position in the form of NO./n; all styles are given, just I won’t go into details one by one (some attributes in the figure style are required for swipe.js)

.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: during initialization, change the image directly to the loading.gif image, and then load it dynamically

61e0b4586cdb03a8db9b9a602f1447ee

Finally: swipe.js lightweight touch sliding plug-in to learn to use, first call

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

Configuration parameters

startSlide  : 0, //起始位置
auto    : 3000, //自动播放时间
continuous  : true, //无限循环; 个人建议所有项个数不确定时赋值false, 不然为2的时候很2
disableScroll : false, //触摸时禁止滚屏
callback   : function(index, element){}, //滑动时回调函数, 参数为滑动元素排序与对象
transitionEnd : function(index, element){} //滑动完成后回调函数, 参数同上

API Method

prev(); //上一页
next(); //下一页
getPos(); //当前页索引
getNumSlides(); //所有项个数
slide(index, duration); //滑动效果

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

Very light in size and document, very simple and easy to use

swipe.min.jsDownload

Complete development officially begins

We obtain the url attribute of the trigger object through the unified trigger event of the list. If the attribute exists, call the image viewer and stop the subsequent 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 enter the data collection After completing the post-processing process, first show our object model, the definition rules of the object model's attributes and methods

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

Write the main function of the image viewer

/**
 * 图片查看器
 * @param object obj 操作对象
 * @param object set 对象集
 */
base.dialog = function(obj, set){
 var i = set.index(obj); //当前页索引
 var rel = set.length; //所有项个数
 var html = &#39;<section class="dialog"><section></section><figure id="swipe"><ul>&#39;; //开始绘制图片查看器
 set.each(function(){
  var url = $(this).attr(&#39;url&#39;); //图片路径
  html += &#39;<li><img src="loading.gif" width="40" height="40" url="&#39; + url + &#39;" /></li>&#39;; //循环绘制图片列表
 });
 html += &#39;</ul></figure><footer><span id="po">&#39; + (i + 1) + &#39;/&#39; + rel + &#39;</span></footer></section>&#39;; //绘制结束
 
 $(&#39;body&#39;).append(html); //渲染图片查看器
 //js文件加载状态
 base.loadJs(&#39;swipe.min.js&#39;, function(){
  base.swiper(i); //回调函数, swipe参数配置
 });
 
 var url = obj.attr(&#39;url&#39;);
 //图片加载状态
 base.loadImg(url, function(){
  base.imager(i); //回调函数, 图片展示
 });
};

Load swipe.js on demand

/**
 * 按需加载js
 * @param string url 文件路径
 * @param object fn 回调函数
 */
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

/**
 * 幻灯片配置
 * @param int i 当前页索引
 */
base.swiper = function(i){
 var obj = document.getElementById('swipe');
 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);
   });
  }
 });
};

Load images on demand

/**
 * 按需加载img
 * @param string url 文件路径
 * @param object fn 回调函数
 */
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 image is loaded

/**
 * 展示加载完图片
 * @param int i 当前页索引
 */
base.imager = function(i){
 var obj = $('#swipe li').eq(i).find('img');
 var url = obj.attr('url');
 obj.replaceWith(&#39;<img src="&#39; + url + &#39;" />&#39;);
};

At present, it is only preliminary completed, and more work needs to be done later Optimized and perfect, the main points are as follows

The picture viewer has been drawn successfully and should not be deleted but hidden when closed; when the viewer is re-called, if the picture list does not change, it will be called up directly without redrawing;

The picture cannot be enlarged Shrinking, when the width and height are too long, the preview effect will be very poor and the picture cannot be seen clearly;

There is no thumbnail. It was only during development that we discovered that we did not compress the graphics when storing the pictures. The traffic was too high when loading the pictures. Of course, this problem itself It must be processed first when storing in the background.