本文例項講述了jQuery 圖片檢視器外掛 Viewer.js用法。分享給大家供大家參考，具體如下：

html:

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

<div id="viewPhotosDialog" title="檢視圖片" style="display: none"></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相關內容感興趣的讀者可檢視本站專題：《jQuery擴充套件技巧總結》、《jQuery常用外掛及用法總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷演算法與技巧總結》、《jQuery常見經典特效彙總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》

希望本文所述對大家jQuery程式設計有所幫助。