具有缩略图的多个Highslide图库

Question

我正在使用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
}

然后将返回的hs.expand(this，miniGalleryOptions2)代码更改为相关的库。

Answer 1

有关将来的参考，请参阅此幻灯片常见问题解答：How do I put more than one gallery in the same page?