显示缩略图旁边的所有按钮
lightSlider show all button next to thumbnails
我需要创建lightSlider (http://sachinchoolur.github.io/lightslider/)画廊,那里有"显示所有照片"旁边的缩略图/。IsPager(如果缩略图计数>= 5显示按钮).
我尝试通过position: absolute来显示,但是显示所有按钮都在最后一个缩略图上。
$('#lightSlider').lightSlider({
gallery: true,
item: 1,
loop: true,
slideMargin: 0,
thumbItem: 6
});
.demo {
width: 420px;
position: relative;
}
ul {
list-style: none outside none;
padding-left: 0;
margin-bottom: 0;
}
li {
display: block;
float: left;
margin-right: 6px;
cursor: pointer;
}
img {
display: block;
height: auto;
max-width: 100%;
}
.show-all {
width: 80px;
height: auto;
background-color: #eee;
border: 1px #ddd;
float: left;
position: absolute;
right: 0;
bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/css/lightslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightslider/1.1.3/js/lightslider.min.js"></script>
<div class="demo">
<ul id="lightSlider">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-3.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-4.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-5.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-6.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-7.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-8.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-9.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-10.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-11.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/thumb/cS-13.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-13.jpg" />
</li>
</ul>
<!-- show all is not part of thumnail list, but next to it -->
<div class="show-all">
<i class="fa fa-camera" aria-hidden="true"></i>
<span>Show all photos</span>
</div>
</div>
分页需要在中间对齐。
好的,这有点棘手,但它几乎可以工作。
https://jsfiddle.net/590f2t74/1/别忘了"See all photos"现在使用的是追加方法
$(".lSSlideOuter").append('<div class="show-all"><i class="fa fa-camera" aria-hidden="true"></i><span>Show all photos</span></div>');
p。S:对于最后一个图片问题,你可以把"查看所有照片"的图片和链接到所有的图片作为JsFiddle。
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 多个单选按钮组相互干扰
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- 通过点击按钮翻转缩略图
- 为缩略图库和较大图像库添加下一个和上一个按钮
- 图像缩略图库中的“下一个”和“上一个”按钮中的“问题”
- 显示带有缩略图和下一个/上一个按钮的图像
- 带按钮的模式上的缩略图
- 带按钮的Jquery缩略图滚动条
- 显示缩略图旁边的所有按钮
- 如何在缩略图面板的下一个和上一个按钮的图像偏移,使用核心javascript
- 需要一个灯箱画廊,从图像文件夹调用,没有缩略图,并从一个按钮点击打开
- 如何在喜欢按钮上选择特定的缩略图照片
- 通过使用JS显示视频缩略图+播放按钮来优化页面中的多个视频播放器对象
- 为每个图像缩略图预览添加删除按钮
- 如何让Pinterest按钮抓取真实大小的博主图像,而不是缩略图
- 设置2016年Facebook共享按钮的缩略图
- 如何获取下一个按钮以使用 JavaScript 显示隐藏的缩略图库
- 如何向从缩略图打开的图像添加关闭按钮