Как сделать галерею для сайта на javascript (простая) — код и демо пример.

Пример галереи на javascript

Приветствую вас – дорогой читатель! В этой статье я расскажу и приведу готовый рабочий код простой галереи для сайта!

Как и в статьях о счастливом билете и тесте на javascript, в конце статьи будет пример работы данной галереи.

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

Особенности галереи

Первое: изображения можно “перещелкивать” кликами мыши на соответствующие кнопки (Back и Next).

Второе: Картинки можно перелистывать на стрелочки.

Третье: Стрелочки появляются только при наведении на изображение.

Четвертое: Если мы “Дошли” до последней в галерее картинки, то стрелочка – “Далее” исчезает, тоже самое и со стрелкой – “Назад”.

Пятое: Для изменения галереи (добавление новых картинок либо наоборот – извлечение ненужных) достаточно добавить в массив новый элемент – ссылку на изображение.

JavaScript код галереи

Давайте рассмотрим и разберемся в коде..


imageArray – массив, в котором содержаться ссылки на изображения. Чтобы добавить, убрать, изменить порядок и так далее и тому подобное, достаточно изменить этот массив и все! Больше менять ничего не требуется.

number – переменная, которая отвечает за номер текущей картинки.

image(num) – данная функция принимает числовой параметр, и отвечает за перелистывание картинок (влево, вправо), то есть:

image(1) – показать следующую картинку за счет инкрементирования (увеличения на единицу) переменной number

Если передать любой другой параметр, отличный от 1, то покажется предыдущая картинка.

btn_show – функция, которая показывает стрелочки при наведении на изображения – событие onMouseOver.

btn_noshow – это функция прекращает показ картинок и вызывается событием onMouseOut, когда мы убираем мышь из зоны картинок.

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

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

Пример работы галереи

Вот так выглядит галерея в работе..

Demo галерея

Скачать пример

На этом все, желаю удачи и всего наилучшего!

Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.

Как сделать галерею для сайта на javascript (простая) — код и демо пример.: 8 комментариев

  1. Аксинья

    Здравствуйте!Очень понравилась ваша задумка, но, вставив свои изображения с ноута, картинки не отображаются 🙁 Помогите пожалуйста 🙁 Студентка, 18 лет

    1. Виталий Admin

      Здравствуйте! А в чем проблема, картинки просто не появляются или что? Опишите подробнее или даже приведите код.

  2. Toxa

    У меня тоже самое указав картинки в массиве “img src=images/название картинки” код ваш полностью я навичек не ругайте сильно)))

    1. Виталий Admin

      Добрый день! Нужно указывать Абсолютный путь к картинке. В вашем случае в корне сайта должна быть папка – “images”, а в ней уже картинки с нужными названиями.

  3. Александр

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

    1. Виталий Admin

      Здравствуйте, опишите подробнее, что нужно сделать, как я понял: имеется картинка, её можно увеличить, например, в 1.5 раза, в 2 раза и т.д.

    1. Виталий Admin

      Пожалуйста

Обсуждение закрыто.