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中clone()函数实现表单中增加和减少输入项
May 13 jQuery
bootstrap+jQuery实现的动态进度条功能示例
May 25 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery实现简单聊天室
Feb 08 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
项目中应用Redis+Php的场景
2016/05/22 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
PHP abstract与interface之间的区别
2013/11/11 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
2018/07/30 Javascript
JS实现根据指定值删除数组中的元素操作示例
2018/08/02 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
用Python制作简单的钢琴程序的教程
2015/04/01 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
django+xadmin+djcelery实现后台管理定时任务
2018/08/14 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
python实现翻译word表格小程序
2020/02/27 Python
python中tab键是什么意思
2020/06/18 Python
如何利用Python 进行边缘检测
2020/10/14 Python
css3实现的多级渐变下拉菜单导航效果代码
2015/08/31 HTML / CSS
美国精品地毯网站:Boutique Rugs
2020/03/04 全球购物
师生聚会感言
2014/01/26 职场文书
信息员培训方案
2014/06/12 职场文书
2014年民主评议党员个人总结
2014/09/24 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
雷锋的故事观后感
2015/06/10 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书