SITE LOGO
Главная » Статьи » Делаем свой сайт » Сайт на Юкоз
Искажаются изображения в материалах
Какая возникла проблема: когда вставляются изображения ссылкой в статью, они искажаются. Что где исправить-добавить, чтобы к этим изображениям не применялся какой-то из стилей? То, что получилось в итоге можно посмотреть на этой страничке сайта "Искусство краски".

Проблема крылась в файле стиля (главный файл).

Вот код стиля

.eMessage img {
max-width: 25%;
border: 3px;
margin:5px 20px 10px 0px;
border-radius: 20px 0 30px 0; /* top left, top right, bottom right, bottom left */
background: #fff; /* Цвет фона */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
padding: 10px;
}
.eText img {
border: 3px;
margin:5px 20px 10px 0px;
border-radius: 20px 0 30px 0; /* top left, top right, bottom right, bottom left */
background: #fff; /* Цвет фона */
box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
padding: 10px;
}

В таком варианте картинки в самой статье отображаются не корректно.

Удалила вот эту строчку

max-width: 25%;

и получила в тексте грамотно смотрится, а в конце открывается полное фото, а надо превью именно в 25%... То есть теперь проблема наоборот. Что будет заметно, если ниже будет больше фотографий, они столпотворение устроят... Это фото загруженные при создании статьи. Что делать?

Пока временное решение вот так:

.eMessage img {
width: 25%;
height: 25%;
...
}

Но теперь надо обязательно прописывать ссылку на увеличение к каждой картинке на сайте. Так отображение улучшается.

Кстати, как сделать, чтобы картинки, что идут по ссылке, открывались в лайт-боксе? Я нашла только в новом окне (всплывающем) открываются, но их надо закрывать и нельзя листать. Плюс оформление ужасное. Надо в CSS прописывать что-то? Надо, чтобы было похоже на всплывающее окно, как при прикреплении картинок. Как-то можно этот процесс автоматизировать, чтобы не прописывать к каждой картинке свои правила? Мне надо знать для картинок подгружаемых по ссылкам.

lightbox для картинок прописывается как

<a href="ссылка на большую картинку" class="ulightbox" target="_blank" title="Нажмите, для просмотра в полном размере..."><img alt="альтернативное название картинки" style="margin:0;padding:0;border:0;" src="ссылка на маленькую картинку"></a>


Тогда при нажатии на маленькую картинку будет открываться большая картинка в красивом окне

Либо при добавлении материала установите галочку "Кликабельное изображение"



Ознакомьтесь с данной инструкцией
Источник: ​forum.ucoz.ru
Категория: Сайт на Юкоз | Добавил: admin (2016-09-08)
Просмотров: 1413 | Теги: искажаются изображения в материалах, едет картинка, стиль картинок в тексте | Рейтинг: 0.0/0