Highslide: how to use only specific images

Question

How do I make my highslide gallery take only specific images (e.g., contained in a specific div)?

I've got a gallery here: http://civicsector.org.ua/agitation/247-kampanya-chesn-vibori.html, but the problem is that the CMS I'm using outputs the content twice: once for a desktop screen, and once for a mobile screen.

While highslide is loading images from both divs (for desktop and for mobile), the images in the thumbstrip get duplicated.

How do I fix this?

Thanks.

Answer 1

Place your images into a slideShowGroup, per the Highslide JS API:

http://highslide.com/ref/hs.slideshowGroup

Then, the script will load only the images that are tagged as belonging to that group. The references to the images that your CMS creates won't be tagged as belonging to the group, so they won't get loaded into the slideshow twice.

Answer 2

MisterNeutron's answer was perfect for the common usage of highslide. However, in case anyone would use unobtrusive highslide (like myself), you just have to add a check in the hs.onSetClickEventHandler:

    hs.onSetClickEvent = function ( sender, e ) {
        if ($(e.element).closest('.hidden-desktop').length>0) {
            return false;
        }

       // set the onclick for the element
       e.element.onclick = function () {
          return hs.expand(this, inPageOptions);
       }
       // return false to prevent the onclick being set once again
       return false;
    }