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实现一个简单的验证码功能
Jun 26 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
Jan 08 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jquery实现动态改变css样式的方法分析
May 27 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
原生jQuery实现只显示年份下拉框
Dec 24 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
菜鸟修复电子管记
2021/03/02 无线电
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
使用Yii2实现主从数据库设置
2016/11/20 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
与jquery serializeArray()一起使用的函数,主要来方便提交表单
2011/01/31 Javascript
myeclipse安装jQuery插件的方法
2011/03/29 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
2017/03/09 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
React学习之受控组件与数据共享实例分析
2020/01/06 Javascript
JavaScript鼠标悬停事件用法解析
2020/05/15 Javascript
Python编写电话薄实现增删改查功能
2016/05/07 Python
详解python while 函数及while和for的区别
2018/09/07 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
keras的siamese(孪生网络)实现案例
2020/06/12 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
大学生实习思想汇报
2014/01/12 职场文书
新学期校长寄语
2014/01/18 职场文书
优秀教师先进事迹
2014/01/22 职场文书
初中生自我评价
2014/02/01 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
裁员通知
2015/04/25 职场文书
2015年中秋寄语
2015/07/31 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python