Несколько галерей Highslide с Thumbstrip

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> 

EDIT: Я понял это сейчас. Мне просто нужно было создать несколько новых наборов опций в области конфигурации следующим образом:

var miniGalleryOptions1 = { 
    thumbnailId: 'thumb1', 
    slideshowGroup: 1 
} 

var miniGalleryOptions2 = { 
    thumbnailId: 'thumb2', 
    slideshowGroup: 2 
} 

, а затем изменить обратный hs.expand (это, miniGalleryOptions2) код в соответствующей галерее.

Answer 1

Для справок в будущем - см. Эту часто задаваемую вопросы с высокими скоростями: How do I put more than one gallery in the same page?