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

Автор темы: jikaka
ID темы: 1308
Информация:
Тема содержит 2 сообщения, была просмотрена 6019 раз.  Имеются прикрепленные файлы.
Просмотр темы
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.031 секунд, используя 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.030 секунд, используя 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.031 секунд, используя 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.041 секунд, используя 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.003 секунд, используя 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кБ / 307 Загрузки]

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

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

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
Как перейти с http на https  →  Вопросы новичков 17 / 3138 07.05.2017 13:29
Как вы платите налоги с интернет дохода в РФ  →  Флуд 2 / 335 03.05.2017 17:20
comments_include.php как скрыть ссылки в комментариях (не обрабатывать BB-код url)  →  Установка и настройка системы 0 / 268 03.05.2017 14:12
Как загрузить много фото в фотоальбом?  →  Вопросы новичков 2 / 751 04.01.2017 08:29
Как находить одинаковые (дубли) страниц среди напарсеного?  →  Пожелания и предложения 3 / 1467 24.11.2016 12:16
как задать класс textarea при включенном TinyMCE?  →  Темы оформления 7 версии 5 / 2701 14.11.2016 15:05
Как сделать научный сайт наиболее понятным для неспециалистов?  →  Пожелания и предложения 1 / 1091 12.10.2016 14:51
Как назначить модератора на форуме (не админа)?  →  Вопросы новичков 3 / 2081 08.10.2016 07:32
Как лучше всего вставить jcarousel в тему  →  Вопросы новичков 9 / 5846 08.09.2016 19:18
Как сделать из PHP-Fusion-7.01 высконагруженый новостник?  →  Пожелания и предложения 14 / 14040 18.05.2016 21:17
Топ 5 пользователей форума
Alex Alex (1,116)   Zaxap Zaxap (1,074)   Vova Vova (875)   Pisatel Pisatel (670)   util util (665)