Наверное все русскоязычные пользователи которые используют 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 дописываем обращение к скриптам. Вот как это выглядит у меня:
<head>
.......
<link href="skins/sed-light/thumbnailviewer.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/thumbnailviewer.js"></script>
.......
</head>
Вставили? Ну теперь к следующему шагу
Aza:
Шаг 3
....
Править что то в файле functions.php теперь не будем что очень хорошо. В Cotonti мы сделаем следующее:
В админ-панели пройдем в раздел
Админ-панель/Модули/ББкоды;
Находим ББКод
img. Там их по умолчанию будет два...но нам потребуется тот в поле
Замена которого будет вот такой код
<a href="$1"><img src="$2" alt="" /></a>
и меняем его на такой
<a href="$1" rel="thumbnail"><img src="$2" alt="" /></a>
аналогичное действие(вставка атрибута
rel="thumbnail") можно проделать так же для обоих ББКодов
thumb.
Вот и все. Теперь у вас заработает данная фича.
#1. Но хочу сделать небольшой сюрприз
Если у вас много сайтов, а времени не так уж и много что бы делать эти все действия вручную, предлагаю скачать вот этот небольшой
плагинчик который все сделает сам(единственное что нужно сделать это распаковать в папку с плагинами и установить его в админ-панели)
UPD 2010-06-23
Плагин обновлен благода
ря
Alex300 и теперь если у страниц выставлен HTML-парсинг, (например, вы используете ckeditor и т.п.) вам не придется проставлять вручную аттрибут "rel" в тегах <a> потому что плагин сделает это автоматически с помощью jQuery.
Thanked: 76 times
Thanked: 180 times
thx dervan
Пример:
В контент не всегда надо ставить одинаковые миниатюры (из чисто эстетических соображений)
Хотелось бы чтоб тег вставки поддерживал RESIZE используемые библиотеки это делают
Ну может, чтоб избежать неприятностей, хотя бы - в % от исходного изображения.
IMHO актуально для многих проектов
Thanked: 2 times