Для організації slimbox ефекту потрібна бібліотека mootools.js і js slimbox-а. mootools.js швидше за все вже підключений, якщо немає то:
Додаємо slimbox код і ccs для нього:
C допомогою коду Joomla можна додати так:
Другий параметр - шлях до файлу.
В HTML коді slimbox ефект організовується за допомогою посилання на зображення. Усередині посилання можна розмістити ескіз цього зображення.
Ключове слово тут:
Сам slimbox.js виглядає так:
Замість можна вставити свої настройки, наприклад:
Можливі такі настройки:
- loop. логічний; якщо true навігація буде по колу. За замовчуванням false
- overlayOpacity. Прозорість Колір можна поміняти в CSS файлі. За замовчуванням 0.8.
- overlayFadeDuration. Час прояви і загасання зображення в мілісекундах. Задайте 0 щоб вимкнути ефект анімації. За замовчуванням 400.
- resizeDuration. Час розгортання в мілісекундах. 0 щоб вимкнути ефект. За замовчуванням 400.
- resizeTransition. Задає ефект зміни розміру зображення За замовчуванням для Mootools sineInOut. Можна задати своє значени, наприклад, Fx.Transitions.Elastic.easeOut.
- initialWidth. Ширина в пікселях. Default is 250.
- initialHeight. Висота в пікселях. Default is 250.
- imageFadeDuration. Час загасання зображення. 0 - зображення з'являється відразу. Default is 400.
- captionAnimationDuration. Час для анімації заголовка. 0 - з'являється відразу. Default is 400.
- counterText. Текст, дозволяє налаштувати, перевести або відключити кількість зображень. Щоб відключити - false або "". Default is "Image of".
- closeKeys. Клавіші навігації для закриття key codes. Default is [27, 88, 67]. Esc (27), "x" (88) and "c" (67).
- previousKeys. Клавіші для переходу до попереднього зображення key codes. Default is [37, 80]. Left arrow (37) and "p" (80).
- nextKeys. Клавіші для переходу до наступного зображення key codes. Default is [39, 78]. Right arrow (39) and "n" (78).