<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

Скрипт галереи + слайд-шоу на JavaScript

Скрипт галереи + слайд-шоу на JavaScript

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

Результат: Кликните по любой картинке из таблицы.

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

Изображение 1
Изображение 1a Изображение 1b Изображение 1c
Изображение 2
Изображение 2a Изображение 2b Изображение 2c
Изображение 3
Изображение 3a Изображение 3b Изображение 3c

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

<script language = "JavaScript">
  var timer = null;
  var delay = 2000;
  var ar_src = new Array();
  function setBigImageSlide(group) {
    var group = document.getElementById(group);
    var images = group.childNodes;
    var src = new Array();
    var k = 0;
    for (var i = 0; i < images.length; i++) {
      if (images[i] instanceof HTMLImageElement) {
        src[k] = images[i].src;
        k++;
      }
    }
    ar_src = src;
    if (timer != null) clearTimeout(timer);
    imagesSlide(0);
  }
  function imagesSlide(i) {
    var image = document.getElementById("bigimgslide");
    image.src = ar_src[i];
    i++;
    if (i == ar_src.length) i = 0;
    timer = setTimeout("imagesSlide(" + i + ")", delay);
  }
</script>

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

<div>
  <p style = 'text-align: center;'>
    <img id='bigimgslide' src='images/javascript/space_1.jpg' height='150' alt='Главное изображение' />
  </p>
  <table style = 'margin: 0 auto;' border = '1'>
    <tr>
      <td>
        <img src = 'images/javascript/space_1.jpg' width = '100' onclick = 'setBigImageSlide("space")' alt = 'Изображение 1' />
        <div id="space">
          <img src = 'images/javascript/space_1.jpg' width = '100' style="display: none;" alt = 'Изображение 1a' />
          <img src = 'images/javascript/space_2.jpg' width = '100' style="display: none;" alt = 'Изображение 1b' />
          <img src = 'images/javascript/space_3.jpg' width = '100' style="display: none;" alt = 'Изображение 1c' />
        </div>
      </td>
      <td>
        <img src='images/javascript/flower_1.jpg' width='100' onclick='setBigImageSlide("flowers")' alt='Изображение 2' />
        <div id="flowers">
          <img src='images/javascript/flower_1.jpg' width='100' style="display: none;" alt='Изображение 2a' />
          <img src='images/javascript/flower_2.jpg' width='100' style="display: none;" alt='Изображение 2b' />
          <img src='images/javascript/flower_3.jpg' width='100' style="display: none;" alt='Изображение 2c' />
        </div>
      </td>
      <td>
          <img src='images/javascript/animal_1.jpg' width='100' onclick='setBigImageSlide("animals")' alt='Изображение 3' />
        <div id="animals">
          <img src='images/javascript/animal_1.jpg' width='100' style="display: none;" alt='Изображение 3a' />
          <img src='images/javascript/animal_2.jpg' width='100' style="display: none;" alt='Изображение 3b' />
          <img src='images/javascript/animal_3.jpg' width='100' style="display: none;" alt='Изображение 3c' />
        </div>
      </td>
    </tr>
  </table>
</div>

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

№13 №13 14.11.2011 14:06:26

Здравствуйте, Михаил! Взяла этот скрипт, поменяла адрес картинок, и что-то у меня ничего не работает. Показывает галерею, и главную картинку, слайдов нет, и не работает функция перехода в галерее на другую картинку :( Подскажите что не так??

Ответить

Admin Admin 14.11.2011 14:11:32

Вы точно заменили только пути, быть может, Вы заменили весь тег <img>. Или может быть, случайно, где-то стёрли id. Здесь каждая строчка имеет огромное значение. А вообще возьмите этот скрипт, все картинки оставьте прежними и проверьте, чтобы она работал. Когда он заработает, начинайте потихоньку (не все сразу) заменять пути к картинкам.

Ответить

№13 №13 14.11.2011 23:01:43

Михаил, переписала все заново- не работает!

Ответить

Admin Admin 14.11.2011 23:03:12

Пришлите код на почту: myrusakov@gmail.com, всё должно работать, у меня же работает.

Ответить

sarcodin sarcodin 12.12.2011 14:47:34

Через JQuery можно сделать проще и покрасивее.

Ответить

Admin Admin 12.12.2011 16:31:07

Само JQuery - это уже не проще и некрасивее. Ради одного скрипта его глупо подключать, это слишком большая библиотека.

Ответить

sergeevna sergeevna 02.02.2012 16:14:30

Здравствуйте Михаил. Воспользовалась Вашим скриптом, но что то он у меня не работает. Подскажите пожалуйста, я меняю только пути к изображениям? Или здесь <img id='bigimgslide' src='images/javascript/space_1.jpg' height='150' alt='Главное изображение' Нужно что то поменять?

Ответить

Admin Admin 02.02.2012 16:18:05

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

Ответить

sergeevna sergeevna 02.02.2012 18:15:38

Изменять пути во второй части скрипта или в двух? И такой вопрос: я прописываю путь к изображениям которые находятся в папке images?

Ответить

Admin Admin 02.02.2012 18:17:17

Где они находятся, не знаю, это Вы должны знать. Пути надо везде менять, у каждого img.

Ответить

sergeevna sergeevna 02.02.2012 22:58:59

в двух частях кода?

Ответить

Admin Admin 02.02.2012 23:01:33

В HTML-коде.

Ответить

sergeevna sergeevna 02.02.2012 23:06:43

ясно.спасибо. А если у меня что-то не получится, можно Вас попросить помочь?

Ответить

Admin Admin 02.02.2012 23:09:02

Вы уже просите. Всё, что здесь нужно - это правильно прописать пути к изображениям, а также вставить в нужные места куски кода (в статье написано куда).

Ответить

sergeevna sergeevna 02.02.2012 23:40:17

Вы меня простите пожалуйста,но что-то я не то делаю наверно. Коды вставила куда Вы написали. Но ничего не отображается. Вот часть кода html: <div> <p style = 'text-align: center;'> <img id='bigimgslide' src='images/javascript/w/104.jpg' height='150' alt='Главное изображение' /> </p> <table style = 'margin: 0 auto;' border = '1'> <tr> <td> <img src = 'images/javascript/w/104.jpg' width = '100' onclick = 'setBigImageSlide("space")' alt = 'Изображение 1' /> <div id="space"> <img src = 'images/javascript/w/105.jpg' width = '100' style="display: none;" alt = 'Изображение 1a' /> <img src = 'images/javascript/w/106.jpg' width = '100' style="display: none;" alt = 'Изображение 1b' /> <img src = 'images/javascript/w/107.jpg' width = '100' style="display: none;" alt = 'Изображение 1c' /> </div> Подскажите пожалуйста, что не так?

Ответить

Admin Admin 02.02.2012 23:49:42

У Вас везде style="display: none;" - так быть не должно.

Ответить

sergeevna sergeevna 02.02.2012 23:53:35

Простите,а как правильно? Там то же нужно прописать путь?

Ответить

Admin Admin 03.02.2012 00:10:54

Там нужно, чтобы была группа изображений, первое изображение без display: none; и с onlick, а все остальные в данной группе с display: none; и без onclick.

Ответить

стас стас 26.02.2012 19:49:37

скрипт просто класс.но если вас не затруднит подскажите пожалуйста как его можно использовать не в одну полосу а в 2,3,4 и т.д.

Ответить

Admin Admin 26.02.2012 19:53:13

Тег <tr> новый создайте аналогичный тому, что уже имеется. Если с таблицами проблемы, то почитайте эту статью: http://myrusakov.ru/sozdanie-tablic-html.html

Ответить

стас стас 26.02.2012 20:01:17

михаил не посчитайте это за наглость но не смогли бы вы прислать на мой майл или на вашу страницу сам код т.к я только пытаюсь разбираться со скриптами но не все готовы помочь в изучении.

Ответить

Admin Admin 26.02.2012 21:12:38

Здесь учатся, а не получают готовые скрипты. Если Вам нужны не знания, а именно готовые скрипты, то Вы ошиблись адресом. Вам нужно в google с запросом "скрипты javascript". Если нужны знания, то подумайте, как можно решить данную задачу. Если на это потребуется месяц, то ничего страшного, главное - результат.

Ответить

стас стас 26.02.2012 21:25:38

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

Ответить

Admin Admin 26.02.2012 21:30:48

Вот и доработайте практику. Полностью рабочий скрипт, по аналогии добавьте ещё один <tr>, и тогда будет ещё одна строка.

Ответить

стас стас 26.02.2012 21:44:45

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

Ответить

Admin Admin 26.02.2012 21:48:59

Добавляйте ещё <tr>. Сколько <tr> добавите, столько строк и будет. С Вами бесполезно разговаривать, ввиду того, что Вы вообще не понимаете, о чём я говорю. Я пытаюсь Вам рассказать об интегралах, а Вы не знаете и таблицы умножения. Изучайте HTML, CSS, потом JavaScript. Прямо с нуля, по порядку.

Ответить

люба люба 05.03.2012 22:47:42

Михаил,подскажите пожалуйста а можно ли сделать так чтобы картинка не сразу менялась а с начало шло описание картинки.и так после каждой.

Ответить

Admin Admin 05.03.2012 22:59:06

Можно, но писать придётся не так уж и мало, поэтому если знаете JavaScript, то справитесь, если нет, то не получится.

Ответить

люба люба 05.03.2012 23:07:27

я только учусь.а вы можете как нибудь объяснить как это сделать.

Ответить

Admin Admin 05.03.2012 23:18:53

В данном скрипте уже всё понятно. Просто надо каждую вторую итерацию вместо картинки выводить текст. Есть группа картинок, добавьте туда группу текста. И эту группу полностью проигрывайте. В скрипте же надо получать не только все изображения внутри родительского, но и все параграфы (если текст находится в теге <p>). А дальше вывести текущий элемент. Вот и всё.

Ответить

люба люба 07.03.2012 21:57:29

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

Ответить

Admin Admin 07.03.2012 22:00:41

Значит, Вы неправильно указали путь к изображению.

Ответить

люба люба 07.03.2012 22:10:24

вы меня не правильно поняли я просто хотела уточнить так и должно быть или при отсутствии картинки должен писаться альтернативный текст конкретной картинки.

Ответить

Admin Admin 07.03.2012 22:13:40

Этот текст задаётся в атрибуте alt.

Ответить

люба люба 07.03.2012 22:20:14

это я поняла.просто я делаю фото альбом и не все фото внесла.а для удобства указала только альтернативные тексты.но вместо них мне пишет " главное изображение".

Ответить

Folayt Folayt 06.04.2014 17:29:47

Возможно вы не указали альтернативу миниатюрам.

Ответить

люба люба 22.03.2012 09:34:40

Михаил здравствуйте.скажите пожалуйста,а можно в вашем скрипте сделать кнопку пауза.

Ответить

Admin Admin 22.03.2012 10:24:25

Можно, но нужно знать JavaScript.

Ответить

Venik33 Venik33 14.05.2012 11:25:49

Здравствуйте. У меня выдает 2 ошибки: На этой странице произошла ошибка сценария Строка 15 Символ 7 Ошибка 'HTMLimageElement'-определение отсутствует Код 0 URL file:///F:/Hefs/Фото.htm и На этой странице произошла ошибка сценария Строка 11 Символ 5 Ошибка требуется объект Код 0 URL file:///F:/Hefs/Фото.htm Подскажите, в чем проблема, пожалуйста.

Ответить

Admin Admin 14.05.2012 13:38:48

Указывайте относительные пути, а не мало того, что абсолютные, да ещё и от windows. Хуже ничего не придумать.

Ответить

Venik33 Venik33 14.05.2012 14:16:04

Извините, но у меня везде указаны относительные пути, а то что я указал в комментарии это URL адрес файла.

Ответить

Admin Admin 14.05.2012 14:22:42

Скрипт работает? Попробуйте в других браузерах.

Ответить

Venik33 Venik33 14.05.2012 14:23:18

Заработал непонятным образом! -_- но нужно чтобы работал в InternetExplorer, а там вот эта ошибка. Можете что-нибудь подсказать?

Ответить

Admin Admin 14.05.2012 14:28:15

У меня всё прекрасно работает в IE9.

Ответить

Venik33 Venik33 14.05.2012 14:30:18

Проверил в GoogleChrom работает только с нажатия на первую картинку в таблице, с чем это может быть связано?

Ответить

Admin Admin 14.05.2012 14:36:23

Скрипт начинает работать после нажатия на любую картинку, вначале он стоит на месте.

Ответить

juliamish juliamish 08.07.2012 20:06:06

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

Ответить

Folayt Folayt 06.04.2014 17:44:46

Подскажите как задать фиксированный размер изображения. пробовал через heigh, не работает. Или это нужно делать через css?

Ответить

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