JavaScript: Открытие картинки в новом окне по размеру картинки

68

Q4-SaiBot

26 апреля 2007, 22:59

26442

Заранее скажу, в яваскриптах не силен, перерыл пол-инета в поисках нормального скрипта, но так и не нашел решения проблемы.

Есть следующий яваскрипт, вызываемый из внешнего файла:

var popUpWin=0;

function popUpPic(URLStr)

{

  if(popUpWin)

  {

    if(!popUpWin.closed) popUpWin.close();

  }

  popUpWin = open(URLStr, '&#212;&#238;&#242;&#238;', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=yes, width=100, height=100');

}

Всплывающая картинка вызывается следующим образом:


<a href="01.jpg" onclick="popUpPic(this.href); return false;"><img src="t01.jpg" alt="Test" width="110" height="72" /></a>

Вопрос:

Как с помощью JavaScript сделать, чтобы всплывающее окно было под размер картинки, ничего не правя в самом HTML'e

А небо все точно такое же, как если бы ты не продался ...

570

Dreammaker

27 апреля 2007, 00:44

#1

Отписал в личку.. Пример, на сайте который я раньше вёл (веб-мастеринг + оптимизация).

В оригинале взято из фака одного из больших программерских форумов точно не помню какого :)

Если у ТС будет желание пусть выцепит код и разместит здесь - он того заслуживает :)

update: всё же решил сам "вытянуть".

В head страницы пишем..


<script>

var scr='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>

Дальше ну например ссылка с миникартинкой и js-кодом..


 <a href="img/big_img.jpg" onClick="return imgWin('img/big_img.jpg')"><img src="img/small_img.jpg" border=0 alt=""></a>

И ещё создаём страничку 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>

И всё работает.. ИМХО, наилучший вариант из всех, что я встречал.

Paytrix.ru - вывод Adsense Увеличение посещаемости сайта за Почему на сайте выполняется

68

Q4-SaiBot

27 апреля 2007, 01:13

#2

Толковый вариант, скажу честно, - на данный момент лучшее, что я видел на данную проблему. Хотя за две ночи успел перелопатить наверное половину форумов по JS.

Благодарю, Dreammaker. Обязательно разберусь с этим скриптом и напишу небольшую статейку с примерами кодов и переписанным под себя вариантом :) Выложу ее на своем будущем блоге. Наверняка не я один этим заморачивался ...

V

56

vintyara

10 июля 2007, 12:34

#3

А можно пример - как открыть новое окно _в центре_ экрана ?

Каталог сайтов Одессы. (http://url.od.ua)

98

Creeping Shadow

20 сентября 2007, 21:56

#4

А вот как бы туда еще и title передать? ;)

Лучшие, на мой взгляд, VPS/VDS в Германии (https://bill2fast.com/aff.php?aff=449) Я поддерживаю Сапу, я не поднимаю цены, не снимаю ссылки, не бегу в биржи-клоны. (/ru/forum/comment/3758255) Антикризисные проекты коттеджей! За персональной скидкой - в личку ;) (http://architek.spb.ru/)

46

ixRock

21 сентября 2007, 05:27

#5

function x_window(imgSrc) {

margin = 20;

x_win = open("", "x_win", "resizable,width=100,height=100,top=0,left=0");

img = new Image();

img.onload = function() {

x_win.resizeTo(w = img.width + margin, h = img.height + margin*3);

x_win.moveTo( (document.body.clientWidth - w) / 2 , (document.body.clientHeight - h) / 2);

if( img.outerHTML ) x_win.document.write( img.outerHTML );

else x_win.document.body.appendChild(img);

}

img.src = imgSrc;

}

</script>

<a href="javascript:x_window('images/test.jpg')"> Show image </a>

Работаю [S]за еду и секас[/S] с XHTML, CSS, XSLT, JS, PHP. Если что, вот тут (http://www.mintdesign.ru/) некоторые мои работы. Контакты: ася 344-ноль86-276, мыло ixrock@gmail.com

98

Creeping Shadow

21 сентября 2007, 05:35

#6

href="javascript:x_window('images/test.jpg')"

это "грязный" код, да и просто некрасиво...

67

Topcrust

21 сентября 2007, 07:32

#7

А можно пример - как открыть новое окно _в центре_ экрана ?

Брал за основу скрипты с неск. лебедевских сайтов. Скрипт открывает ссылу в попапе (т.е. можно, например, для формы обратной связи использовать), но, если в URL'е встречается gif или jp(e)g или png, то скрипт генерит нужный HTML и грузит только картинку. Обязательный параметр только один - URL (картинки или странички). По умолчанию открывается окно 500 на 600.

Вызываем так:

<a href="/feedback.php" onclick="return pop(this.href);">обратная связь</a>

Или так:

<a href="/img/big.jpg" onclick="return pop(this.href, '600', '400', 'название картинки');">

<img src="/img/small.jpg" width="300" height="200" /></a>

Сам скрипт:


function pop(iUrl, winW, winH, winN) {

	var iWidth = (winW)? winW : 600;

	var iHeight = (winH)? winH : 500;

	var iTitle = (winN)? winN : 'popupWin';

	var scrollB = 'no';

	var posCode = '';



	if(screen) {

		var scrW = screen.width ? screen.width - 100 : 0;

		var scrH = screen.height ? screen.height - 100 : 0;

		if( scrW < iWidth ) { scrollB = 'yes'; iWidth = scrW; }

			else { scrW = screen.width }

		if( scrH < iHeight ) { scrollB = 'yes'; iHeight = scrH; }

			else { scrH = screen.height }

		var posX = Math.round( ( scrW - iWidth ) / 2 );

		var posY = Math.round( ( scrH - iHeight ) / 2 );

		posCode = ',left='+posX+',top='+posY;

	}



	iOptions = 'width=' + iWidth + ',height=' + iHeight + ',scrollbars=' + scrollB + ',resizable=yes,toolbar=no,status=yes' + posCode;



	if(iUrl.match(/\.(gif|jpe?g|png)$/i)) {

		popWin = window.open('', '_blank', iOptions);

		popWin.document.open();

		popWin.document.write('<html><head><title>' +

			iTitle +

			'</title></head><body style="background: #fff; margin: 0; padding: 0;">' +

			'<table cellpadding="0" cellspacing="0" border="0" height="100%"><tr><td>' + 

			'<img src="' + iUrl + '" /></td></tr></table></body></html>'

			);

		popWin.document.close();

	} else {

		popWin = window.open(iUrl, iTitle, iOptions);

	}



	popWin.focus();

	return false;

}

Дополнение:

Важно еще помнить в каком режиме работает браузер (Quirks, Standards) - некоторые команды скрипта придется подправить. Подробнее:

http://www.quirksmode.org/js/doctypes.html

http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/index.html

46

ixRock

21 сентября 2007, 08:51

#8

Creeping Shadow:
это "грязный" код, да и просто некрасиво...

это мелочи, приведено для примера... лучше конечно повесить так:

<a href="images/image.jpg" target="_blank" onclick="x_window('images/image.jpg'); return false"> Show image... </a>

основная суть была в скрипте выше! :)

Что делать, если ваша email-рассылка попала в спам

Курс биткоина превысил $50 тысяч