Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Попапы 
:(
    Опции темы
R.M.
Дата 26.2.2006, 21:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: нет
Всего: 30
Здравствуйте, у меня пара вопросов по popup-окнам.

1) У меня по клику в попап-окне появляется картинка, как сделать чтобы размер попап-окна был размером с картинку?
2) Если я открываю второе попап окно оно открывается вместо первого, а как сделать чтобы открывалось ещё одно окно?

Пользуюсь таким кодом
Код

<a href="javascript:window.open('./img//big/".$row['img']."','view','scrollbars');void(0);"><img src=./img/view.gif alt='Увеличить' title='Увеличить'></a>


P.S. а что значит второй параметр (в данном случае view)? Вроде он нигде не появляется и ни на что не влияет.

Это сообщение отредактировал(а) Куксикус - 26.2.2006, 21:25


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
12345c
Дата 26.2.2006, 21:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
1) задать размеры размером с картинку, и, кроме того, выдать её в html-документе с установленными в body отступами, равными 0;
2) объявить html-имя окна (2-й параметр) другим или "_blank".

( 'view' встречается в <a href=... target='view'>...</a> , чтобы открыть ссылку в другом окне)
PM WWW   Вверх
R.M.
Дата 26.2.2006, 23:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: нет
Всего: 30
12345c,
Цитата(12345c @ 26.2.2006, 22:57 Найти цитируемый пост)
задать размеры размером с картинку

Ну если картинки разного размера и я незнаю размер как указать размер картинки?

Цитата(12345c @ 26.2.2006, 22:57 Найти цитируемый пост)
объявить html-имя окна (2-й параметр) другим или "_blank".

Другим получается, а вот _blank почемуто неработает


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
12345c
Дата 27.2.2006, 00:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Точнее, _узнать_ размер? В фотошопе, ACDSee, Windows. Некоторые кулхацкеры умеют узнавать в ПХП, а продвинутые дизайнеры - в JS свойством offsetWidth (одно "но" - если картинка уже изображена). Потом - open(,,'... ,width='+этот размер+', ...');
Цитата(Куксикус @ 26.2.2006, 23:02 Найти цитируемый пост)
_blank почему-то не работает
интересно, значит, это работает только в html.
PM WWW   Вверх
Ciber SLasH
Дата 27.2.2006, 02:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
2Куксикус:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<script type='text/javascript'>
/*** Открытие нового окна с изображением ***/
function showImg(URL,imgPath) {
var content = '<html><head>' +
    '<script type="text/javascript">' +
    'function selfResizer(obj) {' +
    'var w = obj.width;' +
    'var h = obj.height;' +
    'var left = screen.availWidth/2 - w/2;' +
    'var top = screen.availHeight/2 - h/2;' +
    '  window.resizeTo(w, h);' +
    '  window.moveTo(left, top);' +
    '}' +
    '<\/script>' +
'</head><body>' +
'<img onLoad="selfResizer(this)" style="position: absolute; left: 0px; top: 0px" src="'+imgPath+'">' +
'</body></html>';
var wnd = window.open(URL, 'newWnd', 'width=50,height=50,left=0,top=0,screenX=0,screenY=0,resizable');

    wnd.document.write(content);
    wnd.document.title = "Img Preview";
    wnd.document.close();
}
</script>
</head>

<body>
<button onClick='showImg("", "blood.gif")'>Открыть картинку</button>
</body>
</html>

Хотя в твоём случае можно и на сервере узнать размер картинки.
Добавлено @ 02:53
Забыл сказать, в Опере тока зараза глючит. Если научиш ещё и Оперу — будет ништяк. smile
PM   Вверх
12345c
Дата 27.2.2006, 06:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
 Это только видимость решения. Сверху помыли, а грязь осталась smile Но за "рыбу" спасибо.

Здесь частично устранён такой ряд недостатков:
1) в Опере посередине окна, так как оно открывается в окне, а не на экране;
2) расширены границы, чтобы захватить картинку побольше;
3) отменены скроллы стилями.
Надо,
что-то делать со статус-баром FF,
точно открыть размер окна,
как убрать предупреждение IE о действии скриптов????? (в новом окне)

Код
<script>/*** Открытие нового окна с изображением ***/
function showImg(URL,imgPath) {
var content = '<html><head>' +
'\<\style>'+'BODY { overflow: hidden }'+'<\/style>'
    +'<script>' +    'function selfResizer(obj) {' +
    'var w = obj.width;iWidth='+self.innerWidth+';' +
    'var h = obj.height;iHeight='+document.body.clientHeight  +';' +
    'var left = (self.opera?iWidth:screen.availWidth)/2 - w/2;' +
    'var top = (self.opera?iHeight:screen.availHeight)/2 - h/2;' +
    '  window.resizeTo(w+10, h+26);' +
    '  window.moveTo(left, top);' +
    '}' +    '<\/script>' +'</head><body>' +
'<img onLoad="selfResizer(this)" style="position: absolute; left: 0px; top: 0px" src="'+imgPath+'">' +
'</body></html>';
var wnd = window.open(URL, 'newWnd', 'width=50,height=50,left=0,top=0,screenX=0,screenY=0,resizable,scrollbar=0,stastusbar=0');

    wnd.document.write(content);
    wnd.document.title = "Img Preview";
    wnd.document.close();
}
</script>
</head>

<body>
<button onClick='showImg("", "fo167-YM20030829-1.jpg")'>Открыть картинку</button>
<button onClick=alert(document.body.clientHeight);>тест-датчик</button>

 Добавлено @ 06:59 
Тестировать можно здесь: http://js2.ru/example/JsPrimeryCode-68.htm
 Добавлено @ 07:02 
И вообще, изображение надо сначала открыть в своём окне, измерить размеры при visibility=hidden, потом открыть окно под него и взять из кеша. 

Это сообщение отредактировал(а) 12345c - 3.3.2008, 17:28


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
R.M.
Дата 27.2.2006, 11:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: нет
Всего: 30
12345c, нет, _blank заработало, так что не только в html.

Цитата(12345c @ 27.2.2006, 01:52 Найти цитируемый пост)
Точнее, _узнать_ размер? В фотошопе, ACDSee, Windows. Некоторые кулхацкеры умеют узнавать в ПХП, а продвинутые дизайнеры - в JS свойством offsetWidth (одно "но" - если картинка уже изображена). Потом - open(,,'... ,width='+этот размер+', ...');


Просто у меня обычное увеличение. Т.е. жмёш на маленькую картинку появляется такаяже большая в попапе и хотелось бы чтобы окно открывалось размером с картинку


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
12345c
Дата 27.2.2006, 13:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Понимаю, вопрос только в том, чтобы узнать размеры большой картинки. Поэтому задаёте или размеры явно, тогда окна не будут прыгать по экрану, как в скриптах выше, или предварительно загружаете невидимую картинку в главное окно для кеширования и определения размеров.

А маленькая и большая - это не один и тот же УРЛ?
PM WWW   Вверх
Ciber SLasH
Дата 27.2.2006, 15:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
Вот, вроде решил проблему с ресайзом в Опере и подправил размеры в ОгнеЛисе:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<script type='text/javascript'>
/*** Открытие нового окна с изображением ***/
function showImg(URL,imgPath) {
var content = '<html><head>'+
    '<script type="text/javascript" src="func_ObjectTools.js"><\/script>'+
    '<script type="text/javascript">'+
    'function selfResizer(obj) {'+
    'var w,h;'+
    '    if (window.opera) {'+
    '        w = obj.width+10;'+
    '        if (parseInt(navigator.appVersion) < 8)'+
    '            h = (obj.height < 55) ? 55 : obj.height+31;'+
    '        else'+
    '            h = (obj.height < 68) ? 68 : obj.height+44;'+
    '    } else if (document.body.style.MozAppearance != undefined) {'+
    '        w = obj.width+8;'+
    '        h = (obj.height < 50) ? obj.height : obj.height+51;'+
    '    } else {'+
    '        w = obj.width;'+
    '        h = obj.height;'+
    '    }'+
    'var left = screen.availWidth/2 - w/2;'+
    'var top = screen.availHeight/2 - h/2;'+
    '    window.moveTo(left, top);'+
    '    window.resizeTo(w, h);'+
    '}'+
    '<\/script>'+
'</head><body>'+
'<img onClick="alert(document.body.clientHeight)" onLoad="selfResizer(this)" style="position: absolute; left: 0px; top: 0px" src="'+imgPath+'">'+
'</body></html>';
var wnd = window.open(URL, 'newWnd', 'width=50,height=50,left=0,top=0,screenX=0,screenY=0,resizable');

    wnd.document.write(content);
    wnd.document.title = "Img Preview";
    wnd.document.close();
}
</script>
</head>

<body>
<button onClick='showImg("", "alisa.gif")'>Alisa</button>
<button onClick='showImg("", "blood.gif")'>Blood</button>
</body>
</html>

Добавлено @ 15:39
Кстати, можно сделать прелоад большой картинки в невидимый слой (во время прелода отображать мессагу: "Картинка загружается, подождите..."), определить её размер и открыть popup-окно сразу в нужном месте.
PM   Вверх
R.M.
Дата 27.2.2006, 16:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: нет
Всего: 30
Цитата(12345c @ 27.2.2006, 14:16 Найти цитируемый пост)
А маленькая и большая - это не один и тот же УРЛ?

Нет конечно.

А без затрагивания главного окна можно решить?


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
12345c
Дата 27.2.2006, 16:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Куксикус, подумай сам над вариантами: JS может узнать размеры, только загрузив. Грузить в попап не зная размеров - он будет прыгать после загрузки. Выход? Знать их заранее на сервере или в главном окне. И внешне оно не будеть затрагиваться - грузишь в абсолютный невидимый слой.
PM WWW   Вверх
R.M.
Дата 27.2.2006, 17:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Анархист
****


Профиль
Группа: Участник
Сообщений: 2164
Регистрация: 8.6.2005
Где: Питер

Репутация: нет
Всего: 30
12345c, просто грузится картинга может долго и человек будет жать по нескольку раз или просто подумает что она неработает. Мне бы подошол вариант с окном которое подгонится под размеры после загрузки. Только если картинка меншье открытого окна чтобы окно оставалось такимже а если больше то подгонялся размер


--------------------
Помнишь как бодрили дискотеки прошлого века? Теперь стул, компьютер и нету человека.

Nokia LifeStyle - Всё для смартфонов Nokia 
PM MAIL WWW ICQ   Вверх
Ciber SLasH
Дата 27.2.2006, 17:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
Если определять размеры картинки на сервере, то можно так:
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content='text/html; charset=windows-1251'>
<script type='text/javascript'>
/*** Открытие нового окна с изображением (если известен размер) ***/
function showImg(URL,imgPath, width,height) {
var left = screen.availWidth/2 - width/2;
var top = screen.availHeight/2 - height/2;
// Если пишем методом "write"
var imgHTML = '<img width="'+width+'" height="'+height+'" src="'+imgPath+'" style="position: absolute; left: 0px; top: 0px">';
var wnd = window.open(URL, 'newWnd', 'width='+width+',height='+height+',left='+left+',top='+top+',screenX='+left+',screenY='+top+',resizable');

    wnd.document.write('<html><head></head><body>'+imgHTML+'</body></html>');
    wnd.document.title = "Img Preview";
    wnd.document.close();
}

</script>
</head>

<body>
<button onClick='showImg("", "alisa.gif", 300,176)'>Alisa</button>
<button onClick='showImg("", "blood.gif", 532,24)'>Blood</button>
</body>
</html>

определяешь размеры и подставляешь их в функцию showImg.
PM   Вверх
12345c
Дата 27.2.2006, 21:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101
Ciber SLasH, опять будут полосы прокрутки и отрезание краёв картинок.
PM WWW   Вверх
Ciber SLasH
Дата 27.2.2006, 22:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67
12345c, если известны размеры картинки, то обрезаться края не будут и полос прокрутки не будет. Проверял локально.
PM   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1043 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.