Всплывающая картинка...

ZIG-ZAG · 26.09.2010, 17:50

Сам то пытался??? Примеры там есть. Ну да ладно.

Идем на http://fancybox.net/ и качаем архив с FancyBox. Из архива берём папку fancybox и кидаем её в корень сайта.

Подключаем jQuery, брать будем с гугла. кинь это между head

Код:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

Подключили и забыли.

Кидаем между head эти строчку, тут сам плагин и css.

Код:

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.js"></script>

Код:

<link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.1.css" media="screen">

Теперь основное, во что нужно врубиться, тут будешь настраивать, смотри примеры в архиве. Кидаем между head (хотя можно и в отдельный файл) это:

Код:

<script type="text/javascript">
$(document).ready(function() {
	$("a.example4").fancybox();
});
</script>

Теперь фото:

Код HTML:

<a class="example4" title="foto_1" href="Адрес_основного_фото"><img src="Адрес_миниатюры" alt="Фото">

Обрати внимания на класс в анкоре и в javascript example4, ну так вот, пропиши там где хочешь получить эффект, класс example4.

Поковыряйся в примерах, это взято от туда.

P.S.
Убери из своего CSS это
SPAN {font-style: normal; font-size: 60px;} а то могут быть проблемы с отображением подписи фото, она кстати будет браться из title="" ссылки.

byzantiner · 26.09.2010, 22:32

Спасибо

, принимаюсь за дело ))

ZIG-ZAG · 27.09.2010, 00:52

Я надеюсь ты заметил, что Я по запарке забыл закрыть тег a

Код HTML:

<a><img></a>

byzantiner · 04.10.2010, 13:02

Ну вот, добрался я до галереи.

Вопросы:

1. - Почему фото вылезает за рамку (справа и внизу)?
http://art-factor.gmxhome.de/Galerie-5.html

2. - Я пробовал менять example4 (здесь <a class="example4"... и здесь <script type="text/javascript">$(document).ready(function() { $("a.example4")...) на example5 или example2, но ничего не происходит. Продолжает отображаться вариант example4. Почему?

Niemans · 04.10.2010, 13:43

киньте архивом: страницу, скрипт и тд.

byzantiner · 04.10.2010, 15:49

www.art-factor.gmxhome.de.zip (515.5 Кб) - это страница,

jquery.fancybox-1.3.1.zip (512.8 Кб) - а это архив с http://fancybox.net/

ZIG-ZAG · 04.10.2010, 16:13

Ну, во первых, смени кодировку с UTF-16 на UTF-8

Код HTML:

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

.............

Потом ты спрашиваешь почему не работает, когда я меняю класс??? А почему оно должно работать??? Ты же javascript не менял. К примеру хочешь результат как второй с верху фотки из примера, аффект эластик. Открываешь блокнотом страницу с примерами и смотришь, что там прописано. И что мы видим???

Фото:

Код HTML:

<a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a>

Чешем репи и думаем

а где же тут класс, тут id, а у нас на странице больше чем одна фотка будет, а id должны быть уникальны. Меняем id="example2" на class="example2". Поменяли.

javascript:
В скрипте ищем example2. Вот кусок кода который относится к примеру эластик:

Код:

$("a#example2").fancybox({
			'titleShow'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
});

Берём его и вставляем себе на страницу между:

Код:

<script type="text/javascript">
	$(document).ready(function() {

Сюда вставлять

	});
</script>

Вспоминаем, что мы поменяли id на class. Значит и в скрипте нужно поменять a#example2 на a.example2

В итоге у нас должно получится это:

Код:

<script type="text/javascript">
		$(document).ready(function() {

                $("a.example2").fancybox({
			'titleShow'		: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});

});
</script>

А на счёт того, что в IE вылезает фото за рамку нужно ковырять свой CSS я его не смотрел. Будет время посмотрю.

P.S.
Надеюсь не чего не попутал, а то вечно тороплюсь куда то.

byzantiner · 04.10.2010, 19:23

ZIG-ZAG, Спасибо ))

Кстати, галерея в Mazille, Safari и Chrome не работает вообще. Нажимаешь на миниатюру и попадаешь на страницу где лежит оригинальное фото, в моём случае на flamber.ru.
Только в Опере всё в порядке...
:-(

Niemans · 04.10.2010, 21:21

ссылки на скрипты пропишите нормально

ZIG-ZAG · 05.10.2010, 00:21

Вот зараза этот IE целый час ковырялся. Нашёл в чём причина, исправь заголовок, замени это

Код HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

на это

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

и вылезать не будет.

Я тупанул

, надо было с самого начала документа смотреть.

Перепиши свой CSS там ошибки забыл кое где поставить ; и есть лишние запятые. Да вообще всё переделай, лишнего полно. И почитай про CSS а именно про сокращённые варианты описания стиля.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Всплывающая картинка при наведении на позицию	Serg-RU	HTML, CSS, JavaScript	14	28.06.2016 16:22
Не работает spry всплывающая подсказка	astap	HTML, CSS, JavaScript	0	28.02.2010 11:06
Картинка	Deli	Конкурсы	14	18.02.2010 00:34
Всплывающая консоль Fatal.ru	SMERH	Зал дебютантов	2	26.07.2003 00:44
Всплывающая панелька	DEM	Технологии Flash	3	28.04.2003 16:11

26.09.2010, 17:50	#11
ZIG-ZAG	Сам то пытался??? Примеры там есть. Ну да ладно. Идем на http://fancybox.net/ и качаем архив с FancyBox. Из архива берём папку fancybox и кидаем её в корень сайта. Подключаем jQuery, брать будем с гугла. кинь это между head Код: <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> Подключили и забыли. Кидаем между head эти строчку, тут сам плагин и css. Код: <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.js"></script> Код: <link rel="stylesheet" type="text/css" href="/fancybox/jquery.fancybox-1.3.1.css" media="screen"> Теперь основное, во что нужно врубиться, тут будешь настраивать, смотри примеры в архиве. Кидаем между head (хотя можно и в отдельный файл) это: Код: <script type="text/javascript"> $(document).ready(function() { $("a.example4").fancybox(); }); </script> Теперь фото: Код HTML: <a class="example4" title="foto_1" href="Адрес_основного_фото"><img src="Адрес_миниатюры" alt="Фото"> Обрати внимания на класс в анкоре и в javascript example4, ну так вот, пропиши там где хочешь получить эффект, класс example4. Поковыряйся в примерах, это взято от туда. P.S. Убери из своего CSS это SPAN {font-style: normal; font-size: 60px;} а то могут быть проблемы с отображением подписи фото, она кстати будет браться из title="" ссылки.

26.09.2010, 22:32	#12
byzantiner	Спасибо , принимаюсь за дело ))

27.09.2010, 00:52	#13
ZIG-ZAG	Я надеюсь ты заметил, что Я по запарке забыл закрыть тег a Код HTML: <a><img></a>

04.10.2010, 13:02	#14
byzantiner	Ну вот, добрался я до галереи. Вопросы: 1. - Почему фото вылезает за рамку (справа и внизу)? http://art-factor.gmxhome.de/Galerie-5.html 2. - Я пробовал менять example4 (здесь <a class="example4"... и здесь <script type="text/javascript">$(document).ready(function() { $("a.example4")...) на example5 или example2, но ничего не происходит. Продолжает отображаться вариант example4. Почему?

04.10.2010, 13:43	#15
Niemans	киньте архивом: страницу, скрипт и тд.

04.10.2010, 16:13	#17
ZIG-ZAG	Ну, во первых, смени кодировку с UTF-16 на UTF-8 Код HTML: <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> ............. Потом ты спрашиваешь почему не работает, когда я меняю класс??? А почему оно должно работать??? Ты же javascript не менял. К примеру хочешь результат как второй с верху фотки из примера, аффект эластик. Открываешь блокнотом страницу с примерами и смотришь, что там прописано. И что мы видим??? Фото: Код HTML: <a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a> Чешем репи и думаем а где же тут класс, тут id, а у нас на странице больше чем одна фотка будет, а id должны быть уникальны. Меняем id="example2" на class="example2". Поменяли. javascript: В скрипте ищем example2. Вот кусок кода который относится к примеру эластик: Код: $("a#example2").fancybox({ 'titleShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); Берём его и вставляем себе на страницу между: Код: <script type="text/javascript"> $(document).ready(function() { Сюда вставлять }); </script> Вспоминаем, что мы поменяли id на class. Значит и в скрипте нужно поменять a#example2 на a.example2 В итоге у нас должно получится это: Код: <script type="text/javascript"> $(document).ready(function() { $("a.example2").fancybox({ 'titleShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); }); </script> А на счёт того, что в IE вылезает фото за рамку нужно ковырять свой CSS я его не смотрел. Будет время посмотрю. P.S. Надеюсь не чего не попутал, а то вечно тороплюсь куда то.

04.10.2010, 19:23	#18
byzantiner	ZIG-ZAG, Спасибо )) Кстати, галерея в Mazille, Safari и Chrome не работает вообще. Нажимаешь на миниатюру и попадаешь на страницу где лежит оригинальное фото, в моём случае на flamber.ru. Только в Опере всё в порядке... :-(

04.10.2010, 21:21	#19
Niemans	ссылки на скрипты пропишите нормально

05.10.2010, 00:21	#20
ZIG-ZAG	Вот зараза этот IE целый час ковырялся. Нашёл в чём причина, исправь заголовок, замени это Код HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> на это Код HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> и вылезать не будет. Я тупанул , надо было с самого начала документа смотреть. Перепиши свой CSS там ошибки забыл кое где поставить ; и есть лишние запятые. Да вообще всё переделай, лишнего полно. И почитай про CSS а именно про сокращённые варианты описания стиля.