开始

  • 前几天接到一个小的支持，要做一个有图像预览和操作功能的demo，并且给出了参照的模板。刚开始简单的看了一下给的模板，一个是boxImg.js，另一个是Viewer.js。

问题

  • 其实图片预览的插件有很多，但大多都是点击之后弹出一个模态层显示图片，而本次要求是直接在页面上显示，直接显示在一个div里。刚开始用boxImg做了一版，使用了iframe，直接放到页面当一个div用，效果是挺好，但是副作用感觉也挺大的，而且这个效果比较丑，因为不是我这边使用，是另一个部门的用的，然后就把这一版给pass了。

  • boxImg.js的效果图

  • 做这个东西最大的问题就是不能以模态框的形式显示，后来看了另一个Viewer.js，感觉功能比较强大，也很好看，最重要的是它有一个inline模式，可以局部模态框，最后选中用它来做。

修改

  1. 主要是对实例代码的custom-toolbar.html进行了修改，根据api改为了inline mode，去除了模态框灰色背景，去除了右上角按钮。
  2. 隐藏了背景图片，并且通过定位让底部的工具栏变成了竖的，我觉得横的挺好看的，但需求让改成竖的。
  3. 对于一些样式的修改，主要通过css样式的覆盖，而不是直接改动源码，这样方便以后的开发加工。

效果

  • 普通版

  • 工具栏竖版

相关代码参考我的github：黄焖鸡米饭

Viewer.js的inline模式的更多相关文章

  1. 一款实用的viewer.js 图片相册

    Viewer.js 是一款强大的图片相册插件,像SNS交友网站一般都会用到点击缩略图,弹出层大图片,而且弹出层有多个控制按钮,比如放大缩小.旋转.撤回等,底部有缩略图列表可切换. 支持移动设备触摸事件 ...

  2. Viewer.js 是一款强大的 jQuery 图像浏览插件。

    https://blog.csdn.net/qq_29132907/article/details/80136023 一.效果图  二.代码<!DOCTYPE html><html ...

  3. Viewer.js 图片预览插件使用

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...

  4. 强大的jQuery图片查看器插件Viewer.js

    简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片移动 ...

  5. Viewer.js – 强大的JS/jQuery图片查看器

    简介 Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Viewer.js 有以下特点: ...

  6. viewer.js图片查看器插件（可缩放/旋转/切换）

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. viewer.js的简单练习

    html <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8& ...

  8. 图片查看器——viewer.js

    使用简介 https://github.com/FNNDSC/viewerjs(需要点击遮罩层关闭弹框的复制下面内容) https://www.jianshu.com/p/d98db3815823 v ...

  9. Js 职责链模式 简单理解

    js 职责链模式 的简单理解.大叔的代码太高深了,不好理解. function Handler(s) { this.successor = s || null; this.handle = funct ...

随机推荐

  1. EXCEL生成SQL脚本

    有如下一张数据库表: 当然,Excel也是这个样子的,然后需要通过Excel的命令实现如下的脚本: insert into student(name,age) values('张三',15); 实现的 ...

  2. hadoop在windows上的配置文件

    core-site.xml <configuration> <property> <name>hadoop.tmp.dir</name> <val ...

  3. iOS-模态视图动画

    ios视图切换的动画效果 方法1.把下面的这段代码加到viewController或者view出现的时候就OK self.view.transform=CGAffineTransformMakeSca ...

  4. MOQ中CallBase的作用

    当使用Moq来Mock一个具体的类,类里的方法为virtual时,Moq会将当前类,所有的virtual方法默认重写成空实现. 如果我们想要访问真实的代码,有两种方法 1.在创建Mock时,设置Cal ...

  5. 《剑指offer》数学题及其它 (牛客11.05)

    比较多的思维题,涉及位运算.快速幂.二进制.约瑟夫问题.队列.贪心.dp等等. 难度 题目 知识点 ☆ 12.数值的整数次方 细节,快速幂 ☆☆ 47.求1+2+3+···+n 思维发散 ☆☆ 48. ...

  6. 【miscellaneous】视频浓缩摘要简介

    视频摘要,就是以自动或者半自动的方式,通过分析视频的结构和内容存在的时空冗余,从原始视频中提取有意义的片段,将它们以某种特点的方式重新组合成紧凑的.能够充分表现视频语义内容的浓缩视频. 一.静态视频摘 ...

  7. F2812 DSP程序运行在片内RAM和FLASH的区别

    F2812 DSP程序运行在片内RAM和片内FLASH的区别 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:F2812是带有内部Flash的DSP,与 ...

  8. C/C++.控制台输入（cin/getchar）

    1.类似的函数有:cin.getchar.fgetc 等 2.问题: 最后的"\n"都不取出来... 2.1.对策:(ZC:下面是 我自己使用后的感受) (1)fflush(std ...

  9. vue警告： component lists rendered with v-for should have explicit keys

    warning信息:component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide ...

  10. gcc 与g++的区别

    原文 http://www.cnblogs.com/wb118115/p/5969775.html 什么是gcc / g++ 首先说明:gcc 和 GCC 是两个不同的东西 GCC:GNU Compi ...