|
Картинки во всплывающем окне.
|
|
| Хранитель-Ветер | Дата: Суббота, 06.10.2018, 21:50 | Сообщение # 1 |
 Безтитульный
Группа: Администраторы
Сообщений: 265
Статус: Offline
| Часто бывает так, что добавляемая в текст картинка оказывается слишком большой и "не вписывается" в ширину страницы. Если нужно соблюсти стиль записей, мы можем изменить размеры вставляемого изображения (везде, кроме комментариев, форума и гостевой). Посмотрите, как это сделано в последних записях блога: Октябрь - бармен...; БЫТЬ; Вот... Истинный размер картинки открывается во всплывающем окне. Конечно, это самый простой способ, но для начала и это хорошо. Возможно, со временем мы найдем более красивый и простой способ, а пока покажу вам код, в котором нужно лишь вставить в двух местах адрес вашей картинки.Скопируйте этот код и в режиме html-редактора вставьте в нужное место. Название картинки не обязательно, поэтому ковычки можно оставить пустыми. Удачи вам! Код <div align="left"><a href="Адрес картинки.jpg" onclick="return jsiBoxOpen(this)" rel="rr" title=""><img alt="Название картинки" src="Адрес картинки.jpg" style="margin-top: 5px; margin-bottom: 5px; width: 320px; height: auto;box-shadow: 0 5px 12px 1px #464646;" /></a></div>
|
| |
| |
| нибирутяночка | Дата: Суббота, 06.10.2018, 22:05 | Сообщение # 2 |
 Старший
Группа: Администраторы
Сообщений: 344
Статус: Offline
| Цитата Хранитель-Ветер
Истинный размер картинки открывается во всплывающем окне
Спасибо огромное!  Как раз об этом хотела спросить. Скопировала код и сохраню его, буду применять. Очень удобно и доступно, достаточно лишь вставить адрес картинки и название.
Так удобно, конечно, картинку сделать компактной, с возможностью развернуть во всю ширину.
|
| |
| |
| Юлиана | Дата: Воскресенье, 07.10.2018, 17:48 | Сообщение # 3 |
 Младший
Группа: Администраторы
Сообщений: 223
Статус: Offline
|
Спасибо!!! Будем использовать *)) 
|
| |
| |
| Хранитель-Ветер | Дата: Четверг, 23.05.2019, 23:00 | Сообщение # 4 |
|
Безтитульный
Группа: Администраторы
Сообщений: 265
Статус: Offline
| Показанный выше код можно немного видоизменить и "дивы" заменить на символы строки:Код <p><a href="Адрес картинки.jpg" onclick="return jsiBoxOpen(this)" rel="rr" title=""><img alt="Название картинки" src="Адрес картинки.jpg" style="margin-top: 5px; margin-bottom: 5px; width: 320px; height: auto;box-shadow: 0 5px 12px 1px #464646;" /></a></p>
|
| |
| |
| нибирутяночка | Дата: Четверг, 23.05.2019, 23:33 | Сообщение # 5 |
|
Старший
Группа: Администраторы
Сообщений: 344
Статус: Offline
| Спасибо, применим обновлённый код 
|
| |
| |
| Хранитель-Ветер | Дата: Пятница, 31.05.2019, 21:08 | Сообщение # 6 |
|
Безтитульный
Группа: Администраторы
Сообщений: 265
Статус: Offline
| Появилась необходимость сказать об использовании спойлеров в комментариях и на форумах. В редакторе эта возможность предусмотрена, но мы ею почему-то не пользовались. Задуматься об этом пришлось в связи с мобильной версией сайта, когда картинки в комментариях сильно затрудняют просмотр основного текста, "выпирая" за границы окна: или картинку видно частично, а текст читается хорошо, или, если картинка видна вся, то "уплывает" текст. Помещая же картинки, или видео, в спойлер, мы можем избежать подобного эффекта. Надеюсь на это.
P.S: внимательно рассмотрите меню редактора.
|
| |
| |
| нибирутяночка | Дата: Пятница, 31.05.2019, 21:22 | Сообщение # 7 |
|
Старший
Группа: Администраторы
Сообщений: 344
Статус: Offline
| Спасибо, получилось, будем применять! Очень даже пригодится!
|
| |
| |
| Хранитель-Ветер | Дата: Воскресенье, 17.05.2020, 14:28 | Сообщение # 8 |
|
Безтитульный
Группа: Администраторы
Сообщений: 265
Статус: Offline
| .В статьях можно использовать блочный способ добавления картинок с помощью тегов При этом можно реализовать любые используемые скрипты для отображения картинок, например, во всплывающем окне, или отдельном окне/вкладке. Код выглядит просто: Код <style type="text/css">figure { background: none; padding: 1px; display: block; width: 300px; float: center; margin: 0 5px 20px 0; text-align: center; figcaption { color: #fff; } </style> <figure><img src="Адрес картинки" style="width: 300px; height: auto;box-shadow: 0 5px 12px 1px #464646;" /></figure> Здесь указаны и отступы, и ширина картинки, которую можно менять в зависимости от ваших нужд. Код стиля включает также стиль подписи под картинкой тегом figuranion , где #fff - цвет подписи в буквенном(от A до F), или числовом(от 0 до 9) и смешанном виде, например, #d5c. Стиль можно поставить в любое место вашего поста в режиме редактирования html, а картинку - между тегами figure и /figure вместо слов в кавычках "Адрес картинки". Часть стиля подписи к картинке, если подписи нет, ставить не обязательно. Тогда вид кода будет таким: Код <style type="text/css">figure { background: none; padding: 1px; display: block; width: 300px; float: center; margin: 0 5px 20px 0; text-align: center; </style> <figure><img src="Адрес картинки" style="width: 300px; height: auto;box-shadow: 0 5px 12px 1px #464646;" /></figure> Удачи вам в ваших экспериментах! Подробно можно почитать здесь. |
| |
| |
