<MyRusakov.ru />

JavaScript, jQuery и Ajax с Нуля до Гуру

JavaScript, jQuery и Ajax с Нуля до Гуру

Видеокурс "JavaScript, jQuery и Ajax с Нуля до Гуру" научит Вас "вдыхать жизнь" в страницы, делая их с потрясающими эффектами и максимальным удобством для пользователя.

Курс научит Вас писать скрипты на JavaScript, а также обучит использованию библиотеки jQuery и технологии Ajax.

Практически любой красивый сайт (с красивыми галереями изображений, слайдерами, плавными переходами и так далее) использует jQuery. А практически на любом серьёзном сайте вовсю используется технология Ajax, которая делает работу с сайтом максимальной удобной.

Поэтому курс "JavaScript, jQuery и Ajax с Нуля до Гуру" Вам просто необходим, если Вы хотите создавать по-настоящему достойные сайты.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Увеличение только одной картинки при клике

Увеличение только одной картинки при клике

Описание: Я уже выкладывал скрипт увеличение картики при клике. Однако, мне задали вопрос, как сделать так, чтобы в один момент могла бы быть увеличена только одна картинка. То есть когда кликают по другой картинке, текущая увеличенная должна быть уменьшена. Вот такой скрипт я и предлагаю Вашему вниманию.

Результат: Кликните на любую фотографию. Если кликните ещё раз, то она вернётся в исходное состояние. Причём, одновременно увеличенной может быть только одна фотография.

Фото 1
Фото 1
Фото 2
Фото 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>

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (24):

eliza eliza 12.09.2011 21:29:32

Михаил, большое спасибо!!!

Ответить

aselka88 aselka88 13.09.2011 17:47:26

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

Ответить

sarcodin sarcodin 30.12.2011 21:41:57

Да, спасибо все достаточно просто и легко, еще раз спасибо!

Ответить

Hellsvin Hellsvin 09.01.2012 12:52:26

Отличный скрипт , спасибо !!!

Ответить

LiuLiuJons LiuLiuJons 31.01.2012 19:27:26

Большое спасибо, простой и работающий скрипт! :) А к нему можно ещё добавить, чтобы фон при этом был затемнённым? Нашла много примеров с использованием LightBox, но хотелось бы использовать Ваш исходный код с открытием картинки, потому что он действительно прост и понятен.

Ответить

Admin Admin 31.01.2012 19:30:45

Я напишу статью про затемнение фона на следующей неделе (без подключения к скрипту).

Ответить

LiuLiuJons LiuLiuJons 31.01.2012 19:42:32

Спасибо! Только вот затемнить как раз получилось (кривым методом наверное, но всё же удалось), пример брала отсюда: http://www.xiper.net/examples/css/background.html а вот как бы это связать с Вашим скриптом ума не приложу.. Может не стоило к <div> привязывать это затемнение..

Ответить

Admin Admin 31.01.2012 19:49:18

Если брать пример по ссылке, то достаточно у блока #TB_overlay делать display: block;, когда картинка увеличена, и display: none;, когда картинка скрыта.

Ответить

LiuLiuJons LiuLiuJons 31.01.2012 20:45:04

Что-то меня заклинило..Так прописала в скрипте: 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; чтобы с самого начала открытия страницы фон не затемнялся. Скрипт работает, но фон не меняется.. Что я неправильно написала, подскажите пожалуйста?

Ответить

Admin Admin 31.01.2012 20:48:56

document.getElementById("TB_overlay").style.display, в кавычках надо писать TB_overlay.

Ответить

LiuLiuJons LiuLiuJons 31.01.2012 21:43:06

Да, действительно не заметила, спасибо! Только один недостаток - таким образом всё затемняется, в том числе и картинка, да и уменьшить её назад нет возможности.

Ответить

Admin Admin 31.01.2012 22:05:04

Здесь уже нужно поиграться со следующими свойствами: z-index, position: absolute; и, возможно, top, left. Также лучше поместить картинки в отдельный div, к которому и применять все эти свойства.

Ответить

kazamaki kazamaki 09.03.2012 23:40:49

У меня вопрос как мне увеличивать картинку и в ширину а не только в висоту?

Ответить

Admin Admin 09.03.2012 23:42:25

Менять атрибут width.

Ответить

kazamaki kazamaki 09.03.2012 23:50:25

При смени атрибута меняетса сама картинка а мне нужно штоб сама картинка била width="100" height="100" а при нажатие на нейо width="700" height="700" если етот невозможно подскажите пожалуста другой скрипт в котором ето столо би визможним

Ответить

Admin Admin 10.03.2012 00:15:15

Как при смене ширины может меняться сама картинка?

Ответить

kazamaki kazamaki 10.03.2012 00:36:05

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

Ответить

annata annata 25.08.2012 01:37:49

Уважаемый Михаил, подскажите, пожалуйста, как сделать так, чтобы картинка увеличивалась на свои сто процентов. Но не в новом окне. Спасибо.

Ответить

mnurgaliev mnurgaliev 05.06.2013 16:18:02

Михаил, в данном скрипте можно убрать последнюю проверку if, а сразу после строки "active_img = im;" писать "im.height = bigsize;"

Ответить

Admin Admin 05.06.2013 23:22:57

Да, согласен. Убрал лишнее, спасибо!

Ответить

Allidjan Allidjan 25.06.2013 00:12:44

Михаил подскажите как сделать, при наведении мыши на одну из картинок она плавно увеличивалась, а когда мышь уходит из картинки, картинка плавно уменьшалась до первоначального размера. С одной картинкой это сделать просто, а вот если их несколько у меня не выходит. После первого отрабатывания фу-ции по увеличению теряется ссылка на картинку (this).

Ответить

Admin Admin 25.06.2013 10:37:32

Каждую картинку пометьте уникальным id. И по этому id изменяйте параметры изображения.

Ответить

Smiley Smiley 24.02.2014 18:47:35

Здравствуйте, Михаил. а я на эту тему вот такую функцию написал и она работает. скажите правильная ли она и можно ли ее использовать? var count = 0; function OnClickImg (img){ if (count == 0) { img.width = 500; count = count + 1; return; } if (count != 0) { img.width = 100; count = 0; } }

Ответить

tikkiwiki tikkiwiki 04.03.2014 14:04:43

Здравствуйте, Тимур. Неплохо.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.