Просмотр темы
Как мне использовать colorbox, например, в новостях или статьях?
|
|
jikaka |
Опубликовано 19.02.2013 20:08
|
Супер Администратор Разработчики Сообщений: 4849 Зарегистрирован: 26.07.2010 12:10 |
Часто встает вопрос использования стандартного скрипта увеличения фото не только в галереи, но и например, для любых изображений в новостях или статьях. Как вариант можно прикрутить какой-нибудь сторонний и удобный скрипт, например, fancybox, но по сути это неразумно, т.к. лучше использовать стандартные библиотеки, которые уже имеются. Итак, чтобы подключить colorbox для ваших изображений, необходимо сделать следующие простые вещи: 1. открываем, например, файл news.php 2. в начале файла, например, после строки:
вставляем следующий код:
3. сохраняем файл, заменяем его на хосте 4. для изображения в новости делаем ссылку на само изображение и дополняем ссылку классом от colorbox'а, например:
где class='tozoom' - класс от скрипта и так для всех картинок в вашей новости |
|
|
Pisatel |
Опубликовано 20.02.2013 04:23
|
Ветеран Сообщений: 678 Зарегистрирован: 08.02.2013 05:51 |
Добавление fancybox для изображений в новостях, статьях и т.д. В файл news.php и articles.php в самый верх, после всех подключений, добавляем
Из архива файлы в includes, и все готово. Потом ссылке на изображение просто присваиваем класс fancybox, если нужно листание- ставим rel='group'. Если хотим, чтобы внизу изображения было описание, в теге title прописываем это описание. Пример готовой ссылки на изображение:
Ну и вот еще параметры для более тонкой настройки fancybox: padding - Пространство между контейнером FancyBox и контентом. По умолчанию 10. margin - Пространство между областью просмотра и контейнером FancyBox, по умолчанию 20. opacity Если true, прозрачность контента меняется. По умолчанию false. modal - Если true, для 'overlayShow' присваивается значение 'true', а для 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' присваивается значение 'false'. По умолчанию false. cyclic - Если true, галерея будет циклической, позволяя использовать для нажатия кнопки next/back. По умолчанию false. scrolling - Передает значение для CSS свойства overflow для создания или скрытия полосы прокрутки. Может быть передано 'auto', 'yes', или 'no'. По умолчанию 'auto'. width - Ширина для контента типов 'iframe' и 'swf'. Также выставляет ширину для строчного контента, если 'autoDimensions' имеет значение 'false'. По умолчанию 560. height - Высота для контента типов 'iframe' и 'swf'. Также выставляет высоту для строчного контента, если 'autoDimensions' имеет значение 'false'. По умолчанию 340. autoScale - Если true, FancyBox масштабируется для заполнения области просмотра. По умолчанию true. autoDimensions - Для строчного и ajax контента, подгоняет размеры области просмотра к размеру элемента. Убедись, что у него заданы размеры, в противном случае это может привести к непредсказуемым результатам. По умолчанию true. centerOnScroll - Если true, FancyBox центрируется, когда страница прокручивается. По умолчанию false. hideOnContentClick - Включает/ выключает закрытие FancyBox по клику на основном контенте. По умолчанию false. overlayShow - Определяет, показывать ли фоновое затеменение вокруг FancyBox. По умолчанию true. overlayOpacity - Прозрачность фонового затемнения. 0-1. По умолчанию 0.3. overlayColor - Основной цвет фонового затемнения. По умолчанию '#666'. titleShow - Включает/ выключает отображение title. По умолчанию true. titlePosition - Позиционирование title. Может принимать значение 'outside', 'inside' или 'over'. По умолчанию 'outside'. titleFormat - Обратная функция для пользовательской настройки области title. Можно задать любой HTML - свой счетчик изображений, или даже пользовательскую навигацию. По умолчанию null. transitionIn, transitionOut - Тип переходов. Может быть установлен в 'elastic', 'fade' или 'none'. По умолчанию 'fade'. speedIn, speedOut - Скорость перехода fade и elastic, в милисекундах. По умолчанию 300. changeSpeed - Скорость изменения размеров при изменении элементов галереи в миллисекундах. По умолчанию 300. changeFade - Скорость проявления контента во время смены элементов галереи. По умолчанию 'fast'. easingIn, easingOut - Easing, используемый для эластичных анимаций. По умолчанию 'swing'. showCloseButton - Включает/ выключает показывание кноки закрытия. По умолчанию true. showNavArrows Включает/ выключает показывание стрелок навигации. По умолчанию true. enableEscapeButton - Включает/ выключает закрытие FancyBox по нажатию но кнопке Esc. По умолчанию true. onStart - Функция, вызываемая перед попыткой загрузить контент. По умолчанию null. onCancel Функция, вызываемая после отмены загрузки. По умолчанию null. onComplete - Функция, вызываемая один раз при отображении содержимого. По умолчанию null. onCleanup - Функция, вызываемая как раз перед закрытием. По умолчанию null. onClosed Функция, вызываемая один раз перед закрытием FancyBox. По умолчанию null
Pisatel присоединено следующее:файл:
Изменил(а) jikaka, 21.02.2013 06:20 |
|
Поделиться этой темой | |
Социальные закладки: | |
URL: | |
BBcode: | |
HTML: |
Перейти на форум: |