Comments (3)
Unsupported.
from viewerjs.
Hi,
If it's not too late.
I've added arrows to the left and right for greater simplicity.
You'll need the 'https://fontawesome.com/' library that I used for the arrows.
I also used it to replace the pictos at the bottom (images) with 'fontaweasome' to get much better quality icons.
But there may be other possibilities in CSS.
in 'viewer = new Viewer(imagesviewer[0], {
ready() {
...//Here
}'
var gallery = $("#gallery img");
var viewer_arrows = '<div id="viewer-arrows" class="hidden">' +
'<a id="viewer-prev" class="fas fa-chevron-left" onclick="viewer.prev(loop=1);"></a>' +
'<a id="viewer-next" class="fas fa-chevron-right" onclick="viewer.next(loop=1);"></a>' +
'</div>';
$('.viewer-footer').append(viewer_arrows);
if (gallery.length > 1) $("#viewer-arrows").removeClass("hidden");
css
#viewer-prev, #viewer-next {
position: absolute;
z-index: 2020;
font-size: 60px;
bottom: 52px;
color: rgba(0, 0, 0, 0.6);
cursor: pointer;
-webkit-text-stroke-width: 1.5px;
-webkit-text-stroke-color: white;
}
#viewer-prev {
left: 2px;
}
#viewer-next {
right: 2px;
}
#viewer-prev:hover, #viewer-next:hover {
color: white;
-webkit-text-stroke-color: black;
}
That's one aspect of the rendering.
If it helps anyone.
It would be great if this could be integrated into a future version.
Xav
from viewerjs.
prev and next button in the bottom toolbar is not convenient, look forward to have left and right arrow.
from viewerjs.
Related Issues (20)
- 幻灯片放映时,也许不需要自动播放
- Blinking title HOT 4
- Add `isShown` to TypeScript annotations HOT 4
- viewerjs/dist/viewer.css中的background-color写法有问题?
- Can't reload the viewerjs web page in ios mobile. When I reload the web page it shows the pop-up that asks "if you want to download the page" HOT 1
- 全屏播放图片时,图片会先铺满屏幕,再变为正常比例 HOT 1
- Images with `loading="lazy"` attribute break the viewer in Safari HOT 1
- 如何监听图片切换事件 next()与 prev() HOT 1
- 网络安全漏洞修复
- 请问可以自定义关闭按钮吗? HOT 1
- 打包后的源码文件路径为绝对路径 HOT 1
- 如何移除单击预览的事件? HOT 1
- 不适用于shadow-root下面的节点 HOT 1
- 能否支持 3 / 10, 这样的分页标记,底下的navbar固然好看,但是不够直观当前预览的是多少张图片 HOT 1
- layui框架 弹出层 中使用viewer预览图片,预览层显示在弹窗之下,有没有方法可以调整层级? HOT 1
- 只有少部分Mac用户会出现点击展示的图片正确显示弹窗和toolbar,但是弹窗内没有图片,有遇到过这种情况的吗?可否给个排查的思路 HOT 3
- Can't move image with Touch when image is small HOT 1
- 父级组件频繁在 display:none 和 display:block 之间切换,viewer.js 无法获取父级宽度 HOT 1
- Scrollable Viewer Navbar
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from viewerjs.