Пожалуй, самя красивая галерея, которую я только видел. Конечно же, я сразу адаптировал её под свой фотоальбом и пока что демо скрипта можно посмотреть ЗДЕСЬ и ЗДЕСЬ Приступим к установке: Для начала в файловом менеджере создайте папку iload и загрузите в неё три файла из прикреплённого архива Далее на страницах, где будет использоваться плагин, необходимо вставить в самый низ сайта аж после /body следующий код: <script type='text/javascript' src='/iload/iLoad.js'></script> Вот полный перечень настроек с их описанием, которые вы можете найти и изменить в файле iLoad.js: L.fontCss='font:11px Tahoma,Arial,Helvetica,sans-serif;color:#aaa;' /* Эта настройка содержит css код, применяемый ко всей панели с текстом и информацией о фотографии. Если вы не уверены, что знаете, как правильно изменять его - оставьте всё по умолчанию */ L.imageDescCss='display:block;' /* Аналогичная настройка с кодом для текста описания изображения */ L.imageNameCss='display:block;font-weight:700;color:#999;' /* Аналогичная настройка с кодом для имени изображения */ L.imageSetCss='display:block;' /* Настройка с кодом для текста с информацией о группе изображения */ L.imageInfoCss='display:block;' /* Настройка с кодом для текста с информацией о файле */ L.zIndex=9999 /* z-index слоя с тенью, остальные слои рассчитываются относительно него */ L.path="http://studioad.ru/iload/" /* ВНИМАНИЕ!!! Это обязательная настройка! Здесь необходимо указать путь к папке с файлами iLoad на вашем сайте. Путь должен заканчиваться слэшем */ L.splitSign="::" /* Знак, разделяющий описание и название фотографий в тегах title и в функциях */ L.bigButtonsDisabledOpacity=30 /* Прозрачность отключенных кнопок на большой панели, целое число от 0 до 100 */ L.bigButtonsPassiveOpacity=100 /* Прозрачность кнопок на большой панели */ L.bigButtonsActiveOpacity=70 /* Прозрачность кнопок на большой панели при наведении мышки */ L.minButtonsPassiveOpacity=50 /* Прозрачность кнопок на малой панели */ L.minButtonsActiveOpacity=100 /* Прозрачность кнопок на малой панели при наведении мышки */ L.overlayAppearTime=200 /* Время появления тени в миллисекундах, целое положительное число начиная с нуля*/ L.overlayDisappearTime=200 /* Время исчезновения тени */ L.containerAppearTime=300 /* Время появления вьюпорта */ L.containerDisappearTime=300 /* Время исчезновения вьюпорта */ L.containerResizeTime=300 /* Время изменения размеров вьюпорта */ L.contentAppearTime=350 /* Время появления контента */ L.contentDisappearTime=200 /* Время исчезновения контента*/ L.loaderAppearTime=200 /* Время появления анимации загрузки */ L.loaderDisappearTime=200 /* Время исчезновения анимации загрузки */ L.containerCenterTime=300 /* Время центровки вьюпорта и подстройки под размеры окна */ L.panelAppearTime=300 /* Время появления большой панели */ L.panelDisappearTime=300 /* Время исчезновения большой панели */ L.arrowsTime=230 /* Время анимации стрелок */ L.paddingFromScreenEdge=35 /* отступ от краев экрана при подстройке под его размеры */ L.contentPadding=0 /* Отступ контента в вьюпорте от краев сглаженной зоны */ L.cornersSize=18 /* Радиус сглаженного угла. В сумме с предыдущей настройкой образует отступ контента от края вьюпорта */ L.overlayOpacity=95 /* Прозрачность тени */ L.overlayBackground="#000000" /* Цвет тени, значение цвета в полном HEX формате */ L.containerColor="#ffffff" /* Цвет вьюпорта */ L.panelType=1 /* Тип используемой панели. Целое число от 0 до 2: 0 - панели не отображаются вообще 1 - малая панель 2 - большая панель */ L.hidePanelWhenScale=true /* Флаг, разрешающий скрывать большую панель при переключении фотографий, значение булевного типа: true - да false - нет */ L.forceCloseButton=true /* Флаг, заставляющий отображаться кнопку закрытия изображения на малой панели даже в том случае, если у фотографии нет ни имени, ни описания, ни информации о файле и фотография не состоит в сете. Если настройку отключить, подобные фотографии можно будет закрыть только щелчком по тени или клавишей Esc (опционально)*/ L.arrows=true /* Флаг, разрешающий отображать стрелочки при наведении мыши на левую и правую части изображения */ L.imageNav=true /* Флаг, разрещающий переход назад и вперед в сете при щелчке по левой и правой части изображения */ L.showSize=true /* Флаг, разрешающий показывать кнопки открытия других размерных модов изображения в том случае если изображение превышает размеры экрана */ L.forceFullSize=false /* Флаг, заставляющий все изображения всегда открываться в оригинальном размере */ L.keyboard=true /* Флаг, разрешающий управление с клавиатуры */ L.dragAndDrop=true /* Флаг, разрешающий перетаскивание вьюпорта при зажатой левой клавише мыши на изображении */ L.preloadNeighbours=true /* Флаг, разрешающий предзагрузку соседних изображений в сете, для удобства рекоммендую оставить без изменений */ L.info=true /* Флаг, разрешающий отображение информации о файле */ L.imageSetText=['[N] из [T]',' в группе "[S]"'] /* Шаблон по которому строится текст с информацией о позиции текущей фотографии в сете и названии сета. Специальные символы: [N] - номер текущей фотографии [T] - общее количество фотографий в сете [S] - название сета */ L.fileInfoText="Файл формата [F] размером [W]х[H] пикселей" /* Шаблон по которому строится текст с информацией файле. Специальные символы: [F] - формат файла [W] - ширина изображения в пикселях [H] - высота изображения в пикселях */ L.tips=['Предыдущее','Следующее','Закрыть','Слайдшоу','Пауза','Оригинал','Уместить в окне'] /* Текст всплывающих подсказок к кнопкам панелей */ L.slideshowTime=3000 /* Время в миллисекундах, которое отводится на просмотр фотографии в слайдшоу без учета времени на анимацию и загрузку фотографии */ L.slideshowRound=true /* Флаг, разрешающий показывать фотографии в слайдшоу по кругу: после последней фотографии снова покажется первая */ L.slideshowClose=false /* Флаг, разрешающий закрыть галерею после просмотра последней фотографии в слайдшоу. Не играет роли если включена предыдущая настройка. */ Всё, с настройками разобрались и теперь рассмотрим настройки изображений. Вот один маленький пример: <img src="Ссылка на картинку" rel="iLoad" title="Имя"> Как видим, чтобы изображение обрабатывалось плагином iload, достаточно лишь приписать к коду rel="iLoad". Но данный rel="iLoad" сообщает, что картинка обособлена и не входит в галерею, потому не будет участвовать в слайдшоу. Для того, чтобы организовать группу картинок, необходимо изменить наш rel="iLoad" на rel="iLoad|Фото". В этом случае все изображения с rel="iLoad|Фото" будут участвовать в слайдшоу и входить в одну группу Теперь, пожалуй, покажу, как применить плагин для модуля Фотоальбомы системы uCoz: Для начала во всех страницах фотоальбома, за исключением Вида материалов в самом низу пропишите скрипт: <script type='text/javascript' src='/iload/iLoad.js'></script> Всё, подготовка завершена. Теперь бегите в Вид материалов, находите там: <a href="$PHOTO_LIGHTBOX_URL$" title="Просмотры: $REVIEWS$ | Размеры: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">$PHOTO$</a> На: <a href="$FULL_PHOTO_DIRECT_URL$" alt="$PHOTO_NAME$" rel="iLoad|$CAT_NAME$">$PHOTO$</a>$PHOTO$ Всё. Как видим, в слайдшоу будут участвовать все фотографии каждого из разделов.

Правообладателям

Перед тем как скачать "Замечательная галерея iLoad 3 на Jquery JavaScript", проверьте ВСЕ ссылки на работоспособность. На момент публикации "Замечательная галерея iLoad 3 на Jquery JavaScript", все ссылки были в рабочем состоянии