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

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

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

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

Перейти на форум:
Похожие темы
Темы Форум Ответов / Просмотров Последние сообщения
Если есть ошибка в теме или панели PHP-Fusion то мы часто видим белый экран  →  Пожелания и предложения 8 / 4868 11.08.2018 15:03
Если есть хелпы по PHP-Fusion скопируйте сюда или дайте ссылку  →  Вопросы новичков 1 / 1801 26.06.2018 16:09
Важно! 2 месяца бесплатно, при продлении или заказе dedicated сервера! Акция!  →  Хостинг 0 / 336 07.06.2018 04:37
Лендингоподобная главная - как заверстать адаптивно в CSS?  →  Пожелания и предложения 2 / 1061 24.04.2018 13:13
Как найти в БД для панели "похожие статьи, новости, темы"?  →  Пожелания и предложения 0 / 471 23.04.2018 17:29
Как защититься от спамеров? капча есть, но она легко вводится  →  Моды 11 / 7842 26.02.2018 19:52
сколько у вас Время загрузки и как оно зависит от хостинга?  →  Пожелания и предложения 9 / 2837 01.02.2018 06:27
Windows 10 или че нить другое? ))  →  Флуд 16 / 7636 13.12.2017 05:30
Как правильно сделать ЧПУ и переиндексировать сайт?  →  Моды 2 / 3591 22.11.2017 18:20
Посоветуйте JS-слайдер чтобы фотки JPG сменялись как в GIF-анимации  →  Плагины 2 / 1871 13.11.2017 21:01
Топ 5 пользователей форума
Alex Alex (1,196)   Zaxap Zaxap (1,078)   Vova Vova (877)   Pisatel Pisatel (678)   util util (666)