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插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现轮播图及其原理详解
Apr 12 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jQuery - AJAX load() 实例用法详解
Aug 27 jQuery
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现推拉门效果
Oct 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
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
php实现XML和数组的相互转化功能示例
2017/02/08 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
浅析PHP7的多进程及实例源码
2019/04/14 PHP
精通Javascript系列之数值计算
2011/06/07 Javascript
javascript常用方法总结
2015/05/14 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
基于vue.js中关于下拉框的值默认及绑定问题
2018/08/22 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
ES6基础之展开语法(Spread syntax)
2019/02/21 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
Vue调用后端java接口的实例代码
2019/10/28 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python数据挖掘需要学的内容
2019/06/23 Python
PyQt5 QTableView设置某一列不可编辑的方法
2019/06/25 Python
django框架auth模块用法实例详解
2019/12/10 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
PHP笔试题
2012/02/22 面试题
英语系本科生个人求职信
2013/09/21 职场文书
简洁的英文求职信范文
2014/05/03 职场文书
加强作风建设心得体会
2014/10/22 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
mysql 8.0.27 绿色解压版安装教程及配置方法
2022/04/20 MySQL