jQuery 图片查看器插件 Viewer.js用法简单示例


Posted in jQuery onApril 04, 2020

本文实例讲述了jQuery 图片查看器插件 Viewer.js用法。分享给大家供大家参考,具体如下:

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 += "    <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用法简单示例

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现图片随机切换、抽奖功能(实例代码)
Oct 23 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery操作元素的内容和样式完整实例分析
Jan 10 jQuery
JQuery复选框全选效果如何实现
May 08 jQuery
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 #jQuery
viewer.js一个强大的基于jQuery的图像查看插件(支持旋转、缩放)
Apr 01 #jQuery
js、jquery实现列表模糊搜索功能过程解析
Mar 27 #jQuery
jQuery实现html可联动的百分比进度条
Mar 26 #jQuery
jquery css实现流程进度条
Mar 26 #jQuery
jquery实现上传文件进度条
Mar 26 #jQuery
jquery实现进度条状态展示
Mar 26 #jQuery
You might like
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
PHP4实际应用经验篇(1)
2006/10/09 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
PHP+jQuery实现即点即改功能示例
2019/02/21 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
php中array_fill函数的实例用法
2021/03/02 PHP
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
利用jquery操作Radio方法小结
2014/10/20 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
JS继承之借用构造函数继承和组合继承
2016/09/07 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
layui 富文本赋值,取值,取纯文本值的实例
2019/09/18 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
[53:13]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-GAMING
2014/05/22 DOTA
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
使用tensorflow实现AlexNet
2017/11/20 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
Java如何格式化日期
2012/08/07 面试题
c++工程师面试问题
2013/08/04 面试题
幼儿教师自我鉴定
2013/11/02 职场文书
一月红领巾广播稿
2014/02/11 职场文书
经理助理岗位职责
2014/03/05 职场文书
自动一体化专业求职信
2014/03/15 职场文书
大班亲子运动会方案
2014/06/10 职场文书
停车场管理协议书范本
2014/10/08 职场文书
民事赔偿协议书
2014/11/02 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
北京爱情故事观后感
2015/06/12 职场文书
决心书格式范文
2015/09/23 职场文书
ConstraintValidator类如何实现自定义注解校验前端传参
2021/06/18 Java/Android