Увеличение только одной картинки при клике
Описание: Я уже выкладывал скрипт увеличение картики при клике. Однако, мне задали вопрос, как сделать так, чтобы в один момент могла бы быть увеличена только одна картинка. То есть когда кликают по другой картинке, текущая увеличенная должна быть уменьшена. Вот такой скрипт я и предлагаю Вашему вниманию.
Результат: Кликните на любую фотографию. Если кликните ещё раз, то она вернётся в исходное состояние. Причём, одновременно увеличенной может быть только одна фотография.
Фото 1 |
Фото 2 |
Код JavaScript (вставлять между тегами <head> и </head>):
<script language = "JavaScript">
var bigsize = "300"; //Размер большой картинки
var smallsize = "150"; //Размер маленькой картинки
var active_img = 0;
function changeSizeOneImage(im) {
if (active_img == im) {
active_img.height = smallsize;
active_img = 0;
return;
}
if (active_img != 0) active_img.height = smallsize;
active_img = im;
im.height = bigsize;
}
</script>
Код HTML (вставлять между тегами <body> и </body>):
<table align="center">
<tr>
<td align="center">
<img src="foto1.jpg" height="150" onclick="changeSizeOneImage(this)" />
<br />
<b>Фото 1</b>
</td>
<td align="center">
<img src="foto2.jpg" height="150" onclick="changeSizeOneImage(this)" />
<br />
<b>Фото 2</b>
</td>
</tr>
</table> -
Создано 12.09.2011 10:41:04
-
Михаил Русаков
Комментарии (24):
Михаил, большое спасибо!!!
Ответить
очень признательна сайт мне нравится...всё то, что нужно.Нечего лишнего.
Ответить
Да, спасибо все достаточно просто и легко, еще раз спасибо!
Ответить
Отличный скрипт , спасибо !!!
Ответить
Большое спасибо, простой и работающий скрипт! :) А к нему можно ещё добавить, чтобы фон при этом был затемнённым? Нашла много примеров с использованием LightBox, но хотелось бы использовать Ваш исходный код с открытием картинки, потому что он действительно прост и понятен.
Ответить
Я напишу статью про затемнение фона на следующей неделе (без подключения к скрипту).
Ответить
Спасибо! Только вот затемнить как раз получилось (кривым методом наверное, но всё же удалось), пример брала отсюда: http://www.xiper.net/examples/css/background.html а вот как бы это связать с Вашим скриптом ума не приложу.. Может не стоило к <div> привязывать это затемнение..
Ответить
Если брать пример по ссылке, то достаточно у блока #TB_overlay делать display: block;, когда картинка увеличена, и display: none;, когда картинка скрыта.
Ответить
Что-то меня заклинило..Так прописала в скрипте: if(im.height == bigsize) {im.height = smallsize; document.getElementById(TB_overlay).style.display = 'none'; } else { im.height = bigsize; document.getElementById(TB_overlay).style.display = 'block'; } Сам элемент: <div id="TB_overlay"> </div> Плюс по умолчанию #TB_overlay имеет в стилях имеет опцию: display: none; чтобы с самого начала открытия страницы фон не затемнялся. Скрипт работает, но фон не меняется.. Что я неправильно написала, подскажите пожалуйста?
Ответить
document.getElementById("TB_overlay").style.display, в кавычках надо писать TB_overlay.
Ответить
Да, действительно не заметила, спасибо! Только один недостаток - таким образом всё затемняется, в том числе и картинка, да и уменьшить её назад нет возможности.
Ответить
Здесь уже нужно поиграться со следующими свойствами: z-index, position: absolute; и, возможно, top, left. Также лучше поместить картинки в отдельный div, к которому и применять все эти свойства.
Ответить
У меня вопрос как мне увеличивать картинку и в ширину а не только в висоту?
Ответить
Менять атрибут width.
Ответить
При смени атрибута меняетса сама картинка а мне нужно штоб сама картинка била width="100" height="100" а при нажатие на нейо width="700" height="700" если етот невозможно подскажите пожалуста другой скрипт в котором ето столо би визможним
Ответить
Как при смене ширины может меняться сама картинка?
Ответить
я не в те атрибути вводил width уже розобоался спс
Ответить
Уважаемый Михаил, подскажите, пожалуйста, как сделать так, чтобы картинка увеличивалась на свои сто процентов. Но не в новом окне. Спасибо.
Ответить
Михаил, в данном скрипте можно убрать последнюю проверку if, а сразу после строки "active_img = im;" писать "im.height = bigsize;"
Ответить
Да, согласен. Убрал лишнее, спасибо!
Ответить
Михаил подскажите как сделать, при наведении мыши на одну из картинок она плавно увеличивалась, а когда мышь уходит из картинки, картинка плавно уменьшалась до первоначального размера. С одной картинкой это сделать просто, а вот если их несколько у меня не выходит. После первого отрабатывания фу-ции по увеличению теряется ссылка на картинку (this).
Ответить
Каждую картинку пометьте уникальным id. И по этому id изменяйте параметры изображения.
Ответить
Здравствуйте, Михаил. а я на эту тему вот такую функцию написал и она работает. скажите правильная ли она и можно ли ее использовать? var count = 0; function OnClickImg (img){ if (count == 0) { img.width = 500; count = count + 1; return; } if (count != 0) { img.width = 100; count = 0; } }
Ответить
Здравствуйте, Тимур. Неплохо.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.