Lightgallery 哈希插件中的多个画廊?
Multiple galleries in Lightgallery hash plugin?
我无法 运行 插件 Lightgallery 哈希。我的愿望是在同一页面上有两个画廊,点击一个按钮应该显示另一个。如果我没记错的话插件应该这样做。
我添加了这个 HTML 结构:
<div id="hash">
<a href="img/img_port/reportage/img-1.jpg">
<img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
<img src="img/img_port/reportage/thumb-2.jpg" />
</a>
<a href="img/img_port/reportage/img-3.jpg">
<img src="img/img_port/reportage/thumb-3.jpg" />
</a>
<a href="img/img_port/reportage/img-4.jpg">
<img src="img/img_port/reportage/thumb-4.jpg" />
</a>
<div id="hash2">
<a href="img/img_port/reportage/img-1.jpg">
<img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
<img src="img/img_port/reportage/thumb-2.jpg" />
</a>
<a href="img/img_port/reportage/img-3.jpg">
<img src="img/img_port/reportage/thumb-3.jpg" />
</a>
<a href="img/img_port/reportage/img-4.jpg">
<img src="img/img_port/reportage/thumb-4.jpg" />
</a>
还有这个Javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#hash").lightGallery({
download: false,
counter: false,
hash: true;
galleryId: 1
});
$("#hash2").lightGallery({
download: false,
counter: false,
hash: true;
galleryId: 2
});
});
</script>
这是正确的还是错误的?
<script type="text/javascript">
$(document).ready(function() {
$("#hash").lightGallery({
download: false,
counter: false,
hash: true, /*Here is the error.*/
galleryId: 1
});
$("#hash2").lightGallery({
download: false,
counter: false,
hash: true,/*Here is the error.*/
galleryId: 2
});
});
</script>
首先,您应该通过 class 而不是 id 来标识您的画廊。
<div class="lightgallery">
<a href="img/img_port/reportage/img-1.jpg">
<img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
<img src="img/img_port/reportage/thumb-2.jpg" />
</a>
</div>
<div class="lightgallery">
<a href="img/img_port/reportage/img-1.jpg">
<img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
<img src="img/img_port/reportage/thumb-2.jpg" />
</a>
</div>
然后用特定的 class 循环每个并启动 lightGallery()
$('.lightgallery').each(function (index) {
$('#' + this.id).lightGallery({
share: false,
galleryId: index
});
})
我无法 运行 插件 Lightgallery 哈希。我的愿望是在同一页面上有两个画廊,点击一个按钮应该显示另一个。如果我没记错的话插件应该这样做。
我添加了这个 HTML 结构:
<div id="hash">
<a href="img/img_port/reportage/img-1.jpg">
<img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
<img src="img/img_port/reportage/thumb-2.jpg" />
</a>
<a href="img/img_port/reportage/img-3.jpg">
<img src="img/img_port/reportage/thumb-3.jpg" />
</a>
<a href="img/img_port/reportage/img-4.jpg">
<img src="img/img_port/reportage/thumb-4.jpg" />
</a>
<div id="hash2">
<a href="img/img_port/reportage/img-1.jpg">
<img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
<img src="img/img_port/reportage/thumb-2.jpg" />
</a>
<a href="img/img_port/reportage/img-3.jpg">
<img src="img/img_port/reportage/thumb-3.jpg" />
</a>
<a href="img/img_port/reportage/img-4.jpg">
<img src="img/img_port/reportage/thumb-4.jpg" />
</a>
还有这个Javascript:
<script type="text/javascript">
$(document).ready(function() {
$("#hash").lightGallery({
download: false,
counter: false,
hash: true;
galleryId: 1
});
$("#hash2").lightGallery({
download: false,
counter: false,
hash: true;
galleryId: 2
});
});
</script>
这是正确的还是错误的?
<script type="text/javascript">
$(document).ready(function() {
$("#hash").lightGallery({
download: false,
counter: false,
hash: true, /*Here is the error.*/
galleryId: 1
});
$("#hash2").lightGallery({
download: false,
counter: false,
hash: true,/*Here is the error.*/
galleryId: 2
});
});
</script>
首先,您应该通过 class 而不是 id 来标识您的画廊。
<div class="lightgallery">
<a href="img/img_port/reportage/img-1.jpg">
<img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
<img src="img/img_port/reportage/thumb-2.jpg" />
</a>
</div>
<div class="lightgallery">
<a href="img/img_port/reportage/img-1.jpg">
<img src="img/img_port/reportage/thumb-1.jpg" />
</a>
<a href="img/img_port/reportage/img-2.jpg">
<img src="img/img_port/reportage/thumb-2.jpg" />
</a>
</div>
然后用特定的 class 循环每个并启动 lightGallery()
$('.lightgallery').each(function (index) {
$('#' + this.id).lightGallery({
share: false,
galleryId: index
});
})