<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

Скрипт галереи на JavaScript

Скрипт галереи на JavaScript

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

Результат:

Главное изображение

Изображение 1 Изображение 2 Изображение 3
Изображение 4 Изображение 5 Изображение 6

Код JavaScript (вставлять между тегами <head> и </head>):

<script type="text/javascript">
  function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
  }
</script>

Код HTML (вставлять между тегами <body> и </body>):

<div>
  <p style = 'text-align: center;'>
    <img id = 'bigimg' src = 'gallery1.jpg' height = '150' alt = 'Главное изображение' />
  </p>
  <table style = 'margin: 0 auto;' border = '1'>
    <tr>
      <td>
        <img src = 'gallery1.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 1' />
      </td>
      <td>
        <img src = 'gallery2.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 2' />
      </td>
      <td>
        <img src = 'gallery3.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 3' />
      </td>
    </tr>
    <tr>
      <td>
        <img src = 'gallery4.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 4' />
      </td>
      <td>
        <img src = 'gallery5.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 5' />
      </td>
      <td>
        <img src = 'gallery6.jpg' width = '100' onclick = 'setBigImage(this)' alt = 'Изображение 6' />
      </td>
    </tr>
  </table>
</div>

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Natalymath Natalymath 11.06.2011 16:25:56

Спасибо! Уже применила на практике, опять-таки несколько изменив код (по щелчку в заданном месте появляются другие изображения)

Ответить

shaen8032002 shaen8032002 06.04.2013 00:04:22

Добрый день , а не подскажете как вы реализовали другие превьюшки к картинкам ? не особо разбираюсь в коде , по тому прошу помощи

Ответить

ajushki ajushki 21.07.2011 02:45:27

Спасибо! А как можно сделать кнопки или ссылки "вперед", "назад" по бокам от головного изображения?

Ответить

Admin Admin 21.07.2011 02:54:39

http://myrusakov.ru/imagerotatorbutton.html - внимательно изучите этот код. Тогда поймёте, как сделать.

Ответить

ajushki ajushki 22.07.2011 01:22:59

Огромное спасибо! Получилось!!! :) (Пишу контрольную по java-script`ам, сама блондинка, спросить не у кого...Еще раз спасибо! Осталось придумать как сделать рамку на картинке, большой вариант которой показан сверху :) )

Ответить

ajushki ajushki 25.07.2011 02:30:18

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

Ответить

Admin Admin 25.07.2011 03:59:53

Выделить цветной рамкой можно с помощью CSS, добавив свойство "border: 1px solid #ffff00;". И это свойство добавлять через JavaScript примерно так: this.style.border = "1px solid #ffff00";

Ответить

annata annata 06.07.2012 00:41:18

Уважаемый Михаил! Спасибо большое за ваши уроки. Не могли бы Вы подсказать, как сделать так, чтобы вместе с большой фотографией под ней появлялась еще и подпись (информация об изображении)?

Ответить

Admin Admin 06.07.2012 00:49:57

Не так это просто. Надо добавить тег <p> под большим изображением, куда подставлять текст (через свойство innerHTML) в зависимости от выбранного изображения. Этот текст можно передавать в качестве параметра в функции setBigImage(). Если знаете хоть чуть-чуть JavaScript, то реализуете это без проблем, если нет, то даже не пытайтесь, а изучайте для начала основы.

Ответить

annata annata 10.08.2012 15:46:47

Спасибо!

Ответить

lev_100rus lev_100rus 11.07.2012 19:47:36

Михаил, подскажите пожалуйста как сделать анимационную галерею как на этом сайте http://tuscaroratackle.com/

Ответить

Admin Admin 11.07.2012 21:37:27

Если знаете JavaScript, то сможете создать. Если не знаете, то рекомендую найти плагин JQuery, их достаточно много для этих целей.

Ответить

radeonx801 radeonx801 03.09.2012 18:00:56

Доброго времени суток. Не подскажете, почему, при добавлении скрипта на сайт, картинки не отображаются, хотя путь прописан верно? Возможно они как то не так выгружаются?

Ответить

Admin Admin 03.09.2012 22:47:55

Расширение файлов не соответствует, например. Или если Вы его меняли, то получилось что-нибудь вроде .png.jpg

Ответить

radeonx801 radeonx801 04.09.2012 10:46:12

Нет, не в этом дело, они все .jpg Всё равно спасибо, далее наверно сама разберусь =) Просто интересно получается. На одном компьютере нормально работает и открывает, на другом - красные крестики вместо фото )

Ответить

greg77 greg77 04.12.2012 10:28:33

Уважаемая Анна, здесь я узнал, что Вас интересовал тот же вопрос что и меня. Если Вы сумели реализовать эту задачу, не могли бы ли Вы поделиться со мной Вашим скриптом? Мой мейл: gregarben@mail.ru Передо мной стоит следующая задача: за основу я использовал несколько переделанный для своей странички вышеописанный скрипт, но в нем, к сожалению, не прописано как ввести надписи описывающие каждая свою картинку. Код: alt = 'Изображение 1' - не то что нужно, т.к. текст в данном случае появляется только при наведении курсора на изображение, а нужно, чтоб при каждом клике, текст описания, относящийся даной картинке появлялся под или рядом только с увеличенным вариантом данной картинки (при этом, в моем варианте рядом с малыми картинками в галерее, надписей быть не должно). Буду очень благодарен за Вашу помощь в решении данного вопроса! И, конечно, мы были бы оба (уверен - и не только мы) благодарны Михаилу если бы он выложил необходимые изменения в скрипте для решения данного вопроса, но он, к сожалению, уже высказал свое мнение по данному вопросу..

Ответить

Pinzet Pinzet 31.05.2014 22:22:34

Я кажется решил эту проблему, обращайтесь на roma_tip@mail.ru

Ответить

ilyadenisovid ilyadenisovid 16.10.2013 07:22:28

Михаил, а что сделать, если нужно при нажатии на маленькую картинку, чтобы текст в <p>, который находится под большим изображением, менялся. Пробую так, н оне выходит - function setBigImage(foto) { document.getElementById("bigimg").src = foto.src; document.getElementByID("text_photo").innerHTML = "новый текст"; }

Ответить

Admin Admin 16.10.2013 11:46:32

getElementById, а не getElementByID.

Ответить

Pinzet Pinzet 31.05.2014 22:19:40

Спасибо за скрипт, вроде во всем разобрался, но возникла следующая проблема. Если я хочу вставить несколько галерей на одной странице, то вторая галерея не работает, изображения по клику выводятся в первой галерее.Как можно это исправить?

Ответить

Dima12345 Dima12345 03.12.2014 16:48:07

Можно и без скрипта) <table class="class" border="0" cellspacing="0" cellpadding="4" width="20" bgcolor="#ffffff" align="center" height="70" valign="top"> <tbody> <tr> <td valign="top" width="384" align="center"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> <tr> <td colspan="4"><img style="border-bottom: #ffffff 0px solid; border-left: #ffffff 0px solid; border-top: #ffffff 0px solid; cursor: crosshair; border-right: #ffffff 0px solid" name="bigtitle" alt="" width="384" height="384" src="IMAGES/384x384_01.jpg" /></td> </tr> <tr> <td><img style="border-bottom: #ffffff 4px solid; border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; cursor: crosshair; border-right: #ffffff 1px solid" alt="" width="96" height="96" onMouseOver="bigtitle.src='IMAGES/384x384_01.jpg'" src="IMAGES/96x96_01.jpg" /></td> <td><img style="border-bottom: #ffffff 4px solid; border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; cursor: crosshair; border-right: #ffffff 1px solid" alt="" width="96" height="96" onMouseOver="bigtitle.src='IMAGES/384x384_02.jpg'" src="IMAGES/96x96_02.jpg" /></td> <td><img style="border-bottom: #ffffff 4px solid; border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; cursor: crosshair; border-right: #ffffff 1px solid" alt="" width="96" height="96" onMouseOver="bigtitle.src='IMAGES/384x384_03.jpg'" src="IMAGES/96x96_03.jpg" /></td> <td><img style="border-bottom: #ffffff 4px solid; border-left: #ffffff 1px solid; border-top: #ffffff 1px solid; cursor: crosshair; border-right: #ffffff 1px solid" alt="" width="96" height="96" onMouseOver="bigtitle.src='IMAGES/384x384_04.jpg'" src="IMAGES/96x96_04.jpg" /></td> </tr> </tbody> </table> </td> </tr> </tbody> </table> Вот что у меня получилось http://www.pxpress.ru/servise/kubariki/kubariki-kont

Ответить

Dima12345 Dima12345 03.12.2014 16:57:34

Только не забудьте пихнуть фотки в папку IMAGES

Ответить

igorfelix igorfelix 22.03.2015 11:58:20

помещаю html в обертку <div class="modal-left g-hidden">код галереи </div> где g-hidden - скрывает контент. тоесть делаю галерею в окошке типа fancybox, и вот она не работает, убираю класс g-hidden, галерея работает но уже не в окошке

Ответить

york york 05.10.2015 11:24:02

Уважаемый Михаил мои танцы с бубном не увеньчались успехом а очень нужно, если Вам не будет трудно, могли-бы подсказать, нужно сделать подсвечивание миниатюры как здесь: Выделить цветной рамкой можно с помощью CSS, добавив свойство "border: 1px solid #ffff00;". И это свойство добавлять через JavaScript примерно так: this.style.border = "1px solid #ffff00";, только у меня ну ничего не получаеться (в коде сразу можно?)заранее спасибо.

Ответить

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