Главная » 2011 » Ноябрь » 1 » Замечательная галерея iLoad 3 (Javascript)
01.11.2011, 15:57

Замечательная галерея iLoad 3





ДЕМО МАТЕРИАЛА

Для начала в файловом менеджере создайте папку iload и загрузите в неё три файла из прикреплённого архива

Далее на страницах, где будет использоваться плагин, необходимо вставить в самый низ сайта аж после /body следующий код:
Code
<script type='text/javascript' src='/iload/iLoad.js'></script>

Вот полный перечень настроек с их описанием, которые вы можете найти и изменить в файле 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|Фото" будут участвовать в слайдшоу и входить в одну группу

Теперь, пожалуй, покажу, как применить плагин для модуля Фотоальбомы системы uCoz:

Для начала во всех страницах фотоальбома, за исключением Вида материалов в самом низу пропишите скрипт:
Code
<script type='text/javascript' src='/iload/iLoad.js'></script>

Всё, подготовка завершена. Теперь бегите в Вид материалов, находите там:
Code
<a href="$PHOTO_LIGHTBOX_URL$" title="Просмотры: $REVIEWS$ | Размеры: $PHOTO_SIZE$, $PHOTO_WEIGHT$Kb">$PHOTO$</a>

На:
Code
<?if($FULL_PHOTO_DIRECT_URL$)?><a href="$FULL_PHOTO_DIRECT_URL$" alt="$PHOTO_NAME$" rel="iLoad|$CAT_NAME$">$PHOTO$</a><?else?>$PHOTO$<?endif?>

Всё. Как видим, в слайдшоу будут участвовать все фотографии каждого из разделов.
Материал взят с сайта infoscript.ru
Теги: Скачать Замечательная галерея iLoad 3
Скачать "Замечательная галерея iLoad 3"
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: apo-ucoz.com
Категория: JavaScript's | Просмотров: 2487 | Добавил: manikom-auto | Рейтинг: 4.0/1 |
Теги: Замечательная, iLoad, ГАЛЕРЕЯ
Пока комментариев нет. Ты можешь быть первым!
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]