Открытие по клику на миниатюре большого фото в новом окне на JavaScrip

Andrey Taborin · November 29, 2007

Как на JavaScript сделать следующее: при наведении курсора на

изображение-миниатюру, что-бы открывалось большое фото в новом окне,

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

фото.

На примере другого сайта увидел, что применяется JavaScript,

сегодня подсказали, что только на JavaScript делается.

Нельзя ли привести код на JavaScript, дело в том, что я его не знаю,

что нужно прописать в

и сам фрагмент, что

бы такая вставка в HTML заработала.

Петр · November 29, 2007

Мне наверное кажется... это тока кажется ... где-то этот вопрос уже звучал...

Ответьте, вы где-то работаете или как? кому сайт делаете, себе, другу, или еще кому, может проще вам его сделать? а то даже не интересно, в прошлом таком вопросе вам было написано, что и где читать.

maddogrts · November 29, 2007

значит так создаете фаил pop.js например в него помещаете эту хрень внищу которая

<script>
function popupImage(img, pname, W, H){
	 image = new Image();
	 image.src = img;

	 X = (window.screen.availWidth / 2) - (W / 2);
	 if (window.screen.availHeight - 24 < H)
	 {
		  Y = 0;
		  W += 17;
		  H = window.screen.availHeight - 24;
	 }	 else	 {
		  Y = (window.screen.availHeight / 2) - (H / 2 + 12);
	 }

	 params = "scrollbars=yes, status=yes, resizable=1, width=" + W + ",height=" + H + ",left=" + X + ",top=" + Y;
	 wID = window.open ('', name, params);
	 with(wID.document){
		  open();
		  write('<hmtl><head><title>'+pname+'</title></head><body style="margin: 10px; padding: 0; "><a href="#" onclick="window.close();" alt="Click to close the window" title="Click to close the window">');
		  write('<img src="'+img+'" border="0"/></a></body></html>');
		  close();
	 }
}
</script>

Далее )), вставлятете след хрунь в текст документа :

quot;-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<script type="text/javascript" src="/js/pop.js">
и далее

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

<a href="full.gif" onclick="popupImage(this.href, 'название окна титле', 'ширина', 'высота'); return false;"><img class="floatLeft" src="b.gif" alt="Office in St. Petersburg" title="" width="247" height="169" /></a>

Если хочется что бы при наведение делаем место onclick - onmouseover

А чтобы он размеры сам вычилял ) то можно подругому щас дам ссылку: http://www.habrahabr.ru/blog/AJAX/5264.html

Вот так вот и не мучаться чтобы вам .

D.S.Denton · November 29, 2007

угу, но там бы вопрос как сделать это средствами html, здесь уже про js.

использовать window.open

параметры - resizable=no width=ширина height=высота status=0 directories=0

D.S.Denton · November 29, 2007

undefined

ужас

Петр · November 29, 2007

значит так создаете фаил pop.js например в него помещаете эту хрень внищу которая...

ужас, честно.

Andrey Taborin · November 29, 2007

Код который нашел для примера на странице 2013.html :

Просто хочу скопировать фрагмент, подставить свои данные, только не знаю, что бы

заработал JavaScript, что нужно в

прописать и еще не знаю, что такое параметр

'mywindow' в фунции window.open

maddogrts · November 29, 2007

Что ужас ?

Петр · November 29, 2007

Что ужас ?

вместо одной строки скрипта вы написали, сколько?

maddogrts · November 29, 2007

Как на JavaScript сделать следующее: при наведении курсора на
изображение-миниатюру, что-бы открывалось большое фото в новом окне,
но это окно было без панелей инструментов, ровно в размер большого
фото.

Указать для окна размер. Ну мне кажетсья что лучше если окно будет примерно посередине чем в углу.

Или воспользоваться лайт боксом.

ладно можно сократить )

function popupImage(img, pname, W, H){
 var X = Math.round((screen.width - W) / 2);
 var Y = Math.round((screen.height - H) / 2);
 params = "scrollbars=yes, status=yes, resizable=1, width=" + W + ",height=" +H + ",left=" + X + ",top=" + Y;
 wID = window.open ('', name, params);
 wID.href = img + '&pname=' + pname;
}

Andrey Taborin · November 29, 2007

Что ужас ?
вместо одной строки скрипта вы написали, сколько?

Петр, так все таки одной строкой скрипта решается ?

Просто через window.open ? Но тогда - следующий вопрос, что

надо написать в

и что такое mywindow

Такой вариант компактный, видно было как он работает,

вполне подходит

maddogrts · November 29, 2007

буки вы все (((

Andrey Taborin · November 29, 2007

Как на JavaScript сделать следующее: при наведении курсора на
изображение-миниатюру, что-бы открывалось большое фото в новом окне,
но это окно было без панелей инструментов, ровно в размер большого
фото.
Указать для окна размер. Ну мне кажетсья что лучше если окно будет примерно посередине чем в углу.
Или воспользоваться лайт боксом.
ладно можно сократить )
function popupImage(img, pname, W, H){
 var X = Math.round((screen.width - W) / 2);
 var Y = Math.round((screen.height - H) / 2);
 params = "scrollbars=yes, status=yes, resizable=1, width=" + W + ",height=" +H + ",left=" + X + ",top=" + Y;
 wID = window.open ('', name, params);
 wID.href = img + '&pname=' + pname;
}

Я ничего не имею против, просто к сожалению нужно еще вникать во все параметры,

за труд благодарствую , но через window.open было бы приемлемей мне, попроще все же

maddogrts · November 29, 2007

Andrey Taborin где проще ? проще чем что ?

простейший вариант все разжевал, да и написал как лучше сделать. Что не понятно го спрашивай :?

Andrey Taborin · November 29, 2007

Дело в том, что поджимает время. JavaScript совсем не знаю, вот у вас используется вижу внутри window.open,

многие детали - не понятны. Если бы как в приведенном выше примере, что я скопировал с сайта, только что мне в

написать, и что такое 'mywindow' - было бы оптимально ...

Петр · November 30, 2007

Петр, так все таки одной строкой скрипта решается ?
Просто через window.open ? Но тогда - следующий вопрос, что
надо написать в
и что такое mywindow
Такой вариант компактный, видно было как он работает,
вполне подходит

Да, решается все очень просто:

open(URL, windowName[, windowFeatures])
window.open("someDoc.html","subWind", "statusbar,menubar,HEIGHT=400,WIDTH=300)

Я не понимаю, зачем вам что-то писать в хэд, и что такое "yourWindow", извените, я не знаю

Dimitry Wolotko · November 30, 2007

В JS

Maslakoff · December 1, 2007

А не пробовали пользоваться LightBox? Или всетаки новое окно?

У многих стоит бликировка этих окон. Хотя хз...

kelt · May 29, 2008

всем доброе время суток.

воспользовался скриптом с 3го поста

<script>
function popupImage(img, pname, W, H){
	 image = new Image();
	 image.src = img;

	 X = (window.screen.availWidth / 2) - (W / 2);
	 if (window.screen.availHeight - 24 < H)
	 {
		  Y = 0;
		  W += 17;
		  H = window.screen.availHeight - 24;
	 }	 else	 {
		  Y = (window.screen.availHeight / 2) - (H / 2 + 12);
	 }

	 params = "scrollbars=yes, status=yes, resizable=1, width=" + W + ",height=" + H + ",left=" + X + ",top=" + Y;
	 wID = window.open ('', name, params);
	 with(wID.document){
		  open();
		  write('<hmtl><head><title>'+pname+'</title></head><body style="margin: 10px; padding: 0; "><a href="#" onclick="window.close();" alt="Click to close the window" title="Click to close the window">');
		  write('<img src="'+img+'" border="0"/></a></body></html>');
		  close();
	 }
}
</script>

все чудесно работает, но проблема в том что непонятно как оно работает=(

если кому нетрудно добавти пояснения по строкам плз

P.S. заранее спс

Sign In

Открытие по клику на миниатюре большого фото в новом окне на JavaScrip

Question

Link to comment

Share on other sites

18 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information