Как реализовать вывод текста в другом блоке при наведении на фото?

Question

[RushV]

Здравствуйте!
Видел много примеров по этой функции и везде по разному делают.
Как правильно реализовать такой вывод текста при наведении на фотографию без конфликтов?
У меня есть код js как правильно вписать или реализовать вывод текста на другой блоке?

<div id="wrapper">
						<img src='img/1.jpg' alt=''/>
						<img src='img/2.jpg' alt=''/>
						<img src='img/3.jpg' alt=''/>
						<img src='img/4.jpg' alt=''/>
						<img src='img/5.jpg' alt=''/>
						<img src='img/6.jpg' alt=''/>
						<img src='img/7.jpg' alt=''/>
						<img src='img/8.jpg' alt=''/>	
					</div>

JS

var num = 8; // Число картинок
	var wrapper = 200; // Размер "холста" для расположения картинок
	var radius = 150; // Радиус нашего круга

	$(document).ready(function() {
	  for (i=0;i<num; i++){
		var f = 2 / num * i * Math.PI;  // Рассчитываем угол каждой картинки в радианах
		var left = wrapper + radius * Math.sin(f) + 'px';
		var top = wrapper + radius * Math.cos(f) + 'px';
		$('#wrapper img').eq(i).css({'top':top,'right':left}); // Устанавливаем значения каждой картинке
	  }
	});

Comments

[Юнус Газиев]

Нужен скрин. Для чего нужен именно радиус?

[RushV]

Скрин добавил!

Answer 1

[Антон]

https://jsfiddle.net/1whpLuf4/

Comments

[RushV]

Всё прекрасно работает! Можно выводимый текст обернуть в тег <p>?

[Антон]

RushV, да, можете в data-text обернуть в свои теги что хотите, но $('.textblock').text(text);
поменять на $('.textblock').html(text);

[RushV]

А как обернуть текст без редактирования html можно сразу в самом скрипте обернуть?

[Антон]

RushV, $('.textblock').html('<h1>' + text + '</h1>');

[RushV]

Здравствуйте!
Такой вопрос можно ли сделать так, что-бы вот этот блок картинок размещался по центру блока ?
Я попытался править через css, но не работает.

[Антон]

RushV, может вы пример кода скинете куда нибудь в кодпэн или жсфиддл?

[RushV]

Вот здесь всё так же https://jsfiddle.net/1whpLuf4/
просто изменил высоту блока #wrapper height: 500px;

[RushV]

Пытался изменить в скрипте вот этот кусок .css({'top':top,'right':left})
вроде блок перемещается по краям блока по центру не могу сделать.

[RushV]

Не возможно разместить блок по центру?

[RushV]

Здравствуйте! А как убрать надпись "undefined" появляется при обновлении страницы?
Появляется когда пропадает блок при скролинге.