Забыли пароль?
Запросите новый здесь.

Автор темы: jikaka
ID темы: 1308
Информация:
Тема содержит 2 сообщения, была просмотрена 13107 раз.  Имеются прикрепленные файлы.
Просмотр темы
PHP-Fusion Russia » Информация » FAQ
 Распечатать тему
Как мне использовать colorbox, например, в новостях или статьях?
jikaka
Часто встает вопрос использования стандартного скрипта увеличения фото не только в галереи,
но и например, для любых изображений в новостях или статьях.

Как вариант можно прикрутить какой-нибудь сторонний и удобный скрипт, например, fancybox,
но по сути это неразумно, т.к. лучше использовать стандартные библиотеки, которые уже имеются.

Итак, чтобы подключить colorbox для ваших изображений, необходимо сделать следующие простые вещи:

1. открываем, например, файл news.php
2. в начале файла, например, после строки:
Загрузить источник  GeSHi: PHP
  1. add_to_title($locale['global_200'].$locale['global_077']);
Добавлено за 0.041 секунд, используя GeSHi 1.0.8.10

вставляем следующий код:
Загрузить источник  GeSHi: PHP
  1. add_to_head("<link rel='stylesheet' href='".INCLUDES."jquery/colorbox/colorbox.css' type='text/css' media='screen' />");
  2. add_to_head("<script type='text/javascript' src='".INCLUDES."jquery/colorbox/jquery.colorbox.js'></script>");
  3. add_to_head("<script type='text/javascript'>\n
  4. /* <![CDATA[ */\n
  5. jQuery(document).ready(function(){
  6. jQuery('a.tozoom').colorbox();
  7. });\n
  8. /* ]]>*/\n
  9. </script>\n");
Добавлено за 0.033 секунд, используя GeSHi 1.0.8.10

3. сохраняем файл, заменяем его на хосте
4. для изображения в новости делаем ссылку на само изображение и дополняем ссылку классом от colorbox'а, например:
Загрузить источник  GeSHi: PHP
  1. <a href='images/php-fusion-logo.png' class='tozoom' target='_blank'><img src='images/php-fusion-logo.png' style='margin:5px' alt='' align='left' /></a>
Добавлено за 0.018 секунд, используя GeSHi 1.0.8.10

где class='tozoom' - класс от скрипта

и так для всех картинок в вашей новости
x2 x3
 
Web
Pisatel
Добавление fancybox для изображений в новостях, статьях и т.д.

В файл news.php и articles.php в самый верх, после всех подключений, добавляем
Загрузить источник  GeSHi: PHP
  1. //images
  2. add_to_head("<link rel='stylesheet' href='".INCLUDES."fancybox/source/jquery.fancybox.css' type='text/css' media='screen' />");
  3. add_to_head("<script type='text/javascript' src='".INCLUDES."fancybox/source/jquery.fancybox.pack.js'></script>");
  4. add_to_head("<script type='text/javascript'>
  5. $(document).ready(function(){
  6. $('.fancybox').fancybox();
  7. });
  8. </script>\n");
  9.  
Добавлено за 0.022 секунд, используя GeSHi 1.0.8.10

Из архива файлы в includes, и все готово. Потом ссылке на изображение просто присваиваем класс fancybox, если нужно листание- ставим rel='group'. Если хотим, чтобы внизу изображения было описание, в теге title прописываем это описание. Пример готовой ссылки на изображение:
Загрузить источник  GeSHi: HTML
  1. <a class='fancybox' rel ='group' title='JQuery FancyBox: здесь пишем то, что будет выведено как описание к изображению' href='/images/articles/f5.jpg'><img style='margin:5px;' src='/images/articles/f5.jpg' alt='FancyBox' width='100px'></a>
Добавлено за 0.002 секунд, используя GeSHi 1.0.8.10

Ну и вот еще параметры для более тонкой настройки 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 присоединено следующее:файл:
fancybox.zip [72.63кБ / 772 Загрузки]

Изменил(а) jikaka, 21.02.2013 06:20
x1 x1 x1
 
Web

Поделиться этой темой
Социальные закладки: Vkontakte Odnoklassniki Mail.ru Facebook Google Tweet This
URL:
BBcode:
HTML:

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
в PHP 7.4 нельзя вставлять пустое значение в `id` как раньше  →  Пожелания и предложения 4 / 1085 19.12.2023 03:32
нужны ли на сайте "Закладки" и "История посещений", как в браузере?  →  Пожелания и предложения 4 / 846 11.08.2023 15:56
Отзовик - самопис или на WP  →  Платные услуги 2 / 700 08.08.2023 08:12
Не работает colorbox  →  Ошибки, баги 7 / 1877 01.06.2022 18:03
Как сделать микроразметку на сайте?  →  PHP 1 / 3380 22.07.2021 06:39
Как вебмастеру сформулировали УТП для создания сайтов на PHP-Fusion?  →  Пожелания и предложения 1 / 7314 25.07.2020 03:46
SEO-оптимизация. дубли страниц в PHP-Fusion - где искать и как избавиться?  →  Ошибки, баги 0 / 5127 19.06.2020 17:06
Как вывести все данные из таблицы, за исключением администраторов  →  Плагины 3 / 5338 24.02.2020 15:59
Какой плагин PHP-Fusion уместно использовать для создания сайта КВИЗа?  →  Пожелания и предложения 1 / 3966 18.02.2020 15:14
Как перейти с http на https  →  Вопросы новичков 30 / 31876 24.10.2019 18:45
Топ 5 пользователей форума
Zaxap Zaxap (1,090)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)   SchreiBear SchreiBear (625)