CODEWITHSUNDEEP
highslide
badgerdigital
badgerdigital

Reputation: 53

advance of highslide gallery via jQuery

This is a follow-up from the support forum (thank you 'RoadRash' for your initial help!).

I have a a highslide gallery in which I am attempting to advance with the following javascript/jquery. The gallery has about 70 images in it.

function changeImage()
{
  var theValue = $('#lstOptions2').val();
  $('#thumb' + theValue).trigger('click');
}

This works great for a while but after 10 or 11 function calls the images no longer advance. Using the chrome debugger I'm unable to determine what is happening.

My questions are:

  1. Is there a practical limit to the number of images in a gallery.
  2. I am using a naming convention for the anchors that is non-consecutive. For example, I may have one named 'thumb3456' and then the next would be 'thumb5678' Does highslide expect the anchors to be consecutive?
  3. Is there a method call I missed in the API to select an image by index?

If there is no quick obvious answer I will be happy to post a test link.

Upvotes: 0

Views: 399

Answers (1)

RoadRash
RoadRash

Reputation: 881

I can see from the dev gallery you sent me that you're using an in-page gallery where you are changing the images using a drop-down list in addition to the regular thumbnails in the thumbstrip.

This is our regular in-page gallery: http://highslide.com/examples/gallery-in-page.html This gallery is, like all Highslide galleries, floating on top of the page, but the in-page gallery has code to prevent it from being closed.

This is the demo gallery I created for you in our old forum: http://jsfiddle.net/roadrash/y5nZA/ Note that the gallery is being closed from onchange each time we choose a new image from the drop-down list. 

onchange="document.getElementById(this.options[this.selectedIndex].value).onclick(); hs.close()"

To make it possible to close the gallery from onchange, we have to remove this part in the highslide settings:

// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
    if (/in-page/.test(this.wrapper.className)) return false;
}

And add this, since Highslide also can be closed from the ESC key - which we want to prevent:

// Prevent to close the gallery from ESC key
hs.onKeyDown = function (sender, e) {
    if( e.keyCode == 27 ) return false;
};

You probably didn’t notice these important differences between the regular in-page gallery and my demo gallery. The issue with your dev gallery, is that you actually opens a new gallery each time you choose a new image in the drop-down list. You can see this from the little arrow below the thumbnails in the thumbstrip; it should never be more than one arrow, but in your gallery there’s a new arrow added each time we choose a new image in the drop-down list.

I've created a jsFiddle similar to your dev gallery: http://jsfiddle.net/7tSBE/ Here it's even easier to see that the galleries being stacked on top of each other when using the drop-down list to open new images since the images I’m using have different sizes. (This demo doesn't have the top gallery opened from onImageClick as you have in your dev gallery.)

I can't put all the code you need here, so I've created a new demo gallery very similar to your dev gallery (with the top gallery opened from onImageClick). The HTML markup is the same as yours. The important changes are in the Highslide settings, and there are a couple of more changes than the changes I've mentioned above. http://jsfiddle.net/roadrash/y5nZA/1/

This is the part where you need to add hs.close(); in your code (the line after ChangeImage();). This code doesn't look the same in my demo page.

function SetImageSwatchEvents() {
    $('#lstOptions').bind('change', function () {
        SetImageSwatches(1);
    });

    $('#lstOptions2').bind('change', function () {
        SetImageSwatches(2);
        ChangeImage();
        hs.close();
    });
}

Upvotes: 1

Related Questions