Какая возникла проблема: когда вставляются изображения ссылкой в статью, они искажаются. Что где исправить-добавить, чтобы к этим изображениям не применялся какой-то из стилей? То, что получилось в итоге можно посмотреть на этой страничке сайта "Искусство краски".
Проблема крылась в файле стиля (главный файл).
Вот код стиля
.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
