Применить разные правила при нажатии на разные миниатюры (jQuery) ⇐ CSS

[Anonymous]

Я в значительной степени новичок в сфере HTML/CSS и столкнулся с вызовом JQUERY с тех пор, как я начал создавать свой первый веб -сайт. Я хочу создать галерею изображений с питанием от jQuery, используя миниатюры. Учебным пособием, которым я следовал в этом отношении, был Иван Лазаревич (http://workshop.rs/2010/07/create-image ... of-jquery/). Я также использовал замену большого изображения с другим, когда нажимается миниатюра (галерея) < /p>
Код, который он предоставляет, заменяет большое изображение на дисплее на большую версию миниатюры, которая была нажата. Кажется, это работает довольно гладко, но только для картин, которые имеют одинаковую ориентацию. Следующий код появляется в двух разных файлах, таким образом установив разницу между горизонтальными и вертикальными изображениями: < /p>

Код: Выделить всё

[img]Images/Projects/UOW/UOWII_large.jpg[/img]

< /code>
и: < /p>

[img]Images/Projects/UOW/UOWI_large.jpg[/img]

Я создал различные правила CSS как для параметров bigimage и bigimagevertical , в зависимости от того, имеет ли изображение портрет или ландшафтная ориентация.
#largeImage {
position: fixed;
height: 83%;
width:auto;
top: 15%;
left: 5%;
}
< /code>
и: < /p>
#largeImageVERTICAL {
position: fixed;
height: 83%;
width:auto;
top: 15%;
left: 36.36%;
}
< /code>
Эти два правила просто размещают изображения в разные точки экрана. Тем не менее, я хотел бы знать, как изменить свой код, чтобы я мог создать страницу с изображениями как портрета, так и с ландшафтом, применяя правило CSS, которое принадлежит каждому. До сих пор у меня есть то, что я получил от подхода Lazarevic, то есть: < /p>
$('#thumbs img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
< /code>
Этот код просто заменяет миниатюры на более крупные картинки. Как уже говорилось, я хочу иметь возможность применить правильное правило к правильному изображению, и я предполагаю, что это должно быть сделано через некоторое кодирование JS, о чем я почти ничего не знаю. Есть идеи, как заставить это работать? Может быть, функция JS, которая говорит машине использовать то или иное правило CSS в зависимости от того, на какое изображение нажимается? Я действительно застрял здесь ...
Заранее!

Подробнее здесь: https://stackoverflow.com/questions/154 ... ils-jquery