Настройка галереи изображений jQuery

Question

РЕДАКТИРОВАТЬ: этот вопрос частично ответил на данный момент, благодаря Нилу, который поставил меня на правильный путь с помощью плагина scrollTo; однако, как подробно описано ниже, у меня все еще есть проблема с получением ссылок «следующий» и «предыдущий» для правильной настройки списка миниатюр прокрутки по желанию. поэтому мне интересно, не захотят ли другие опытные программисты jQuery сделать это и попытаться помочь мне преодолеть это препятствие ... большое спасибо заранее.

/////////////////////////

Интересно, могут ли какие-нибудь опытные программисты jQuery предложить некоторую помощь в изменении скрипта галереи изображений: я хотел бы использовать Galleriffic в будущем проекте - отличный плагин, если вы не знакомы - но вместо деления миниатюр в страницы, я хотел бы иметь прокручивающий div, отображающий все большие пальцы сразу, как показано здесь .

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

Я надеюсь, что, возможно, есть какая-то существующая функция jQuery для выполнения этой задачи (?), И я заранее благодарю вас за любое направление здесь.

Answer 1

Существует плагин , который сделает это за вас.

Позволяет вам указать элемент, например миниатюру «IMG», к которой вы хотите прокрутить.Это также позволяет вам указать эффекты для того, как выполнять прокрутку.

Ознакомьтесь с примерами того, как его использовать.

По поводу вашего последующего комментария ниже:

Кнопки для перемещения вперед и назад имеют класс «next» или «prev», а привязка, содержащая большое изображение, имеет класс «advance-link», все они имеют атрибут «href» для перехода к следующему / предыдущему слайду.Таким образом, для прокрутки к миниатюре этого слайда вы должны кодировать что-то похожее на то, что показано ниже, в начале или рядом с началом вашего кода jQuery.Я только проверил это на глаз, поэтому в нем может быть опечатка, но вы должны получить дрейф.: * 10101 *

$('.next, .prev, .advance-link').live().click().function(){
    var href  = $(this).attr('href');
    $('#thumbs').scrollTo($('.thumb[href=' + href + ']'), {axis: 'y'});
});

Answer 2

вот грубый пример

$('.current img').live('mouseenter',function(){

    var alt = $(this).attr('alt');
    var thumb = $('.thumbs [alt='+alt+']');
    var position = thumb.position();
    var thumbs = $('.thumbs');
    thumbs.scrollTop(position.top);
});