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

@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 и возьмине от туда все нужные файли и просто подправте их.

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

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

	При клике увеличиваем фото 09.03.2010, 19:02. Показов 17407. Ответов 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