Как динамически добавить активное состояние с помощью jQuery к миниатюре галереи

Я использую galleriffic для обработки моей галереи изображений, и у меня проблема с активными состояниями миниатюр.

Galleriffic не поддерживает активные состояния изображений - только элементы списка. Прямо сейчас галерея назначит «выбранный» класс текущему LI, содержащему эскиз, и я пытался использовать jQuery для нацеливания на идентификатор эскиза в активном LI, поэтому я назначаю активное состояние изображению, а затем возвращаю его в состояние по умолчанию.

По сути, я делаю:

$('.selected img#myImage').attr('src', 'path_to_active_state.jpg');

Что работает, однако после этого я не могу вернуть изображение к значению по умолчанию. Я не думаю, что есть поддержка jQuery для использования hasClass в выражении if, но если кто-то знает, пожалуйста, помогите. Любые советы приветствуются.


javascript jquery jquery-selectors jquery-plugins
person Patrick    schedule 30.06.2010    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Не могли бы вы попробовать селектор :not? В настоящее время вы делаете это, чтобы получить выбранное изображение:

$('.selected img#myImage').attr('src', 'path_to_active_state.jpg');

Попробуйте сделать это, чтобы получить невыделенное изображение:

$(':not(.selected) img#myImage').attr('src', 'path_to_active_state.jpg');
person Matt Huggins    schedule 30.06.2010

arrow_upward
0
arrow_downward

Вы можете добавить класс к активному изображению, чтобы потом идентифицировать его.

so 

$('.selected img#myImage').attr('src', 'path_to_active_state.jpg').addClass('altered');

и при выделении другого эскиза

$('.altered').attr('src', 'path_to_inactive_state.jpg').removeClass('altered');

также в вашем примере $('.selected img#myImage'), похоже, подразумевает, что вы используете один и тот же идентификатор для всех миниатюр (#myImage). Идентификатор должен быть уникальным внутри модели DOM.

person Gabriele Petrioli    schedule 30.06.2010
comment
Да, я назначил всем изображениям уникальные идентификаторы, чтобы можно было настраивать их по-разному. Я надеялся написать что-то, что получит исходный источник, сохранит его в переменной, назначит новый источник активного изображения и затем вернет его исходному источнику, когда будет выбран другой эскиз. Спасибо за ваш ответ. - person Patrick; 30.06.2010
comment
@Patrick, вам нужно создать логику за активными / неактивными путями к миниатюрам ... чтобы вы могли сделать их активными / неактивными, не зная исходного или измененного состояния ... (например, some -image.jpg для нормального и some-image-active.jpg для активного и манипулируйте src, чтобы добавить / удалить этот суффикс). В моем коде я показываю вам, как добавить класс к активному, чтобы вы могли найти его позже и вернуть в неактивное изображение .. - person Gabriele Petrioli; 30.06.2010