Пожалуй, самая красивая галерея, которую я только видел. Пример скрипта:
Приступим к установке: 1)Для начала в файловом менеджере создайте папку iload и загрузите в неё три файла из прикреплённого архива 2)Для начала во всех страницах фотоальбома, за исключением Вида материалов в самом низу пропишите скрипт:
Все установка завершена.Можете идти и проверять установленный скрипт и радоваться.
Если кому интерестно можно самому подкоректировать этот скрипт под себя. Вот полный перечень настроек с их описанием, которые вы можете найти и изменить в файле iLoad.js:
Code
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 /* Флаг, разрешающий закрыть галерею после просмотра последней фотографии в слайдшоу. Не играет роли если включена предыдущая настройка. */
С настройками разобрались и теперь рассмотрим настройки изображений. Вот один маленький пример:
Code
<img src="Ссылка на картинку" rel="iLoad" title="Имя">
Как видим, чтобы изображение обрабатывалось плагином iload, достаточно лишь приписать к коду rel="iLoad". Но данный rel="iLoad" сообщает, что картинка обособлена и не входит в галерею, потому не будет участвовать в слайдшоу. Для того, чтобы организовать группу картинок, необходимо изменить наш rel="iLoad" на rel="iLoad|Фото". В этом случае все изображения с rel="iLoad|Фото" будут участвовать в слайдшоу и входить в одну группу
Источник:http://apocalypse.ucoz.kz Все инфо. взята с выше написанного сайта,но я немножко по другому написал его,т.к. сам много путолся и решил как полегче написать.
Пожалуй, самая красивая галерея, которую я только видел. Пример скрипта:
Приступим к установке: 1)Для начала в файловом менеджере создайте папку iload и загрузите в неё три файла из прикреплённого архива 2)Для начала во всех страницах фотоальбома, за исключением Вида материалов в самом низу пропишите скрипт:
Все установка завершена.Можете идти и проверять установленный скрипт и радоваться.
Если кому интерестно можно самому подкоректировать этот скрипт под себя. Вот полный перечень настроек с их описанием, которые вы можете найти и изменить в файле iLoad.js:
Code
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 /* Флаг, разрешающий закрыть галерею после просмотра последней фотографии в слайдшоу. Не играет роли если включена предыдущая настройка. */
С настройками разобрались и теперь рассмотрим настройки изображений. Вот один маленький пример:
Code
<img src="Ссылка на картинку" rel="iLoad" title="Имя">
Как видим, чтобы изображение обрабатывалось плагином iload, достаточно лишь приписать к коду rel="iLoad". Но данный rel="iLoad" сообщает, что картинка обособлена и не входит в галерею, потому не будет участвовать в слайдшоу. Для того, чтобы организовать группу картинок, необходимо изменить наш rel="iLoad" на rel="iLoad|Фото". В этом случае все изображения с rel="iLoad|Фото" будут участвовать в слайдшоу и входить в одну группу
Источник:http://apocalypse.ucoz.kz Все инфо. взята с выше написанного сайта,но я немножко по другому написал его,т.к. сам много путолся и решил как полегче написать.
