перемещение картинки

@Dimarik__ · Регистрация: 29.04.2010

Студворк — интернет-сервис помощи студентам

необходимосделать так, чтобы при клике по картинке, она переместилась в центр окна и расположилась как бы над всей страницей. Причём структура страницы не должна измениться. Как это можно сделать?

@Dimedrol · 15.08.2010, 22:34

Вы о модальном окне?

@Dimarik__ · 17.08.2010, 15:41 **[ТС]**

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function PhotoCenter(N, width, height, path)
    {
        N = parseInt(N);
        width = parseInt(width);
        height = parseInt(height);
        document.getElementById(N).width = width;
        document.getElementById(N).src = path;
        document.getElementById(N).style.position = 'absolute';
        document.getElementById(N).style.top = '50%';
        document.getElementById(N).style.right = '50%';
        document.getElementById(N).style.marginLeft = width / 2;
        document.getElementById(N).style.marginTio  = height / 2;
        document.getElementById(N).onclick = function (){
               this.parentNode.removeChild(this);
           }
           document.appendChild(document.getElementById(N));
 
    }

Проблемы:
1. фотография помещяется не по центру. Она скраю справа. Даже черезчур справа (появилась горизонтальная полоса прокрутки даже)
2. при щелчке на фотографию, полученную с помощью функции PhotoCenter, фотография не помещаятся на предыдущее место, а исчезает.
3. В IE вообще некорректно работает. То есть. При щелчке на фотографию функция PhotoCenter работает так, что фотка вообще исчезает.
На всякий случай ещё раз поясню задачу. Имеется фотография. При щелчке на неё она должна переместиться в центр экрана (причём дизайн страницы не должен измениться). она должна оказаться как бы над страницей. Потом при щелчке на эту фотку, которая над страницей, она должна вернуться на своё прежнее место. функцию написал может и криво... javascript совсем недавно учить начал.. подскажите кто чем может.. любой совет окажется полезным

Добавлено через 18 часов 51 минуту
и ещё. как сделать так чтобы увеличение картинки происходило ПЛАВНО???
и ещё. если мы кликнули по картинке №1, то она должна увеличиться. Если сразу после этого кликнули по картинке №2, то картинка №1 должна уменьшиться до первоначальных размеров, а картинка №2 увеличиться. А если кликнули в свободную область, то картинка №2 должна уменьшиться???

@Dimedrol · 18.08.2010, 13:39

Сообщение от Dimarik__

и ещё. как сделать так чтобы увеличение картинки происходило ПЛАВНО???

JQuery .animate();
Чтобы не мучиться, можно скачать вот этот архив:
modal_windows.rar

@Hagrael · 18.08.2010, 17:12

и ещё. как сделать так чтобы увеличение картинки происходило ПЛАВНО???

JQuery .animate();

NO!!!! jQuery броузер будет долго грузить и обрабатывать. Напишите свой скрипт лучше, используя setTimeout.

@Dimedrol · 18.08.2010, 17:16

Сообщение от Hagrael

jQuery броузер будет долго грузить и обрабатывать.

Откуда вы такие глупости берете?

@Hagrael · 18.08.2010, 17:23

Dimedrol, просто по-моему jQuery - не лучший вариант.

@Dimarik__ · 18.08.2010, 17:42 **[ТС]**

Dimedrol, а мне лично очень понравилось. только если не трудно, подскажите как убрать надписи под фотографией? чтобы их не было

@Dimedrol · 18.08.2010, 17:46

Dimarik__, тайтл уберите

HTML5
1
<a class="gallery" rel="group" title="......" href="vodopad.jpg"><img src="vodopad.jpg" height="100px" width="125px" /></a>

@Dimarik__ · 18.08.2010, 19:21 **[ТС]**

спасибо! офигенную штуку посеветовали! супер работает!

Добавлено через 1 час 11 минут

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<title>example-15-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="jquery.fancybox-1.2.1/jquery.fancybox.css" rel="stylesheet" />
<script src="jquery.fancybox-1.2.1/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.fancybox-1.2.1.pack.js" type="text/javascript"></script>
<style type="text/css">
img { border: none; }
</style>
<script type="text/javascript">
$(function(){
  $("td.demo").fancybox({
    "zoomOpacity": true,
    "zoomSpeedIn": 2500,
    "zoomSpeedOut": 1500,
    "overlayOpacity": 0.7,
    "easingIn": "easeOutBack",
    "easingOut": "easeInBack",
    "hideOnContentClick": false
  });
});
</script>
</head>
<body>
<table>
<td class="demo" rel="group" title="" href="1.jpg"><img src="3.jpg" alt=""/></td>
</table>
</body>
</html>

не работает

Vovan-VE · 18.08.2010, 19:22

Не по теме:

Сообщение от Hagrael

jQuery броузер будет долго грузить и обрабатывать.

Это смотря как писать. Если постоянно делать одни и те же запросы

JavaScript
1
2
3
$('foo.bar').что_нибудь();
$('foo.bar').еще_что_нибудь();
...

Вместо

JavaScript
1
$('foo.bar').что_нибудь().еще_что_нибудь()...;

или вместо

JavaScript
1
2
3
4
var tmp = $('foo.bar');
tmp.что_нибудь();
tmp.еще_что_нибудь();
...

То тогда, естественно, на каждый запрос $('foo.bar') будет вновь тратиться N времени.

@Dimarik__ · 18.08.2010, 19:22 **[ТС]**

а вот такой работает. ПОЧЕМУ?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<head>
<title>example-15-1-2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="jquery.fancybox-1.2.1/jquery.fancybox.css" rel="stylesheet" />
<script src="jquery.fancybox-1.2.1/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.fancybox-1.2.1/jquery.fancybox-1.2.1.pack.js" type="text/javascript"></script>
<style type="text/css">
img { border: none; }
</style>
<script type="text/javascript">
$(function(){
  $("a.demo").fancybox({
    "zoomOpacity": true,
    "zoomSpeedIn": 2500,
    "zoomSpeedOut": 1500,
    "overlayOpacity": 0.7,
    "easingIn": "easeOutBack",
    "easingOut": "easeInBack",
    "hideOnContentClick": false
  });
});
</script>
</head>
<body>
<a class="demo" rel="group" title="" href="1.jpg"><img src="3.jpg" alt=""/></a>
</body>
</html>

Добавлено через 36 секунд
тут проблема в дескрипторах. подскажите плиз

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Dimarik__ 21 / 21 / 3 Регистрация: 29.04.2010 Сообщений: 444

	перемещение картинки 15.08.2010, 22:27. Показов 9284. Ответов 11 Метки нет (Все метки) необходимосделать так, чтобы при клике по картинке, она переместилась в центр окна и расположилась как бы над всей страницей. Причём структура страницы не должна измениться. Как это можно сделать? 0

@Dimedrol 2378 / 941 / 129 Регистрация: 25.04.2009 Сообщений: 2,635 Записей в блоге: 4
	15.08.2010, 22:34
	Вы о модальном окне? 0

@Hagrael БТР - мой друг 333 / 277 / 47 Регистрация: 07.01.2010 Сообщений: 1,932
	18.08.2010, 17:23
	Dimedrol, просто по-моему jQuery - не лучший вариант. 0

@Dimarik__ 21 / 21 / 3 Регистрация: 29.04.2010 Сообщений: 444
	18.08.2010, 17:42 [ТС]
	Dimedrol, а мне лично очень понравилось. только если не трудно, подскажите как убрать надписи под фотографией? чтобы их не было 0