Скрипт прокрутки изображений в мини-галерее на JavaScript

dynamicdrive logoКак-то мне понадобилось поместить на сайт небольшую динамическую галерею из небольших картинок.
Картинки в ней должны прокручиваться в зависимости от положения курсора над ними, представляя из себя импровизированный скроллер изображений. Результатом поиска стала javascript-библиотека функций описанная в заметке.

Библиотека называется «CMotion Image Gallery»
Официальная страница скрипта: http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm
Там вы можете найти описание внедрения (на английском) и рабочий пример.

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

Особенности:

  • Легкое опциональное центрирование начала галереи
  • Ширина в процентах может быть использована для подгонки ширины галереи под ширину экрана

Инструкция по внедрению галереи на страницу сайта

1. Поместить следующий код между тегами <head> вашей страницы

<link rel="stylesheet" type="text/css" href="gallerystyle.css" />
<!-- Условие для очень старого Internet Explorer -->
<!--[if gte IE 5.5]>
<style type="text/css">
#motioncontainer {
width:expression(Math.min(this.offsetWidth, maxwidth)+'px');
}
</style>
<![endif]-->
<!-- End Conditional Style -->
<script type="text/javascript" src="motiongallery.js">
</script>

Скрипт выше ссылается на внешние файлы .js и .css. Их надо скачать и закинуть в папку со страницей (скачивать через пункт «Сохранить как» контекстного меню):
1) motiongallery.js
2) gallerystyle.css
2. Поместить следующий html-код в <body> секцию вашей страницы:

<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynamicbook1.gif" border=1></a></nobr>
</div>
</div>

Не удаляйте из этого кода теги <nobr> и два внеших <div>-a. Для настройки размеров галереи измените значения CSS-атрибутов width и height первого «дива».

Также в коде приведены примеры различных событий происходящих при клике на картинки, например переход на URL, появление всплывающего окна с увеличенной картинкой, или ничего если ссылка убрана. Для примера в этот скрипт включена простая функция «enlargeimage()» которая вызывает всплывающее окно с адресом переданным как параметр.

Комментариев: 33

  • 01.07.2011 Катя:

    Спасибо за статью. Совместила со скриптом, кот. предложил arris, при прокрутке все отлично, но если мышку остановить на 1-ой картинке и прокрутка останавливается, под галереей появляется белый прямоугольник. В чем может быть причина?

    • 02.07.2011 Кирилл:

      Привет, Катя. Не видя сам результат могу предположить лишь, что этот прямоугольник как-то связан с показом конца галереи, в скрипте motiongallery.js это:

      //5) Set message to show at end of gallery. Enter "" to disable message. var endofgallerymsg='<span style="font-size: 11px;">End of Gallery</span>';

  • 08.08.2011 Александр:

    Спасибо за статью. Хотелось бы узнать, есть ли такой вариант, чтобы прокрутка происходила самостоятельно?

  • 17.10.2011 Олег:

    Спасибо за скрипт!

    Не могу дробится организации подписи под картинками

    • 18.10.2011 Кирилл:

      Можно попробовать вставить под тег img тег с текстом и проверить сработает ли скрипт с ним, или можно поискать подобный скрипт на том же сайте, но уже с подписями.

  • 20.12.2011 Алина:

    Всё отлично работает, просто здорово! Спасибо большое!

    Есть один момент — пока не знаю как сделать — чтобы увеличивающиеся картинки не теряли в качестве. Подскажите пожалуйста;)

  • 11.01.2012 Анна:

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

  • 30.01.2012 romapad:

    А можно как-то это скрипт допилить, чтобы все-таки была опция автопрокрутки?

  • 19.11.2012 Денис:

    Всем привет, а как можно использовать несколько галерей на страницы с помощью этого скрипта?

    • 28.03.2016 Ирина:

      Присоединяюсь к вопросу. Как сделать две галереи на одной странице?


Добавление комментария:

 css.php