我正在使用 highslide 并希望有一个包含许多小画廊的页面,涵盖不同的主题。我有一个画廊工作得很好,但是当我创建更多画廊时,来自所有不同画廊的图像都会显示在一个拇指条中。我怎样才能确保画廊是分开的?我确信这非常简单,但我正在努力解决它。
目前我的前两个画廊代码如下:
<div class="servicebox">
<h2>Radiators</h2>
<div class="highslide-gallery">
<a class='highslide' id="thumb1" href='assets/photos/radiators/01.jpg' title="" onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='assets/photos/radiators/01_thm.jpg' alt=''/>
</a>
<div class="hidden-container">
<a class='highslide' href='assets/photos/radiators/02.jpg' title="" onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='assets/photos/radiators/02_thm.jpg' alt=''/>
</a>
<a class='highslide' href='assets/photos/radiators/03.jpg' title="" onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='assets/photos/radiators/03_thm.jpg' alt=''/>
</a>
</div>
</div>
</div>
<div class="servicebox">
<h2>Bathrooms</h2>
<div class="highslide-gallery">
<a class='highslide' id="thumb1" href='assets/photos/bathrooms/01.jpg' title="" onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='assets/photos/bathrooms/01_thm.jpg' alt=''/>
</a>
<div class="hidden-container">
<a class='highslide' href='assets/photos/bathrooms/02.jpg' title="" onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='assets/photos/bathrooms/02_thm.jpg' alt=''/>
</a>
<a class='highslide' href='assets/photos/bathrooms/03.jpg' title="" onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='assets/photos/bathrooms/03_thm.jpg' alt=''/>
</a>
<a class='highslide' href='assets/photos/bathrooms/04.jpg' title="" onclick="return hs.expand(this, miniGalleryOptions1)">
<img src='assets/photos/bathrooms/04_thm.jpg' alt=''/>
</a>
</div>
</div>
</div>
编辑:我现在想通了。我只需要在配置区域中设置几个新选项集,如下所示:
var miniGalleryOptions1 = {
thumbnailId: 'thumb1',
slideshowGroup: 1
}
var miniGalleryOptions2 = {
thumbnailId: 'thumb2',
slideshowGroup: 2
}
然后将 return hs.expand(this, miniGalleryOptions2) 代码更改为相关画廊。