Скрипт цитирования картинок для форума SMFОтсебятина от 08 января 2010 года. Теги: HTML PHP Javascript Оптимизация Юзабилити
На форумах очень часто выкладывают картинки. Если какая-то картинка доставляет, то пользователи обычно цитируют её и оставляют свой комментарий. Иногда получается и так, что одну и ту же картинку цитируют по 10 раз. Из-за этого становится труднее среди цитированных изображений искать сами тексты сообщений. Оптимальное решение было найдено. В данный момент, оно написано для форума SMF (Simple Machines).
Смысл усовершенствования довольно прост — теперь цитируемая картинка заменяется псевдоссылкой. При наведении курсора на слово "Изображение", рядом с курсором появляется уменьшенная копия процитированного изображения. Само изображение берется из кэша браузера и изменяется в размерах самим браузером, но только когда это действие вызвано мышью.
Выглядит так:
Из-за того, что SMF хранит в базе сообщения с BB-кодами, а не в html, придется ввести новый тег [qimg], на который будет заменяться обычный [img] при цитировании.
Код скрипта для Simple Machines
PHP code
/forum/Sources/Subs.php
Добавляем в строку 1237
array(
'tag' => 'qimg',
'type' => 'unparsed_content',
'content' => ' <span onmouseover="showQuotedImage(this, \'$1\')" class="quotedImagespan">Изображение</span> ',
'validate' => create_function('&$tag, &$data, $disabled', '$data = strtr($data, array(\'<br />\' => \'\':);'),
'disabled_content' => '($1)',
),
PHP code
/forum/Sources/Post.php
Добавляем в строку 858
$form_message = preg_replace('~\[img(?:.*?)\](.*?)\[/img\]~is', '[qimg]$1[/qimg]', $form_message);
Javascript code
forum/Themes/default/scripts/script.js
Добавляем в конец файла
function showQuotedImage(obj, url) {
var img = document.createElement("img");
img.src = url;
img.width = "150";
img.id = "QuotedImage";
img.className = "QuotedImage";
obj.appendChild(img);
obj.onmouseout = (function (event) { return function (e) {
var el = document.getElementById("QuotedImage");
el.parentNode.removeChild(el);
}})();
obj.onmousemove = (function (event) { return function (e) {
var el = document.getElementById("QuotedImage");
var e = (!e) ? window.event : e;
X = e.pageX || e.x;
Y = e.pageY || e.Y;
if (navigator.userAgent.indexOf("MSIE") < 0) {
X -= el.parentNode.offsetLeft;
Y -= el.parentNode.offsetTop;
}
el.style.left = (X+10)+'px';
el.style.top = (Y+10)+'px';
}})();
}
CSS styles
forum/Themes/default/style.css
Добавляем в конец файла
/*Цитированные картинки */
.QuotedImage {
position: absolute;
z-index: 5;
}
.quotedImagespan {
position: relative;
border-bottom: 1px dashed #476C8E;
color: #476C8E;
cursor: pointer;
display: block;
width: 57pt;
}
Если у вас тема форума отлична от стандартной, то файлы следует заменять в папке с названием темы (не default)
|