Pop-up фото.

342

Jackyk

4 октября 2006, 06:12

2839

Подскажите, пожалуйста, как реализованы попапы с полноразмерным фото при клике на превью (маленькое фото). Например, как здесь.

Я так понимаю, что в коде страницы это выглядит так:

Вопрос: чтобы это работало на сайте, что нужно сделать, кроме вставки аналогичного кода в страницу? То есть задача такова: есть image_small.jpg (превью), надо обеспечить такой линк с него, чтобы открывался такой pop-up, как в примере, а в нем - полноразмерный image_large.jpg.

Заранее спасибо.

С уважением, Евгений.

103

content

4 октября 2006, 06:32

#1

Jackyk, вам необходимо сгенерировать подобный код во время генерации страницы на сервере. Т.е. считать размер имиджа и подставить эти значения в шаблон, как и имя/адрес картинки. Да, при подстановке в шаблон накиньте немножко точек на поля.

Кстати, в приведенном вами коде катастрофически нехватает JavaScript функции ShowPicture, которая была описана где-то на той-же странице или в вынесенном файле. Подозреваю, что в ней что-то связанное с window.open.

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

342

Jackyk

4 октября 2006, 06:44

#2

content:
Jackyk, вам необходимо сгенерировать подобный код во время генерации страницы на сервере. Т.е. считать размер имиджа и подставить эти значения в шаблон, как и имя/адрес картинки.

Ну то, что надо код аналогичный генерировать - это я понял. Но, насколько я понимаю, этого недостаточно.

content:
Кстати, в приведенном вами коде катастрофически нехватает JavaScript функции ShowPicture

Вот в этом-то и вопрос. То есть, что кроме аналогичного кода надо еще сделать и как?

Спасибо.

AN

243

AnNik

4 октября 2006, 06:55

#3

Можно сделать проще:

<a href="image/FullPicture.jpg" target="_blank"><img src="image/MiniPicture.jpg"></a>

Размещу ваши баннеры на посещаемых сайтах. Места еще есть! Возможен безнал. (/ru/forum/324945) Нужны копирайтеры/рерайтеры - медики. Пишите в личку. (/ru/forum/676932)

342

Jackyk

4 октября 2006, 07:00

#4

AnNik:
Можно сделать проще:

Ну! Это я понимаю! 🚬 Так-то сделать действительно проще, только это не солидно. Будет открываться новое окно, загораживать имеющееся, потом юзеру надо будет его закрывать крестиком, картинка будет не в размер окна...

А так - новое окно открывается, не загораживая основного целиком, и закрывается кликом по фотке.

Я, собственно, поэтому и интересуюсь, как сделать красиво. Тот способ мне известен. :)

103

content

4 октября 2006, 07:01

#5

AnNik, проще не выйдет, Jackyk хочет открывать поп-ап в размер имиджа, а не на весь экран.

342

Jackyk

4 октября 2006, 07:04

#6

Не, ребят, если это какая-то очень сложная процедура, то забейте, напрягаться не надо. Просто тогда, если можно, так и напишите: это сложная работа, надо заказывать.

Я спрашивал, исходя из предположения, что там всех дел на 2 строки, просто я их не знаю, так как не программист.

103

content

4 октября 2006, 07:08

#7

Jackyk, поглядите сюда.

И сделайте как-то так:


<a href=# onClick='window.open("big_image_url", "_blank", "height=big_image_high,width=big_image_width,status=yes,toolbar=no,menubar=no,location=no"); return false;'><img src="small_image_url"></a>

62

Николай В.

4 октября 2006, 07:13

#8


<?php

	$image_large = "images/large.jpg";

	$image_small = "images/small.jpg";

	list($width, $height, $type, $attr) = @GetImageSize($image_large);

?>

<a href="<?=$image_large;?>" onclick="window.open('<?=$image_large;?>','','Toolbar=0,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=1,Resizable=1,Width=<?=$width;?>,Height=<?=$height;?>');  return false;" target="_blank"><img src="<?=$image_small;?>"></a>

Возможно понадобится несколько скорректировать $width и $height. Если JS отключен, картинка откроется в новом полноразмерном окне браузера.

386

dkameleon

4 октября 2006, 07:30

#9

1. берём ф-ю:

<script type="text/javascript">
	function wOpen(url, w, h) {
	window.open(url, '_blank', 'scrollbars=0,menubar=0,height=' + h + ',width=' + w + ',resizable=0,toolbar=0,location=0,status=0');
	return false;
}

</script>

2. Оформляем ссылку:


$s = '<a href="IMAGE_BIG" target="_blank" onClick="return wOpen('popup.php?image=IMAGE_BIG', 'IMAGE_W', 'IMAGE_H');"><img src="IMAGE_SMALL" border="0" alt=""></a>;
'
			$data = array(
				"IMAGE_SMALL" => "thumb.jpg",
				"IMAGE_BIG" => "big.jpg",
			);
			if ($img = @getimagesize($row["image_big"])) {
				$data["IMAGE_W"] = $img[0] + 30;
				$data["IMAGE_H"] = $img[1] + 30;
			}
			$html_row = str_replace(array_keys($data), array_values($data), $s);
echo($html_row);

3. в файле popup.php:


<?
	$image = urldecode($_GET["image"]);
	if (!file_exists($image)) { die(); }
?>
<html>
<head>
<title>Zoom</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body bgcolor="#E9E9E9" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10">
<table border="0" width="100%" height="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td valign="middle" align="center">
			<img src="<?=htmlspecialchars($image);?>" border="0" alt="">
		</td>
	</tr>
</table>
</body>
</html>

Делается приблизительно так. :)

Дизайн интерьера (http://balabukha.com/)

342

Jackyk

4 октября 2006, 15:14

#10

Всем большое спасибо. Сделал фактически то, что хотел, так что реально помогли. Правда, основные проблемы, на которые ушло пол-дня, были с тем, как эти вещи сделать в темплэйте eZ не на php, а на внутреннем языке; блин, до чего же там мудрено всё, пока сам носом не вспашешь конкретную задачу и не узнаешь, как она решается раз и навсегда.

Собственно, беря за основу коды Николая В. и content'а, решается все, кроме двух вещей: чтобы новое окно была строго под размер фото, то есть чтобы между рамкой окна и фото вообще не было ни пикселя, и второе - чтобы окно закрывалось кликом по фото.

Надо полагать, что это уже возможно только в более сложном варианте, типа того, что предложил dkameleon, то есть с отдельным popup.php, где это всё и прописывается. Проще никак?

Впрочем, и так вполне нормально и красиво. По уровню восприятия с простым открыванием в новом окне - ни в какое сравнение не идет. Большое спасибо за помощь.

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

Вышел новый Яндекс Браузер с YandexGPT и YandexART

Зачем быть уникальным в мире, где все можно скопировать