javascript - 是否可以从另一个元素触发 data-featherlight-gallery?
问题描述
我正在尝试从另一个元素触发隐藏的“灯箱”画廊。在这种情况下,有一个触发器和一个data-featherlight-gallery。触发器应该会弹出灯箱,就像您单击data-featherlight-gallery中的链接一样。
HTML
// when you click on this div
<div class="trigger">
<a href="#"></a><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
</div>
<hr>
// you should be able to trigger the behaviour of this featherlight gallery
<div class="toggle">
<h3>Gallery</h3>
<div data-featherlight-gallery data-featherlight-filter="a">
<a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
<a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
<a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
</div>
</div>
我做了一个 JSfiddle:http: //jsfiddle.net/joaoalvesmarrucho/JNsu6/595/
将不胜感激任何帮助。
解决方案
我对 data-feather 库不是很熟悉,但似乎您想要做的只是显示图库中的第一张图片。如果是这种情况,我们可以使用一些小的 CSS 来做到这一点,例如:
#gallery>a ~ a {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.js"></script>
<script src="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.js"></script>
<link href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.css" rel="stylesheet"/>
<link href="https://rawgit.com/noelboss/featherlight/master/src/featherlight.gallery.css" rel="stylesheet"/>
<div>
<h3>Gallery</h3>
<div id="gallery" data-featherlight-gallery data-featherlight-filter="a">
<a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
<a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
<a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
</div>
</div>
请注意gallery
向 data-feather div 和隐藏除第一个之外的所有a
子元素的 css 样式添加了一个 id。
推荐阅读
- ios - 使用 appstore 验证应用程序时出现代码登录问题
- django - 无法在 Django 网站上转发或跳过视频
- rest - 如何正确使用 REST API 上传 Salesforce 文件?
- python - Python Tkinter 按钮冻结解决方案?
- java - Cucumber/Gherkin 测试被 TestNG 忽略但适用于 JUnit
- tomcat - HTTP 请求/响应:端口 80 到端口 8085
- javascript - React 导入语句的标准方式
- java - 定义 jboss-web.xml 安全域会导致我的 EJB 缺少依赖项
- python - 如何从python中的字节数组中获取位?
- sql - 最近两个月的记录和他们在oracle中的差异