Изменение свойства css изображения с помощью jquery при нажатии

Question

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

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

спасибо заранее!

вот что я делать есть изображения большего размера при нажатии:

$('ul#live li img').click(function() { 
    $(this).animate({ 
     'width': '515px', 
     'height':'100%' 
    }); 
}); 

мой CSS:

уль # живой литий IMG { ширина: 120px; высота: 72px; }

все. теперь все, что я хочу, - это иметь возможность щелкнуть на другом изображении и перенести первое изображение, вернуться к первоначальной ширине 120 пикселей. Вот и все. Я не пытаюсь удалить его из потока или в любом виде лайтбокса. То, как я это делаю, возможно, не самый лучший способ, я просто изучаю и экспериментирую. Надеюсь, это прояснит ситуацию.

Answer 1

Это можно сделать довольно прямолинейно. То, что я делал в прошлом с аналогичным, дает расширенный элемент новому классу. $(this).addClass('active_element');

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

$('ul#live li img').click(function() { 
    $('.active_element').animate({ 

    //close animation goes here 

    }); 
    $('.active_element').removeClass('active_element'); 

    $(this).animate({ 
     'width': '515px', 
     'height':'100%' 
    }); 

    $(this).addClass('active_element'); 

}); 

Это может быть написано немного аккуратно, но это основной принцип, описанный шаг за шагом.

это не так и грязно, но будет выполнять эту работу.

Answer 2

Это очень широкий вопрос. Вы могли бы написать целую кучу кода, чтобы сделать что-то, что вы считаете довольно простым.

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

Мне нравится один под названием prettyPhoto, который делает что-то похожее на то, что вы описываете, и многое другое. Если это не подходит, существует множество разных плагинов jQuery, которые ничего не делают, кроме как ручных миниатюр, галерей, слайд-шоу, световых ящиков и всех возможных комбинаций.