Модификация CSS Image Gallery

Question

Я создаю сайт событий, который, очевидно, будет включать календарь событий.Я использую этот пример http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/ для галереи, эффектов наведения и т. Д.

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

Как мне поступить, учитывая код в примере?Возможно ли это без jQuery / Javascript?

Answer 1

Для этого вам нужно использовать JavaScript.

В примере используется :hover для достижения этого эффекта.К сожалению, нужна страница, чтобы «запомнить» что-то.CSS не может сделать это сам по себе.

Вам нужно скопировать стили, содержащиеся в объявлении :hover, в класс, а затем назначить этот класс элементу при наведении курсора мыши.Это также означает, что вы должны удалить этот класс из этого предмета при наведении другого предмета.

Answer 2

Измените стиль .thumbnail:hover span в CSS на что-то вроде .thumbnail_clicked span и добавьте этот код jQuery:

$(document).ready(function() {
    $('.thumbnail').click(function() {
        var cname = 'thumbnail_clicked';
        $(this).addClass(cname).siblings().removeClass(cname);
    });
});

http://jsfiddle.net/mblase75/DxArs/