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 相关文章推荐
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
jQuery 查找元素操作实例小结
Oct 02 jQuery
Javascript和jquery在selenium的使用过程
Oct 31 jQuery
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
Nov 07 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 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
mysql 全文搜索 技巧
2007/04/27 PHP
php动态生成版权所有信息的方法
2015/03/24 PHP
php实现留言板功能(代码详解)
2017/03/28 PHP
PHP+Oracle本地开发环境搭建方法详解
2019/04/01 PHP
让whoops帮我们告别ThinkPHP6的异常页面
2020/03/02 PHP
js 加载时自动调整图片大小
2008/05/28 Javascript
js 居中漂浮广告
2010/03/21 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
javascript自动恢复文本框点击清除后的默认文本
2016/01/12 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
JS中判断字符串存在和非空的方法
2018/09/12 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
vue-resource post数据时碰到Django csrf问题的解决
2020/03/13 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
[00:05]ChinaJoy现场 DOTA2玩家高呼“CN DOTA BEST DOTA”
2019/08/04 DOTA
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
python实现随机梯度下降法
2020/03/24 Python
python requests证书问题解决
2019/09/05 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
基于第一个PhoneGap(cordova)的应用详解
2013/05/03 HTML / CSS
AmazeUI 面板的实现示例
2020/08/17 HTML / CSS
新学期开学寄语
2014/01/18 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
护理见习报告范文
2014/11/03 职场文书
聚会通知怎么写
2015/04/23 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
旅游安全责任协议书
2016/03/22 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android