Как-то мне понадобилось поместить на сайт небольшую динамическую галерею из небольших картинок.
Картинки в ней должны прокручиваться в зависимости от положения курсора над ними, представляя из себя импровизированный скроллер изображений. Результатом поиска стала 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)
2)
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()» которая вызывает всплывающее окно с адресом переданным как параметр.
