Приветствую Вас, Гость

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: нибирутяночка, Юлиана  
Форум » Все темы » Помощь по сайту » Картинки во всплывающем окне. (Как реализовать эту возможность тем, кто пишет посты.)
Картинки во всплывающем окне.
Хранитель-ВетерДата: Суббота, 06.10.2018, 21:50 | Сообщение # 1
Безтитульный
Группа: Администраторы
Сообщений: 254
Статус: 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
Старший
Группа: Администраторы
Сообщений: 331
Статус: Offline
Цитата Хранитель-Ветер
Истинный размер картинки открывается во всплывающем окне  
Спасибо огромное!   Как раз об этом хотела спросить. Скопировала код и сохраню его, буду применять. Очень удобно и доступно, достаточно лишь вставить адрес картинки и название.
Так удобно,  конечно, картинку  сделать компактной, с возможностью развернуть во всю ширину.
 
ЮлианаДата: Воскресенье, 07.10.2018, 17:48 | Сообщение # 3
Младший
Группа: Администраторы
Сообщений: 212
Статус: Offline

Цитата
Удачи вам!

Спасибо!!! Будем использовать *))
 
Хранитель-ВетерДата: Четверг, 23.05.2019, 23:00 | Сообщение # 4
Безтитульный
Группа: Администраторы
Сообщений: 254
Статус: 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
Старший
Группа: Администраторы
Сообщений: 331
Статус: Offline
Спасибо, применим обновлённый код 
 
Хранитель-ВетерДата: Пятница, 31.05.2019, 21:08 | Сообщение # 6
Безтитульный
Группа: Администраторы
Сообщений: 254
Статус: Offline
Появилась необходимость сказать об использовании спойлеров в комментариях и на форумах. В редакторе эта возможность предусмотрена, но мы ею почему-то не пользовались. Задуматься об этом пришлось в связи с мобильной версией сайта, когда картинки в комментариях сильно затрудняют просмотр основного текста, "выпирая" за границы окна: или картинку видно частично, а текст читается хорошо, или, если картинка видна вся, то "уплывает" текст. Помещая же картинки, или видео, в спойлер, мы можем избежать подобного эффекта. Надеюсь на это.

P.S: внимательно рассмотрите меню редактора.



 
нибирутяночкаДата: Пятница, 31.05.2019, 21:22 | Сообщение # 7
Старший
Группа: Администраторы
Сообщений: 331
Статус: Offline
Спасибо, получилось, будем применять!  Очень даже пригодится!   

 
Хранитель-ВетерДата: Воскресенье, 17.05.2020, 14:28 | Сообщение # 8
Безтитульный
Группа: Администраторы
Сообщений: 254
Статус: Offline
.В статьях можно использовать блочный способ добавления картинок с помощью тегов
Код
<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;
   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>

Удачи вам в ваших экспериментах!
Подробно можно почитать здесь.
 
Форум » Все темы » Помощь по сайту » Картинки во всплывающем окне. (Как реализовать эту возможность тем, кто пишет посты.)
  • Страница 1 из 1
  • 1
Поиск: