продвижение галереи высокого уровня через jQuery

Question

Это продолжение с форума поддержки (спасибо «RoadRash» за вашу первоначальную помощь!).

У меня есть галерея высокого уровня, в которой я пытаюсь продвинуться со следующим javascript/jquery. В галерее около 70 изображений.

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

Это работает отлично, но после 10 или 11 функций звонки изображения больше не продвигаются. Используя хром-отладчик, я не могу определить, что происходит.

Мои вопросы:

1. Есть ли практический предел количества изображений в галерее.
2. Я использую соглашение об именах для якорей, которые не являются последовательными. Например, у меня может быть один с именем «thumb3456», а затем следующий будет «thumb5678». Неужели highslide ожидает, что якоря будут последовательными?
3. Есть ли метод вызова, который я пропустил в API, чтобы выбрать изображение по индексу?

Если нет быстрого очевидного ответа, я с удовольствием разместим тестовую ссылку.

Answer 1

Из галереи dev вы можете видеть, что вы используете галерею на странице, где вы меняете изображения, используя раскрывающийся список в дополнение к обычным эскизам в наброске.

Это наша регулярная страница в галерее: http://highslide.com/examples/gallery-in-page.html Эта галерея, как и все галереи Highslide, находится в верхней части страницы, но в галерее на странице есть код, чтобы предотвратить его закрытие.

Это демо-галерея я создал для вас в нашем старом форуме: http://jsfiddle.net/roadrash/y5nZA/ Обратите внимание, что галерея закрывается от onchange каждый раз, когда мы выбираем новое изображение из выпадающего списка.

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

Чтобы сделать это возможным, чтобы закрыть галерею из onchange, мы должны удалить эту часть в настройках Highslide:

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

И добавить к этому, так как Highslide также может быть закрыт с помощью клавиши ESC - что мы хотим предотвратить:

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

Вы, вероятно, не заметили эти важные различия между обычной галереей на странице и моей демо-галерее. Проблема с вашей галереей dev заключается в том, что вы фактически открываете новую галерею каждый раз, когда вы выбираете новое изображение в раскрывающемся списке. Вы можете видеть это из маленькой стрелки под эскизами в наброске; он никогда не должен быть больше одной стрелки, но в вашей галерее добавляется новая стрелка каждый раз, когда мы выбираем новое изображение в раскрывающемся списке.

Я создал jsFiddle, подобный вашей галерее разработчиков: http://jsfiddle.net/7tSBE/ Здесь еще проще увидеть, что галереи располагаются друг над другом при использовании раскрывающегося списка для открытия новых изображений с тех пор, как изображения, которые я использую имеют разные размеры. (В этой демонстрации нет верхней галереи, открытой из onImageClick, как у вас в галерее разработчиков.)

Я не могу разместить весь код, который вам нужен здесь, поэтому я создал новую демонстрационную галерею, очень похожую на вашу галерею разработчиков (с верхней галереей, открытой из onImageClick). Разметка HTML такая же, как ваша. Важные изменения в настройках Highslide, и есть еще несколько изменений, чем упомянутые выше изменения. http://jsfiddle.net/roadrash/y5nZA/1/

Это то место, где вы должны добавить hs.close(); в свой код (строка после ChangeImage();). Этот код не выглядит одинаково на моей демонстрационной странице.

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

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