Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » Web-программирование » Pop-up окна с динамическими размерами - как сделать?

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

Tomato



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
У меня стоит такая задача:
По клику на список ссылок ведущих на картинки нужно сделать такой поп-ап, чтобы он автоматически "обтягивал" картинку. То есть, если одна картинка, например, размером в  121х345 пикселей открылась в окне 121х345, то следующая, размером 300х206 откроется в новом окне размером 300х206. И если пользователь захочет открыть десять поп-апов, то это должно быть возможным. А иначе просто выбора нет, ведь если  каждая картинка открывается в одном и том же окне, как это реализовано на абсолютном большинстве сайтов, то получится лажа, особенно если после узкого вертикального изображения загрузить широкое горизонтальное.  
 
Если так сделать нельзя, то может быть можно поступить так? Создать два типа шаблонов на ASP - вертикальный и горизонтальный, и чтобы по клику на ссылку в поп-апе сначала открывался один из двух шаблонов в зависимости от ориентации картинки (тип ориентации и/или вызываемого шаблона надо как-то прописать в исходной ссылке), а в него уже "затягивалась" картинка. А точнее, грузятся они одной единовременной цепочкой. Но это как-то совсем мудрёно выходит...
 
Я не знаю, понятно ли я изложила проблему, но очень надеюсь на помощь.

Всего записей: 56 | Зарегистр. 02-04-2003 | Отправлено: 03:18 19-06-2003
KVCH



Advanced Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Tomato
 
каждому окну открывающемуся тебе надо будет давать новое имя, у большинста в одном окне потому что у них скорей всего 1функция заюзана, в которой имя попап окна одно и тоже... а чтоб нужного размера, я не знаю, могу только предложить скриптом перл или пхп определять и выдавать в хтмль код например в двух массивчиках, 1й ширина 2й высота, а колво ссылок = колву картинок  т.е. первая картинка будет иметь ширину и высоту первого елемента соответственно масивов с ширинами и высотами... но имхо это бред...  
 
 
но что мешает картинки подогнать под один размер ?

----------
FreeBSD лучше Linux !

Всего записей: 1741 | Зарегистр. 03-03-2002 | Отправлено: 07:45 19-06-2003 | Исправлено: KVCH, 07:49 19-06-2003
yahoo777

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Всё проще.
 
Для  Dreamweaver есть Extention JustSo Picture Window.
 
This behavior is a screen-resolution detector  popup image window caller all-in-one. It opens a popup window which can be either full-screen (no matter the screen resolution) or instead hug the borders of an image. The image itself is displayed full-size or sized downwards if needed to fit on lower resolution monitors. So the full image is always displayed no matter the monitor resolution, with aspect ratio maintained. Clicking anywhere closes the popup.
 
Окно открывается точно по размеру картинки.  
 
http://www.macromedia.com/cfusion/exchange/index.cfm?view=sn120
 
Добавлено
И закрывается отклика в любом месте

Всего записей: 103 | Зарегистр. 12-04-2003 | Отправлено: 10:31 19-06-2003 | Исправлено: yahoo777, 10:34 19-06-2003
Tomato



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
KVCH
 
Да, как-то сложно выглядит...  
А как их под один размер загонишь? Либо непропорциональным масштабированием, что есть полный абсурд, либо делать универсальный canvas size, но в этом нет смысла - вместо того можно ведь открывать всё в поп-апе фиксированного размера (суть тот же canvas size). И тогда самая маленькая картинка размером 250х160, например, будет очень странно смотреться в окне размером 550х550.
 
 
yahoo777
 
Спасибо, уже ближе к истине. Правда, Дримвейвер ставить придётся, ведь я им не пользовалась ни разу. Что немного смущает, так это "aspect ratio maintained". Но я надеюсь, никто не будет растягивать картинки без нужды.

Всего записей: 56 | Зарегистр. 02-04-2003 | Отправлено: 18:56 19-06-2003
Reeb



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
это ?:
 
photos.js

Код:
 
// Copyright 2002 Reeb [DA-Design]
// img = путь к картинке (например, picture.jpg)
// w = picture width
// h = picture height
// ww = window width (w+20)
// wh = window height (h+20)
function showPhoto(img,w,h,ww,wh) {windowPhoto=window.open('','','toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=yes,copyhistory=no,width='+ww+',height='+wh+'');
text = '<HTML><HEAD><TITLE>Trains.by.ru</TITLE></HEAD><BODY BGCOLOR=#FFFFFF LEFTMARGIN=10 TOPMARGIN=10><TABLE border=0 width=100% height=100% cellspacing=0 cellpadding=0><TR><TD align=center><IMG SRC="'+img+'" BORDER=0 width='+w+' height='+h+'></TD></TR></TABLE></BODY></HTML>';
windowPhoto.document.write(text);windowPhoto.focus();windowPhoto.document.close();return false;}
 

 
index.html

Код:
 
<HTML>
<HEAD>
<TITLE>Reeb</TITLE>
<SCRIPT LANGUAGE="JavaScript" SRC="photos.js"></SCRIPT>
</HEAD>
<BODY>
 
<TABLE WIDTH=110 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR><TD HEIGHT=20></TD></TR>
<TR><TD align="center"><A HREF="javascript:;" onClick="return showPhoto('photos/cher01.jpg','566','330','586','350')"><IMG SRC="photos/cher01s.jpg" BORDER=0 WIDTH=110 HEIGHT=75></A><BR><font style="font-family:Verdana;font-size:10px;">566 x 330</font></TD></TR>
<TR><TD HEIGHT=10></TD></TR>
<TR><TD align="center"><A HREF="javascript:;" onClick="return showPhoto('photos/cher02.jpg','450','297','470','317')"><IMG SRC="photos/cher02s.jpg" BORDER=0 WIDTH=110 HEIGHT=75></A><BR><font style="font-family:Verdana;font-size:10px;">450 x 297</font></TD></TR>
<TR><TD HEIGHT=10></TD></TR>
<TR><TD align="center"><A HREF="javascript:;" onClick="return showPhoto('photos/cher03.jpg','390','257','410','277')"><IMG SRC="photos/cher03s.jpg" BORDER=0 WIDTH=110 HEIGHT=75></A><BR><font style="font-family:Verdana;font-size:10px;">390 x 257</font></TD></TR>
</TABLE>
 
</BODY>
</HTML>
 


----------
≡≡≡

Всего записей: 1287 | Зарегистр. 02-01-2002 | Отправлено: 19:03 19-06-2003
Tomato



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Reeb
 
Ой, спасибо большое! Сейчас проверю и скажу, то это или не то.

Всего записей: 56 | Зарегистр. 02-04-2003 | Отправлено: 19:08 19-06-2003
yahoo777

Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Tomato
Если вы спросили(а) - то  javascript вы пока только учите. Если надо - учите. Может ещё пригодится.
Скипт Reeb хороший. Custom.
Но с помощью посоветованного мной ты избавляешься от рутины.
В Extention JustSo Picture Window нужно только кликать мышкой по кнопке browse - программка сама впишет путь к картинке, (главное!) размеры картинки, расставил флажки - сможешь выбрать с полями или без полей вставлять картинку, окно будет открывать с тем title кotopый ты укажешь, установишь бэкграунд для окна.
В Скипте Reeb половины этого нет а что есть нужно будет писать руками. Для каждой картинки.
Это хорошо. Уметь кодировать. Но не всегда это быстро решит твои проблемы. Особенно если ты больше любишь рисовать.

Всего записей: 103 | Зарегистр. 12-04-2003 | Отправлено: 23:41 19-06-2003 | Исправлено: yahoo777, 23:45 19-06-2003
Tomato



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
yahoo777
 
Я попробую и то, и другое - что больше подойдёт в моём случае.  
Единственное - по указанной тобой ссылке у меня грузится только предложение загрузить MF 6-й версии, которая у меня уже давно стоит. Ничего не понимаю...

Всего записей: 56 | Зарегистр. 02-04-2003 | Отправлено: 00:10 20-06-2003
Lechii



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Tomato

Цитата:
Ничего не понимаю...

JustSo Picture Window
http://www.valleywebdesigns.com/vwd_dw_JSPW.asp

Всего записей: 273 | Зарегистр. 26-12-2002 | Отправлено: 00:38 20-06-2003
Tomato



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Lechii
 
Спасибо! Так он, поди, не бесплатно его предоставляет? Иначе зачем ему действовать через е-мейл?

Всего записей: 56 | Зарегистр. 02-04-2003 | Отправлено: 01:12 20-06-2003
Lechii



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Tomato
Нет , это сайт разработчика - там можно посмотреть полное описание , баги и примеры . Там же линк на Macromedia Exchange , откуда берешь сам behavior : http://www.macromedia.com/cfusion/exchange/index.cfm#loc=en_us&view=sn121&viewName=Dreamweaver%20Extension&extID=224011&lc_id=81927

Всего записей: 273 | Зарегистр. 26-12-2002 | Отправлено: 01:29 20-06-2003
Tomato



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Lechii
 
Спасибо, скачала. Теперь, правда, ещё сам дримевейвер надо ставить...
 
Reeb
 
Я проверила - это именно то, что нужно. Вот сейчас смотрю и думаю - оставить ли рамку вокруг картинки или убрать совсем... Спасибо ещё раз!

Всего записей: 56 | Зарегистр. 02-04-2003 | Отправлено: 01:52 20-06-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Reeb
ой...
и зачем false return'ить, если скрипт по onClick вызывается?  
 
Tomato
ты в ПМ просила помочь..
Если устроит проставлять размеры картинок вручную, то можно сделать просто так:
Скажем, есть на странице ссылки на три картинки, которые нужно открыть в новом окне.  
Пишем скрипт:

Код:
<script>
/*
указываем путь к директории с картинками,
если урл с http://, то писать так-- http:/\/  
*/
var Path='images/'
 
// указываем названия файлов картинок
var imgs=new Array('img1.jpg','img2.jpg','img3.jpg')
 
// и их размеры + сколько-то пикселов для рамок окна и заголовка окна
var imgp=new Array('width=220\,height=100','width=195,height=250','width=150,height=400')
 
function openPage(q) {
alert((Path+imgs[q])+'\n'+imgs[q]+'\n'+imgp[q])
window.open((Path+imgs[q]),imgs[q].replace(/\./,''),imgp[q])
}
// стираем ненужные комментарии
</script>

 
Ссылки на картинки делаем так:

Код:
<a href="javascript:void openPage(0)">image1</a>
<a href="javascript:void openPage(1)">image2</a>
<a href="javascript:void openPage(2)">image3</a>
<!-- т.е. (номер файла-1) -->


----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 06:35 21-06-2003
Tomato



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga
 
Спасибо! Я тебе в ПМ ответила.

Всего записей: 56 | Зарегистр. 02-04-2003 | Отправлено: 08:02 21-06-2003
Lechii



Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga

Цитата:
 и зачем false return'ить, если скрипт по onClick вызывается?  

 
А если в обработчике события onClick не указать return false , разве броузер не попытается отработать <A HREF="javascript:;"> как настоящий линк ?

Всего записей: 273 | Зарегистр. 26-12-2002 | Отправлено: 14:51 21-06-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Lechii

Цитата:
А если в обработчике события onClick не указать return false , разве броузер не попытается отработать <A HREF="javascript:;"> как настоящий линк ?  

прогнал
onClick действительно до href отрабатывается:
 <a href="javascript:alert('href')" onClick="alert('onClick')">link</a>
 
ещё одно открытие
Tomato
ну да... эту строчку

Цитата:
alert((Path+imgs[q])+'\n'+imgs[q]+'\n'+imgp[q])  

вообще выбрось
она отладочная-- глюки с ИЕ вылавливал...
 
касательно остального-- чуть позже...

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 19:35 22-06-2003
Napets



Junior Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
yahoo777
Смотрии сообщение в ПМ!

Всего записей: 103 | Зарегистр. 07-04-2003 | Отправлено: 23:36 23-07-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Tomato
Как-то обещался что-то попробовать написать...
 
Смотри, чего надумал:
> в действии тут
 
> скрипты:
на странице, где thumbnail'ы или ссылки на картинки:

Код:
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
 
<script>
var scr='img/img.html'
// пишем, где находится файл со скриптом
 
function imgWin(img)
{
var wn=window.open(scr+'?'+escape(img),'win','resizable,width=400,height=200,screenX=0,screenY=0,top=0,left=0')
wn.focus()
return false
}
</script>
 
<!-- указываем пути относительно файла со скриптом для вывода картинок, либо относительно корневой директории, любо абсолютные -->
<a href="trial.jpg" onClick="return imgWin('trial.jpg')">trial.jpg</a><br>
<a href="billy.jpg" onClick="return imgWin('billy.jpg')">billy.jpg</a><br>
<a href="img/img.html" onClick="return imgWin('')">{прямой вызов скрипта}</a><br>

 
файл img.html, через который открываются картинки:

Код:
<style type=text/css><!--
body,img,table,tr,td{margin:0px;padding:0px;border:0px;text-align:center;vertical-align:middle}
--></style>
<meta http-equiv=Content-Type content="text/html; charset=windows-1251">
<body onLoad="if(d.images['i'])adjustWin()" leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<table width=100% height=100% cellpadding=0 cellspacing=0 border=0>
<tr><td><script>
var d=document
resizeTo(400,300)
function adjustWin(){resizeTo(d.images['i'].width+30,d.images['i'].height+47)}
 
var l=location.search
if(l.length>1){
var imgPath=unescape(location.search.substring(1,location.search.length));
var im=new Image
im.src=imgPath
d.write('<img name=i src="'+imgPath+'">')
}
else {d.write('Изображение временно недоступно.')}
</script></td></tr></table>

 
PS. эту тему потом закрою и информацию в ФАК по окнам добавлю...

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 06:45 10-11-2003 | Исправлено: Svarga, 06:47 10-11-2003
UncoNNecteD



Silver Member
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Глупо как то. Прописывать размеры руками.
Нужно имхо определять их, но это только на php можно сделать. Ява-Скриптом тут не обойтись.

----------
-= Я тут чертовски давно =-

Всего записей: 4040 | Зарегистр. 21-03-2002 | Отправлено: 23:02 11-11-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
UncoNNecteD

Цитата:
 Ява-Скриптом тут не обойтись.

смотри мой предыдущий пост

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 15:46 12-11-2003
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » Web-программирование » Pop-up окна с динамическими размерами - как сделать?


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.B0ard
© Ru.B0ard 2000-2025

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru