Можно ли немного видоизменить скрипт?

Question

[amalchikov]

Имеется скрипт галерии с зумом на этой странице.
Интересует самая верхняя галерея, где надпись: "Стандартные установки с галереей".
При наведении на маленькие изображения, картина подсвечивается красной границей, вопрос, как можно изменить скрипт, чтобы когда нажимаешь на маленькую картинку (она после этого появляется слева в увеличенном размере), эта маленькая картинка так и оставалась с красной границе, чтобы человек понимал какую из картинок он сейчас рассматривает через зум? Граница картинке здесь придается через css с помощью hover. Попробовал то же самое для картинки через active, и не получилось, что в принцие логично)

Answer 1

[Павел Елизарьев]

Возможность, конечно, имеется: Вам необходимо при изменении состояния списка выбора фиксировать данное состояние у элемента. Лично я бы реализовал данную задачу через дополнительный маркерный класс с соответствующим оформлением, а при событии клика по элементу списка вызывал бы его перераспределение.

Comments

[amalchikov]

Но в данном скрипте он идет не списком, а с помощью ссылок, каждая картинка в таком виде:

<a href='/images/documents/bigimage00.jpg' class='cloud-zoom-gallery' title='CULT MASS PROTEIN(клубника)' rel="useZoom: 'zoom1', smallImage: '/images/documents/smallimage.jpg' "><img class="zoom-tiny-image" src="/images/documents/tinyimage.jpg" alt = "CULT MASS PROTEIN(клубника)"/></a>

[amalchikov]

И все ссылки объединены вместе с помощью div

[amalchikov]

о каком дополнительном маркерном классе идет речь? не могу понять

[Павел Елизарьев]

amalchikov: я не ясно выразился, ведь перечисление картинок тоже список. Имею ввиду, что к части кода class='cloud-zoom-gallery' можно добавлять что-то типа class='cloud-zoom-gallery selected'. Судя по потребности стиль selected должен быть как у ховера. Этот маркерный стиль должен выставляться при клике на картинку, а с друих картинок он должен в этот момент убираться.

[amalchikov]

не нашел я что-то selected в css)))) его как ховер не применить по ходу)

.zoom-tiny-image:selected {
	border:2px solid #FF7111;		
}

и сюда попробовал

a.cloud-zoom-gallery:selected{
border:2px solid #FF7111;
}

[Павел Елизарьев]

amalchikov: видимо я опять неясно выражаюсь. Надо не псевдо класс сделать, а совершенно обычный. А затем еще скрипт написать с реакцией на событие выбора.