Форум Сайтостроение Веб-строительство

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

Q4-SaiBot
На сайте с 17.12.2006
Offline
68
Q4-SaiBot
26575

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

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

var popUpWin=0;

function popUpPic(URLStr)

{

  if(popUpWin)

  {

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

  }

  popUpWin = open(URLStr, 'Ôîòî', '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

А небо все точно такое же, как если бы ты не продался ...
Dreammaker
На сайте с 20.04.2006
Offline
569
Dreammaker
#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>

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

Увеличение посещаемости сайта за Cloudflare меняет записи dns Почему на сайте выполняется
Q4-SaiBot
На сайте с 17.12.2006
Offline
68
Q4-SaiBot
#2

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

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

V
На сайте с 08.07.2007
Offline
56
vintyara
#3

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

Каталог сайтов Одессы. (http://url.od.ua)
Creeping Shadow
На сайте с 05.10.2005
Offline
98
Creeping Shadow
#4

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

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

<script type="text/javascript">

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
Автоматизация продвижения интернет-магазинов Успешный сайт для Google Роман Мандрик Вирусный маркетинг:
Creeping Shadow
На сайте с 05.10.2005
Offline
98
Creeping Shadow
#6
href="javascript:x_window('images/test.jpg')"

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

Topcrust
На сайте с 23.06.2006
Offline
67
Topcrust
#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

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие
ixRock
На сайте с 14.11.2006
Offline
46
ixRock
#8
Creeping Shadow:
это "грязный" код, да и просто некрасиво...

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

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

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

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий