我试图从另一个元素触发一个隐藏的“灯箱”画廊。 在这种情况下,有一个触发器和一个 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/
感谢任何帮助。
答案 0 :(得分:0)
我对数据羽化库不是很熟悉,但看起来你想要做的只是在图库中显示第一个图像。如果是这种情况,我们可以使用一些小的CSS来做到这一点:
#gallery>a ~ a {
display: none;
}
&#13;
<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>
&#13;
请注意,向data-feather div添加gallery
id,并隐藏除第一个之外的所有a
子元素的css样式。