При клике увеличиваем фото

@Syltan · Регистрация: 27.08.2009

Студворк — интернет-сервис помощи студентам

Давно волновал вопрос. Как можно сделать, что при наведении на картинку, а затем на её нажатии, можно было увеличить фото, как на этом форуме.

@romchiksoad · 11.03.2010, 20:52

с помощью js обращаться к скрипту на php, который и содержит код для уменьшения, увеличения картинки. Для написания такого кода потребуется библиотека GD

@Syltan · 11.03.2010, 22:04 **[ТС]**

вы не могли бы привести пример.

@boong · 12.03.2010, 01:18

тут смотрите http://highslide.com/

@Syltan · 12.03.2010, 01:45 **[ТС]**

А на русском языке есть? Я английский не знаю, да и переводить больше времени займёт чем понять будет. Кто может, напишите код, как сделать такое. Благодарю.

@boong · 12.03.2010, 01:51

Вот смотрите этот архив

@Syltan · 12.03.2010, 17:09 **[ТС]**

А собственно сколько файлов необходимо для получения такой возможности. Я там нашёл папку с именем examples и highslide, какие именно имена файлов отвечают за такое действие?

@romchiksoad · 12.03.2010, 18:54

PHP
1
2
3
4
5
6
7
8
9
10
11
<?php
define ("WIDTH", 30);
define ("HEIGHT", 30);
$image=ImageCreateFromPng("user_64.png");
$img=ImageCreate(WIDTH, HEIGHT);
$width=imagesx($image);
$height=imagesy($image);
ImageCopyResampled($img, $image, 0, 0, 0, 0, WIDTH, HEIGHT, $width, $height);
header("Content-type:image/png");
imagepng($img);
?>

с js к сожалению помочь не могу пока, что

сам толком не знаю

@Syltan · 12.03.2010, 20:04 **[ТС]**

Прошу прощения, ваш код только выводит изображение на экран, но не увеличивает изображение.

@romchiksoad · 12.03.2010, 22:05

Сообщение от Syltan

Прошу прощения, ваш код только выводит изображение на экран, но не увеличивает изображение.

Он выводит либо уменьшенное изображение, либо увеличенное...поэкспериментируй с
define ("WIDTH", 30);
define ("HEIGHT", 30);
меняй значения на большие или на меньшие и картинка будет выводиться либо большего размера, либо меньшего. К тому же он заточен на png. Что бы изменить, нужно в скрипте все что содержит *png* изменить на требуемый формат(если он поддерживается GD) например:
было ImageCreateFromPng, а для gif нужно ImageCreateFromGif и так далее...Что бы это происходило динамически (например при наведении курсора или при клике по картинке), нужно обратиться к js, в этом я не шарю ещё

@Syltan · 13.03.2010, 13:25 **[ТС]**

Попробовал поменять значения define ("WIDTH", 30);
define ("HEIGHT", 30); только картинка растягуется и всё, а так при нажатии на кратинк она не увеличивается. Boong ты не подскажешь?

@boong · 13.03.2010, 18:30

Сообщение от Syltan

Boong ты не подскажешь?

Что именно нужно сделать?

@Syltan · 13.03.2010, 18:47 **[ТС]**

Какой именно код нужен, для того ,что при наведении мышкой на картинку, картинка увеличивалась, а затем при нажатии на неё становилась в начальное положение.

@boong · 13.03.2010, 18:59

Код для изображения ,так нужно?

HTML5
1
<center><a href="#тут путь к изображению" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="#тут путь к изображению миниатюры" border=0 width=200 style="border:none;"></a></center><br>

Затем в корне сайта создаём директорию highslide.
Пихаем туда файл highslide.css из архива.
После этого открываем файл highslide.js и находим в нём это :

creditsText : 'текст надписи на картинке',
creditsHref : 'адресс вашего сайтеГа',
creditsTitle : 'комментарий к надписи',

Думаю, что на что вам надо будет заменить и так понятно.
Ставим его в созданную директорию.
В эту же директорию загружаем папку graphics со всеми файлами, котрые внутри.В итоге должен получиться путь /highslide/graphics/
Теперь в шаблонах между <head>........</head> пишем :

JavaScript
1
2
3
4
5
6
7
<style type="text/css" media="all">
@import url(highslide/highslide.css);
</style> 
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript"> 
 hs.graphicsDir = 'highslide/graphics/';
</script>

и конечно пути правильно пропишите

Всё

@Syltan · 13.03.2010, 20:19 **[ТС]**

Всё сделал ,как вы сказали, при наведении курсора на картинку, картинка не увеличивается постепенно, а сразу при нажатии превращается в большую, и больше ничего сделать нельзя нажав на картинку уменьшить её, нет лупы. Я всё сделал, вложил проект. Запускаю в браузере Експлорер, как можно исправить?
Вот исходник моего файла html;

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<title>Фотография </title>
<head>
<style type="text/css" media="all">
@import url(highslide/highslide.css);  //Это способ вместо <link rel="styleshet" и т.д....................???
</style> 
<script type="text/javascript" src="highslide/highslide.js"></script>
<script type="text/javascript"> 
 hs.graphicsDir = 'highslide/graphics/';
</script>
</head>
<body>
 
 
<center><a href="mini.jpg"
 class="highslide" onclick="return hs.expand(this,
 {captionId: 'caption1'})"><img src="big.jpg"
 border=0 width=200 style="border:none;"></a></center><br>
 
</body>
</HTML>

@romchiksoad · 13.03.2010, 20:29

Сообщение от Syltan

Попробовал поменять значения define ("WIDTH", 30);
define ("HEIGHT", 30); только картинка растягуется и всё, а так при нажатии на кратинк она не увеличивается.

Сообщение от romchiksoad

Что бы это происходило динамически (например при наведении курсора или при клике по картинке), нужно обратиться к js, в этом я не шарю ещё

boong в помощь

@boong · 13.03.2010, 20:31

Так?

@boong · 13.03.2010, 20:55

Правда тут в этом скрипте есть один минус при загрузке страницы грузится оба изображения и если они не оптимизированы для веб то 10-20 таких изображений могут здорово увеличить время загрузки страницы, лучший вариант это сделать подгрузку изображения через ajax, а изображения при загрузке на сервер будет обрабатывать скрипт на php+библиотека в итоге это незначительно повлияет на время загрузки страницы.
Вот в архиве два изображения big.jpg это без обработки и big_1.jpg это обработанное изображения разницу картинки определить почти невозможно, но разницу в размере файла видно и естественно страница будет грузится быстрее.

@Syltan · 13.03.2010, 21:08 **[ТС]**

Вы имеете ввиду, лучше разрезать эту картинку на кусочки через фотошоп ,а затем запустить скрипт?
Ещё, скажите, как сделать, чтоб при нажатии на картинку, если она вдруг не успела загрузится, показывалась вид загрузки, и как сделать возможность закрытия крестиком?
Можно ли ещё сделать, чтоб на самой картинке был значок увеличения и значок уменьшения изображения, как на сайте мобильных телефонов?

@boong · 13.03.2010, 21:19

Сообщение от Syltan

Вы имеете ввиду, лучше разрезать эту картинку на кусочки через фотошоп ,а затем запустить скрипт?

Нет ничего не нужно резать просто изображения оптимизировать и всё.

Сообщение от Syltan

Ещё, скажите, как сделать, чтоб при нажатии на картинку, если она вдруг не успела загрузится, показывалась вид загрузки, и как сделать возможность закрытия крестиком?
Можно ли ещё сделать, чтоб на самой картинке был значок увеличения и значок уменьшения изображения, как на сайте мобильных телефонов?

Посмотрите какой Вам вариант больше всего подходит с файла 5454544.zip и возьмине от туда все нужные файли и просто подправте их.

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868

	При клике увеличиваем фото 09.03.2010, 19:02. Показов 17457. Ответов 29 Метки нет (Все метки) Давно волновал вопрос. Как можно сделать, что при наведении на картинку, а затем на её нажатии, можно было увеличить фото, как на этом форуме. 0

@romchiksoad 1957 / 796 / 89 Регистрация: 03.11.2009 Сообщений: 3,066 Записей в блоге: 2
	11.03.2010, 20:52
	с помощью js обращаться к скрипту на php, который и содержит код для уменьшения, увеличения картинки. Для написания такого кода потребуется библиотека GD 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	11.03.2010, 22:04 [ТС]
	вы не могли бы привести пример. 0

@boong 154 / 124 / 11 Регистрация: 11.01.2010 Сообщений: 434
	12.03.2010, 01:18
	тут смотрите http://highslide.com/ 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	12.03.2010, 01:45 [ТС]
	А на русском языке есть? Я английский не знаю, да и переводить больше времени займёт чем понять будет. Кто может, напишите код, как сделать такое. Благодарю. 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	12.03.2010, 17:09 [ТС]
	А собственно сколько файлов необходимо для получения такой возможности. Я там нашёл папку с именем examples и highslide, какие именно имена файлов отвечают за такое действие? 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	12.03.2010, 20:04 [ТС]
	Прошу прощения, ваш код только выводит изображение на экран, но не увеличивает изображение. 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	13.03.2010, 13:25 [ТС]
	Попробовал поменять значения define ("WIDTH", 30); define ("HEIGHT", 30); только картинка растягуется и всё, а так при нажатии на кратинк она не увеличивается. Boong ты не подскажешь? 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	13.03.2010, 18:47 [ТС]
	Какой именно код нужен, для того ,что при наведении мышкой на картинку, картинка увеличивалась, а затем при нажатии на неё становилась в начальное положение. 0

@Syltan 241 / 9 / 7 Регистрация: 27.08.2009 Сообщений: 868
	13.03.2010, 21:08 [ТС]
	Вы имеете ввиду, лучше разрезать эту картинку на кусочки через фотошоп ,а затем запустить скрипт? Ещё, скажите, как сделать, чтоб при нажатии на картинку, если она вдруг не успела загрузится, показывалась вид загрузки, и как сделать возможность закрытия крестиком? Можно ли ещё сделать, чтоб на самой картинке был значок увеличения и значок уменьшения изображения, как на сайте мобильных телефонов? 0