jQuery 图片查看器插件 Viewer.js如何使用

这篇文章主要介绍“jQuery 图片查看器插件 Viewer.js如何使用”，在日常操作中，相信很多人在jQuery 图片查看器插件 Viewer.js如何使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jQuery 图片查看器插件 Viewer.js如何使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

JS是什么

JS是JavaScript的简称，它是一种直译式的脚本语言，其解释器被称为JavaScript引擎，是浏览器的一部分，主要用于web的开发，可以给网站添加各种各样的动态效果，让网页更加美观。

html:

<!-- 引入文件 -->
<link rel="stylesheet" href="/css/viewer.min.css" rel="external nofollow" >
<script src="/js/viewer.min.js"></script>

<div id="viewPhotosDialog" title="查看图片" ></div>

js:

html += "&nbsp;&nbsp;&nbsp;&nbsp;<img title='查看图片' onclick='viewPhotos(\"" + val.ot_id + "\")' src='/images/icon/info.jpg' style='cursor: pointer'></td>";

//查看图片
function viewPhotos(ot_id) {
 var Html = "";
 $.ajax({
  type: "post",
  async: false,
  dataType: "json",
  url: "/order/order/get-list",
  data: {
   ot_id: ot_id,
   type: 1
  },
  success: function (json) {
   if (json.ask) {
    Html += "<table border='0' class='myTab' width='100%'>";
    Html += "<tr id='images'>";
    if (json.data) {
     $.each(json.data, function (key, value) {
      Html += "<td><img style='width: 75px; height: 75px;' src='http://cff-img.oss-cn-shenzhen.aliyuncs.com/" + value + "'></td>";
     });
    } else {
     Html += "<td></td>";
    }
    Html += "</tr></table>";
    $("#viewPhotosDialog").dialog("open").html(Html);
   } else {
    alertTip(json.msg);
   }
  }
 });
 var viewer = new Viewer(document.getElementById('images'), {url: 'data-original'});
}

$(function () {
 $("#viewPhotosDialog").dialog({
  title: "查看图片",
  autoOpen: false,
  modal: true,
  width: 1000,
  show: "slide",
 });
});

Controller:

class Order_OrderController extends Zend_Controller_Action {
 public function getListAction () {
  $type = $this->_request->getParam('type', 0);
    $otId = $this->_request->getParam('ot_id');
    if ($type) {
     $otIds = Order_Service_Transport::getByOtId($otId);
     if ($otIds) {
      $images = explode(';', $otIds['images']);
      $data = array();
      foreach ($images as $value) {
       $data[] = $value;
      }
      $return['ask'] = 1;
      $return['data'] = $data;
     } else {
      $return['ask'] = 0;
      $return['msg'] = '未获取到对应图片';
     }
     die(json_encode($return));
    }
  }
}

到此，关于“jQuery 图片查看器插件 Viewer.js如何使用”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！