Cotonti / Open Source PHP Content Management FrameworkContent Management Framework

Наверное все русскоязычные пользователи которые используют Seditio хоть раз сталкивались вот с этим документом на neocrome.ru в котором описано как организован просмотр полноразмерных картинок из миниатюр не открывая в новом окне, а всплывающе над страницей.

С выходом Cotonti вы наверняка задались вопросом, а как же реализовать даную фичу в новом движке. Так вот эта статья для Вас.

Итак приступим:
Последовательность действий будет практически такой же как и в статье Aza.

Aza:

---

Шаг 1
1. jQuery framework - js библиотека, упакованная версия (19кб).
2. Thumbnailviewer - js плагин-просмоторщик (9кб).

Загружаем данные файлы и распаковываем в папку js корневого каталога нашего сайта. Итого, в папке js должны лежать 4 файла.

jquery-latest.pack.js - сама библиотека.
loading.gif - прелоадер (анимация при загрузке изображения).
thumbnailviewer.css - файл настроек всплывающего окна.
thumbnailviewer.js - сам скрипт просмотрщика.

1. Подключать вручную библиотеку jQuery теперь нет нужды поскольку в настройках системы Cotonti есть опция которая подключает вышеуказанный framework. Файл loading.gif - прелоадер (анимация при загрузке изображения) так же уже включена в Cotonti(расположен в папке images и называется теперь spinner_bigger.gif).
2. Распаковываем вот этот архив в корень вашего сайта. В нем два файла thumbnailviewer.js - скрипт просмотрщика и thumbnailviewer.css - файл стиля всплывающего окна.

Aza:

---

Шаг 2
Теперь открываем файл header.tpl нашего скина и в раздел head дописываем обращение к скриптам. Вот как это выглядит у меня:

Вставили? Ну теперь к следующему шагу

Aza:

---

Шаг 3
....

Править что то в файле functions.php теперь не будем что очень хорошо. В Cotonti мы сделаем следующее:
В админ-панели пройдем в раздел Админ-панель/Модули/ББкоды;
Находим ББКод img. Там их по умолчанию будет два...но нам потребуется тот в поле Замена которого будет вот такой код
и меняем его на такой
аналогичное действие(вставка атрибута rel="thumbnail") можно проделать так же для обоих ББКодов thumb.

Вот и все. Теперь у вас заработает данная фича.

1. Но хочу сделать небольшой сюрприз.

Если у вас много сайтов, а времени не так уж и много что бы делать эти все действия вручную, предлагаю скачать вот этот небольшой плагинчик который все сделает сам(единственное что нужно сделать это распаковать в папку с плагинами и установить его в админ-панели)

UPD 2010-06-23
Плагин обновлен благода
ря Alex300 и теперь если у страниц выставлен HTML-парсинг, (например, вы используете ckeditor и т.п.) вам не придется проставлять вручную аттрибут "rel" в тегах <a> потому что плагин сделает это автоматически с помощью jQuery.