Помогите сделать BBcode всплывающего изображения (картинки залиты на тот же хостинг, что и форум). Проблема в том, что картинка должна "всплывать" при наведении курсора на строку (автор/название), которое само по себе является BBcode. То есть корректно должны работать несколько BBcode.
Комментарии: 10

CabinetAdmin 10 июн 2024, 19:09 Сообщение

На вскидку:

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

<span class="tooltip-span">
	<span class="tooltip-span-item">{TEXT1}</span>
	<span class="tooltip-span-content">{TEXT2}</span>
</span>
и в стили добавить:

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

/* ToolTip Span */
.tooltip-span {
	display: inline;
	position: relative;
}

.tooltip-span-item {
	background: rgba(0,0,0,0.15);
	cursor: pointer;
	display: inline-block;
	padding: 0 10px;
}

.tooltip-span-content {
	position: absolute;
	z-index: 9999;
	width: 200px;
	height: 160px;
	left: 50%;
	margin: 0 0 20px -105px;
	padding: 2px;
	bottom: 100%;
	font-size: 0.765em;
	text-align: left;
	box-shadow: -5px -5px 15px rgba(48,54,61,0.2);
	background: #2a3035;
	color: #fff;
	opacity: 0;
	cursor: default;
	pointer-events: none;
}

.tooltip-span .tooltip-span-content {
	transform: translate3d(0,-10px,0);
	transition: opacity 0.3s, transform 0.3s;
}

.tooltip-span:hover .tooltip-span-content {
	pointer-events: auto;
	opacity: 1;
	transform: translate3d(0,0,0) rotate3d(0,0,0,0);
}

.tooltip-span-content::after {
	content: '';
	top: 100%;
	left: 50%;
	border: solid transparent;
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: transparent;
	border-top-color: #2a3035;
	border-width: 10px;
	margin-left: -10px;
}

.tooltip-span-content img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
Размеры изображения здесь:
width: 200px;
height: 160px;

Использование можно придумать какое угодно, например:

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

[tooltip={TEXT1}]{TEXT2}[/tooltip]

По идее проблем с отображением в других ббкодах быть не должно.
Если текст будет с краю сообщения, то из-за всплывашки будет горизонтальный скролл. Не проверял, но должен быть.
Можно конечно сделать чтобы без горизонтального скролла, но это надо скрипт подключать, а ради одного маленького ббкода.... ну как-то такое себе.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 10 июн 2024, 19:25 Сообщение

Если я правильно понял, то текст1 — изображение, а текст 2 — строка. То есть в тексте1 прописать адрес, а текст2 — всю строку со всеми ббкодами (те, что относятся к строке) внутри? Честно говоря, трудно верится, что они не будут конфликтовать.
  • 0
"Детектив — это интеллектуальный жанр, основанный на фантастичном допущении того, что в раскрытии преступления главное не доносы предателей или промахи преступника, а способность мыслить" ©. Х.Л. Борхес

CabinetAdmin 11 июн 2024, 15:29 Сообщение

Если так:

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

[tooltip={TEXT1}]{TEXT2}[/tooltip]
то:

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

[tooltip=текст]картинка[/tooltip]

Можно сделать так:

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

[tooltip={URL}]{TEXT}[/tooltip]
и замена:

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

<span class="tooltip-span">
	<span class="tooltip-span-item">{TEXT}</span>
	<span class="tooltip-span-content"><img src="{URL}" alt="" /></span>
</span>
т.е. без всяких дополнительных ббкодов, текст и ссылка на картинку.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 11 июн 2024, 15:40 Сообщение

CabinetAdmin, вы меня не правильно поняли. Мне именно нужно, чтобы в тексте работали все ббкоды, которые связаны с текстом. А при наведении курсора на текст, просто всплывало изображение. Просто меня смутило в вашем ответе, что все сработает. Если нужно, то скину вам в ЛС одну из таких строк (код)
  • 0
"Детектив — это интеллектуальный жанр, основанный на фантастичном допущении того, что в раскрытии преступления главное не доносы предателей или промахи преступника, а способность мыслить" ©. Х.Л. Борхес

CabinetAdmin 12 июн 2024, 09:01 Сообщение

Ну, теперь не понял.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 12 июн 2024, 18:14 Сообщение

http://impossible-crimes.ru/Forum/viewt ... 900#p69900

Вроде разобрался. Но вот откуда появился этот фон (вроде темно-коричневый)? Вроде нигде в стилях не прописано. Нужно без фона, как выше (на примере)
  • 0
"Детектив — это интеллектуальный жанр, основанный на фантастичном допущении того, что в раскрытии преступления главное не доносы предателей или промахи преступника, а способность мыслить" ©. Х.Л. Борхес

CabinetAdmin 12 июн 2024, 20:49 Сообщение

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

.tooltip-span-item {
	background: rgba(0,0,0,0.15);
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр 13 июн 2024, 10:44 Сообщение

Супер. Только один момент: после строки в этом коде и перед продолжением текста появляется пробел. Как его убрать?
  • 0
"Детектив — это интеллектуальный жанр, основанный на фантастичном допущении того, что в раскрытии преступления главное не доносы предателей или промахи преступника, а способность мыслить" ©. Х.Л. Борхес

CabinetAdmin 13 июн 2024, 17:40 Сообщение

Там же: padding: 0 10px;
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

ПитерПетр Сегодня, 16:49 Сообщение

   А есть вариант, чтобы не строго фиксировать размер, а устанавливать только нужную высоту, а ширина сама пропорционально корректировалась? Дело в том, чтобы брать нужное изображение с инета (а там они обычно довольно большие) и устанавливать нужный мне размер. Сейчас ббкод просто отрезает часть от изображения.
  • 0
"Детектив — это интеллектуальный жанр, основанный на фантастичном допущении того, что в раскрытии преступления главное не доносы предателей или промахи преступника, а способность мыслить" ©. Х.Л. Борхес

Похожие темы