Thumbnailviewer

Наверное все русскоязычные пользователи которые используют 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.


1. esclkm  2009-02-03 03:54
dayver молодец
2. Rio  2009-02-03 04:03
Зачетно. Радует что есть отзывчивые люди +1
3. Dayver  2009-02-03 07:14
Архивы перезалиты (запакован свежий скрипт в котором нету глюка с широкими изображениями).
thx dervan
4. Rio  2009-02-04 02:06
!!!Настройки вида миниатюр остались в ваш сайт/admin.php?m=config&n=edit&o=core&p=pfs , если вы их поменяли придется регенерировать миниатюры ( удалите фалы картинок из папочки \datas\thumbs и зайдите ваш сайт/pfs.php?f=0&o=thumbs и после этого все тумбы перегенрируются по новой с новыми настройками ) Авторство сообщество + Dayver.
5. Rio  2009-02-27 02:57
Ну все хорошо! Немного не хватает функционала , при вставке миниатюр
Пример:
В контент не всегда надо ставить одинаковые миниатюры (из чисто эстетических соображений)
Хотелось бы чтоб тег вставки поддерживал RESIZE используемые библиотеки это делают
Ну может, чтоб избежать неприятностей, хотя бы - в % от исходного изображения.
IMHO актуально для многих проектов
6. 3axap  2009-07-05 21:51
Спасибо! Плуг - класс!
Only registered users can post new comments