Вопрос! — Дайри (бывший Diary.ru)

четверг, 07 апреля 2016

16:28

Вопрос!

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

Сведущие в кодах - как такое всплывающее окно ailonve.narod.ru/Mask1.htm
Превратить в такое www.castlebeast.aniworld.ru/library-comix.php ? (Эээ да, там кликнуть по ссылке/изображению надо)

Пользую вот такое:
www.luksweb.ru/view_post.php?id=273

Или это совсем другой код?

@темы: РазКОШления, Сайт

URL

Поделиться

Пришло по мылу предложение заключить договор (в сокращени... Люблю нашего директора... Купил страшно дорогой ноут VAI... Масса приятных неожиданностей подстерегает докторов в бес...

Ето штуки тоже занятные, так как периодически разговарива... Маше 12. - Чем птичка отличается от самолета? - Ничем... http://www.landofsmile.ru/fotoproj/colors/yellow-mid.jpg ...

Комментарии

07.04.2016 в 19:05

По второй ссылке в модальном окне банальная таблица. По третьей ссылке fancybox.js может лишь взять 2 ссылки из img-тэга и подсунуть одну из них в img src = "" в модальном окне. При этом в модальном окне может быть только одна картинка + кнопки (если картинок несколько и указано что это группа).

Тебе нужен инструмент, который позволяет задать произвольный контент модального окна, если нужно кроме картинки вставлять ещё какие-то элементы. Например: www.w3schools.com/bootstrap/bootstrap_modal.asp - но бутстрап это намного более универсальная вещь, чем обычные модальные окна (однако там можно само модальное окно сделать в формате html, а потом сделать привязку его содержимого с тем, что нужно показать, через javasсript). Так что можно поискать более простую библиотеку, но там внутри .js придётся написать немного кода - чтобы добавить нужную картинку/описание при помощи javasсript. То есть, если использовать какую-то библиотеку для модальных окон, то содержимое окна полностью прописывается через javasсript.

Что именно должно быть внутри модального окна кроме увеличенного изображения?

URL

07.04.2016 в 19:53

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, надпись и стрелки...

URL

07.04.2016 в 20:14

Василисище, то есть просто картинка, под ней/над ней надпись и стрелки? можно тем же fancybox.js - вот например (внизу описание) 66.147.244.181/~webdeth4/posts/fancybox-downloa...
или нужно надпись в качестве названия сверху вставлять? если как в примере сгодится - то текст они вставляют внутрь title = "текст" в тот же тэг "а" где и ссылка на большую картинку. Хотя в общем-то по 3 ссылке то же самое и проделывается. Тогда я не вполне понимаю, чего не хватает. Стрелки fancybox сам добавляет - если указать, что изображение является частью группы. Или можно что-то в модальное окно при помощи javasсript добавить. В общем, если что, могу со скриптами помочь.

URL

07.04.2016 в 21:23

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, я завтра займусь, если будут вопросы, спрошу) Спасибо за отклик)

URL

08.04.2016 в 07:28

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, Полазила... да, мне во всплывающем окне таблица нужна.привязку его содержимого с тем, что нужно показать, через javasсript ссылкой?
А там эту таблицу как-то вставлять надо? www.w3schools.com/bootstrap/tryit.asp?filename=...

URL

08.04.2016 в 14:15

Василисище, можешь тогда в пэинте или фотошопе эскиз того, как должно выглядеть модальное окно, сделать? Я вечером попробую пример сделать.
Если именно таблицу, то вот так: <table> <tr><td></td><td></td></tr></table> где tr - это строка, а td - это столбец, и внутрь столбца уже вставляется картинка или текст, а количество строк/столбцов определяется глядя на то, что нужно в результате. Но, не исключено, что можно и без таблицы обойтись.

URL

08.04.2016 в 20:14

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, savepic.ru/9361793.jpg

URL

08.04.2016 в 21:26

Василисище, ясно, то есть если стрелки будут по бокам, а надпись сверху на белом фоне, это не сойдёт? нужно именно как там 4 стрелки и под ними описание? а куда вверх/вниз тогда должны вести? вариант с 4 стрелками будет сложнее.

URL

09.04.2016 в 05:16

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, стрелки есть и в стандартном, а надпись бы действительно увести наверх... но для комиксов мне бы хотелось эту фичу.

URL

11.04.2016 в 00:48

Василисище, ну, вроде сделал. Только стрелок 2 штуки - влево/вправо, вместо крестика клик вне модального окна или клик по картинке закрывают окно. Выглядит всё это немного сложно, но по сути тебе надо просто 1. запомнить, как в html-коде оформлять группы изображений, 2. добавить 3 строчки в head, 3. скопировать скрипт и назвать его popup_sсript.js, 4. добавить код модального окна в конец html-кода.

внутрь <head></head> надо добавить окошко с кодом маленькое - но если в него кликнуть, то увеличивается

	<sсript src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></sсriрt>    
	<sсript src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></sсriрt>
	<sсript src = "popup_sсript.js"></sсriрt>

Первая ссылка - подгружает jquery. Вторая - библиотеку для открытия модальных окон. Третья - это скрипт, который открывает увеличенное изображение (то которое нужно), вписывает надпись и обеспечивает работу кнопок.

Надпись берётся из атрибута title = "надпись" который надо добавлять внутрь самой картинки. Я делал только для групп картинок. Поэтому надо вставлять их так: сначала вставляешь див с классом, например, "group1" (по нему происходит поиск картинок из той же группы, то есть группа картинок должна лежать внутри 1 дива с определённым уникальным классом). Чтобы картинка была кликабельной (чтобы указатель менялся), её надо поместить внутрь <a href = "#"></a>

Проще 1 раз показать:

	<div class = "group1">
		<a href = "#" class = "my_popup_open"><img src = "img/daisy_small.jpg" title = "daisy"/></a>
		<a href = "#" class = "my_popup_open"><img src = "img/rainbow_flower_small.jpg" title = "rainbow"/></a>
		<a href = "#" class = "my_popup_open"><img src = "img/some_flower_small.jpg" title = "some flower"/></a>
	</div>	
	<div class = "group2">
		<a href = "#" class = "my_popup_open"><img src = "img/some_flower2_small.jpg" title = "some flower 2"/></a>
		<a href = "#" class = "my_popup_open"><img src = "img/some_flower3_small.jpg" title = "some flower 3"/></a>
	</div>

Однако мы сгруппировали только маленькие версии изображений. Нужно добавить ещё и те же изображения в большом размере.

	<div class = "group1 big" style = "display: none">
		<img src = "img/daisy.jpg"/>
		<img src = "img/rainbow_flower.jpg"/>
		<img src = "img/some_flower.jpg"/>
	</div>
	<div class = "group2 big" style = "display: none">
		<img src = "img/some_flower2.jpg"/>
		<img src = "img/some_flower3.jpg"/>		
	</div>

Здесь тоже 2 важные детали: во-первых, изображения тоже лежат внутри дива (чтобы их сгруппировать), и у этого дива тот же класс, что и в случае с маленькими изображениями. Но у него также присутствует второй класс - "big", чтобы было ясно, что здесь лежат увеличенные копии. И я добавил css-стиль внутрь, чтобы не надо было возиться с css-файлом. В данном случае style = "display: none" - говорит, что эти дивы никто не увидит на экране. Они есть, но они не отображаются. То есть, они используются только как хранилище увеличенных изображений.

Теперь само модальное окно (внутри body его можно поместить куда угодно - но лучше в самый низ):

	<div id = "my_popup" style = "opacity: 0">
		<table style = "background-color: white">
			<tr>
				<td rowspan = "2"><img src = "" class = "my_popup_close"/></td>
				<td><a href = "#"><img src = "img/arrow_left.png" class = "left"/></a></td>
				<td><a href = "#"><img src = "img/arrow_right.png" class = "right"/></a></td>
			</tr>
			<tr>
				<td colspan = "2" style = "text-align: center"><h2></h2></td>
			</tr>
		</table>
	</div>

Я добавил style = "opacity: 0" - чтобы изначально модального окна не было видно. Когда нажимаешь на картинку, оно появляется. У меня стрелки влево-вправо лежали в "img/arrow_left.png", "img/arrow_right.png" - соответственно тебе нужно либо создать папку img и туда скинуть картинки со стрелками и назвать их так же, либо просто поменяй ссылки на картинки для стрелок.

И, наконец, сам скрипт popup_sсript.js:

$(document).ready(function()
{
	$("div>a>img").click(function()
	{
		var className = $(this).parent().parent().attr("class");
		var picture = $("." + className + ">a>img");
		var index = $(picture).index(this);
		var bigPicture = $("." + className + ".big>img");
		$("#my_popup .my_popup_close").attr("src", $(bigPicture[index]).attr("src") );
		$("#my_popup h2").text($(this).attr("title") );
		var amount = bigPicture.size();
		
		$("#my_popup .left").click(function()
		{
			index = index === 0? amount - 1 : index - 1;
			$("#my_popup .my_popup_close").attr("src", $(bigPicture[index]).attr("src") );
			
			$("#my_popup h2").text($(picture[index]).attr("title") || "");
		});

		$("#my_popup .right").click(function()
		{
			index = index < amount - 1? index + 1 : 0;
			$("#my_popup .my_popup_close").attr("src", $(bigPicture[index]).attr("src") );
			
			$("#my_popup h2").text($(picture[index]).attr("title") || "");
		});

		$("#my_popup").css({"opacity": "1"});
		$("#my_popup").popup("show");
	});

	$('#my_popup').popup(
	{
		onclose: function() 
		{
    		$("#my_popup .my_popup_close").attr("src", "");
			
			$("#my_popup h2").text("");
		}
	});
});

Этот скрипт надо сохранить в popup_sсript.js - и скинуть в основную папку со страницами html. В результате получится такая штука:

URL

11.04.2016 в 03:17

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, большое спасибо! Вечером отпишусь, как получилось)

URL

11.04.2016 в 17:46

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

Где-то я просчитался... Можешь сказать, что не так? ailonve.narod.ru/g1.htm#

URL

11.04.2016 в 18:07

Василисище, честно говоря, даже не знаю, с чего начать

лучше попробуй заново повторить все шаги.

В html-странице есть два отдела: head и body. В head помещается вся информация, необходимая для корректной работы страницы. А именно: заголовок, мета-данные и, что главное, адреса со скриптами - то есть, откуда страница будет загружать все скрипты.
В body помещается само содержание страницы. То есть, дивы, картинки и прочий контент.

А у тебя половина содержимого ушла в секцию перед head, а потом какая-то неразбериха %)
Вот страничка с картинками, где я тестил всё: yadi.sk/d/kuHD6KkCquU93 Обрати внимание, как там всё упорядочено. В head я засунул только ссылки на скрипты (2 берутся из интернета и рукописный кладётся в папку "твой сайт/js/скрипт"). Точно так же картинки у меня лежат в "сайт/img/картинки". То есть, адреса нужно учитывать, так как у тебя может быть другая организация папок.

И наконец если даже теперь что-то не будет работать, можешь нажать F12 - откроется панель управления, и там справа будут сообщения об ошибках. Ну, или загрузи на свой сайт и я посмотрю, чего не хватает. Для начала надо правильно страницу составить. Браузер не может понять, чего ты от него хочешь, и поэтому достраивает страницу наугад.

На всякий случай вот текст html-страницы (этот поновее - убрал то, что было не нужно, добавил округлённые углы в модальном окне):

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>popup example</title>
	<sсript src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></sсriрt>    
	<sсript src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></sсriрt>
	<sсript src = "js/popup_sсript.js"></sсriрt>
</head>
<body>
	<div class = "group1">
		<a href = "#"><img src = "img/daisy_small.jpg" title = "daisy"/></a>
		<a href = "#"><img src = "img/rainbow_flower_small.jpg" title = "rainbow"/></a>
		<a href = "#"><img src = "img/some_flower_small.jpg" title = "some flower"/></a>
		<a href = "#"><img src = "img/some_flower2_small.jpg" title = "some flower 2"/></a>
		<a href = "#"><img src = "img/some_flower3_small.jpg" title = "some flower 3"/></a>
	</div>	
	<div class = "group2">
		<a href = "#"><img src = "img/some_flower3_small.jpg"/></a>
		<a href = "#"><img src = "img/rainbow_flower_small.jpg" title = "rainbow2"/></a>
		<a href = "#"><img src = "img/daisy_small.jpg" title = "daisy2"/></a>
		<a href = "#"><img src = "img/some_flower2_small.jpg" title = "some flower 2 2"/></a>		
		<a href = "#"><img src = "img/some_flower_small.jpg" title = "some flower 2"/></a>
	</div>
	
	<div class = "group1 big" style = "display: none">
		<img src = "img/daisy.jpg"/>
		<img src = "img/rainbow_flower.jpg"/>
		<img src = "img/some_flower.jpg"/>
		<img src = "img/some_flower2.jpg"/>
		<img src = "img/some_flower3.jpg"/>
	</div>
	<div class = "group2 big" style = "display: none">
		<img src = "img/some_flower3.jpg"/>
		<img src = "img/rainbow_flower.jpg"/>
		<img src = "img/daisy.jpg"/>
		<img src = "img/some_flower2.jpg"/>
		<img src = "img/some_flower.jpg"/>		
	</div>

	<div id = "my_popup" style = "opacity: 0">
		<table style = "background-color: white; border-radius: 5px">
			<tr>
				<td rowspan = "2"><img src = "" class = "my_popup_close"/></td>
				<td><a href = "#"><img src = "img/arrow_left.png" class = "left"/></a></td>
				<td><a href = "#"><img src = "img/arrow_right.png" class = "right"/></a></td>
			</tr>
			<tr>
				<td colspan = "2" style = "text-align: center"><h2></h2></td>
			</tr>
		</table>
	</div>
</body>
</html>

URL

11.04.2016 в 20:00

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, удалось добиться только такого: ailonve.narod.ru/g1.htm Справка в браузере не воспроизводится...

URL

11.04.2016 в 21:17

Василисище, ну, почти всё работает.

Только есть ряд проблем:
1. надо все цветочки из моего примера поубирать

2. стрелки по адресам ailonve.narod.ru/ImageMask/arrow1.png и ailonve.narod.ru/ImageMask/arrow2.png - как видишь, невидимые. Или в адресе ошибка, или картинки не те по адресу лежат.
3. title = "��" - проблема с кодировкой. Возможно, ты копировала их при помощи ctrl + c / ctrl + v - в таком случае лучше руками переписать.
4. Под большими и маленькими картинками я подразумевал, что первые - это оригинальные изображения, то есть у них изначально размер от 400 до 1000 пикселей в ширину/высоту; а вторые (маленькие) - это уменьшенные в фотошопе версии картинок, то есть с размером до 400 (условный размер) пикселей в ширину/высоту. Простыми словами, задавать картинкам размер через width="581" height="840" не нужно, нужно просто иметь 2 версии картинок. Смысл в том, что если указать сразу большую версию изображения и задать ей высоту и ширину поменьше, то всё равно пользователь, заходя на страничку, будет грузить увеличенные версии, просто отображаться они будут как уменьшенные. Но если тебе не хочется заводить 2 версии картинок, то я могу переписать скрипт, чтобы он сразу брал ссылку на картинку и не искал аналога в другой части страницы. В любом случае на данный момент задавать ширину/высоту можно только для уменьшенных картинок, а на полноразмерные это не прокатит. В модальном окне есть пустая картинка, и в неё скрипт вставляет адрес той картинки, на которую кликаешь (вернее, он смотрит на что кликнул и ищет такую же по счёту в диве с полноразмерными картинками). То есть у тебя, допустим, 3 картинки в группе1 и 3 полноразмерных картинки в группе1 биг - тогда первая картинка из маленьких соответствует первой из больших, вторая - второй и т.д. Даже если там разные картинки, определение идёт по индексу.

URL

12.04.2016 в 03:26

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, Я спешила проверить, поэтому переделала только часть)
Стрелки белые и фон белый, поэтому не видно. В редакторе они отображаются.
Полноразмерки я ссылками из сайта брала... Не знаю, как так выходит...
Последнее понятно)
Вечером снова попробую)

URL

14.04.2016 в 17:34

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, В тайтле не с кодировкой проблемы! Он не может писать по-русски. С этим можно что-то сделать?
Сделала пробное, снесла часть картинок - ailonve.narod.ru/g1.htm#
Можно всплывающее изображение подогнать под размер монитора через кодировку? Чтобы не пришлось оригинальную картинку уменьшать?

URL

14.04.2016 в 17:45

Василисище, проблема как раз в кодировке. Ты же в блокноте редактируешь страничку? Вот блокнот и использует какую-то стрёмную кодировку. Попробуй вот этот современный текстовый редактор: если у тебя 64-битная система | если нет

Чтобы узнать, 64-битная система или нет, надо либо:
1) найти значок "мой компьютер" и нажать на "свойства". Только надо именно на "Мой компьютер", а не на его ярлык нажимать.
2) Панель управления -> система.
И там будет тип системы: 64-битная система / 32-битная система.

Ну, и на всякий случай вот в этой строке в самом начале html-кода страницы: <html lang="en"> измени на <html lang="enru">

Я только что проверил - у меня русский язык отображается корректно. Затем сохранил ту же самую страницу (с русским текстом) в блокноте - и всё, только латинские символы. Хотя там указано: использовать UTF-8 кодировку, и в блокноте она должна быть. Но допотопный блокнот слишком древний, чтобы адекватно определять кодировку

URL

14.04.2016 в 18:21

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, я пользуюсь FrontPage, не могу не видеть, как отображается хотя бы примерно. То есть это новая кодировка, программы 2003-го не годятся?
А с полноразмерками что делать?

URL

14.04.2016 в 18:26

Василисище, ну, как видишь, они почему-то не хотят корректно её определять. Тот редактор, ссылку на который я дал, - умеет определять/сохранять/подсвечивать большинство форматов и языков (включая html/css/javasсript). И работает корректно с кодировками. Плюс там необязательно сохранять открытые текстовые файлы перед закрытием - он сам всё сохраняет и восстанавливает все открытые файлы при следущем запуске + много других приятных фич.

URL

14.04.2016 в 18:27

Василисище, А с полноразмерками что делать? не понял вопроса. Картинки же вроде нормально отображаются. Разве что надпись слишком вниз съезжает

URL

14.04.2016 в 18:34

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

ailonve.narod.ru/gg.htm# Спасибо, заработало)
У меня надо бегунок всей страницы двигать, чтобы всю картинку увидеть, а надо, чтобы окно целиком в обозримом пространстве отображалось. Ну как предыдущее модальное окно - независимо от настоящего размера окно растягивается только по монитору пользователя.

URL

14.04.2016 в 19:26

Василисище, чтобы окно целиком в обозримом пространстве отображалось ну, раз никаких дополнительных библиотек не подключено, то можно просто сделать так:
вот сюда после "my_popup_close" <td rowspan = "2"><img src = "" class = "my_popup_close"/></td> дописать: style = "max-height: 1000px" ну или вместо 1000 что-то около подобрать. то есть максимальная высота картинки не будет превышать данного числа в пикселях. Но, по-моему, скроллинг не так и плохо, учитывая что картинка в полном размере.

URL

14.04.2016 в 19:42

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, грузно смотрится... а библиотеку подключать сложно?

URL

14.04.2016 в 19:49

Василисище, ну не особо. Но тут я просто не знаю, какие ещё альтернативы есть:
1. либо картинка в полном размере и её надо скроллить
2. либо картинка ограничена по высоте, и тогда такой комикс сложно читать
3. либо разбить комикс на сцены (каждую в отдельной картинке)

Библиотеки в принципе тут и не нужны. Они не сделают ничего такого, чего нет в этих вариантах

По-моему, лучше оставить со скроллингом. Максимум - могу подредактировать код, чтобы надпись была повыше или, например, между стрелками. На стрелках, кстати, можно ещё надписи сделать: вперёд и назад (но это в фотошопе)

URL

14.04.2016 в 19:53

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, В малом размере тоже читается, я подгоняла под дайр и всё было нормально) Вот и думаю: можно ли уменьшить окно... так-то я исходники оставлю, может ссылкой прям в том же окне. Ну просто чтоб на странице через любой монитор аккуратно смотрелось и читалось быстрее)

URL

14.04.2016 в 19:58

Василисище, ну давай тогда завтра напишу, как это сделать через бутстрап (библиотека для создания сайтов, которые подстраиваются под разные по разрешению экраны - от мобилок до десктопов)

URL

14.04.2016 в 19:59

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, Ага)

URL

16.04.2016 в 12:59

Василисище, извини, вчера забыл. В общем-то я забыл и о том, что есть простое решение: добавить внутрь картинки style = "max-height: 97vh"
<td rowspan = "2"><img src = "" class = "my_popup_close" style = "max-height: 97vh"/></td>

URL

17.04.2016 в 16:20

Василисище

Хорошо смеётся тот, у кого поехала крыша. ©

flamiohotman, спасибо! А как поднять надпись?

URL

1 2 Следующая → Последняя