Отсебятина Статьи Проекты
Облако тегов
Web CMS CSS htaccess HTML Javascript MySQL Php Безопасность Мониторы Новостная лента Оптимизация Ошибки Разработка сайта Часы Юзабилити оптимизация ошибки

Скрипт цитирования картинок для форума SMF

Отсебятина от 08 января 2010 года.    Теги: HTML PHP Javascript Оптимизация Юзабилити


На форумах очень часто выкладывают картинки. Если какая-то картинка доставляет, то пользователи обычно цитируют её и оставляют свой комментарий. Иногда получается и так, что одну и ту же картинку цитируют по 10 раз. Из-за этого становится труднее среди цитированных изображений искать сами тексты сообщений. Оптимальное решение было найдено. В данный момент, оно написано для форума SMF (Simple Machines).

Смысл усовершенствования довольно прост — теперь цитируемая картинка заменяется псевдоссылкой. При наведении курсора на слово "Изображение", рядом с курсором появляется уменьшенная копия процитированного изображения. Само изображение берется из кэша браузера и изменяется в размерах самим браузером, но только когда это действие вызвано мышью.


Выглядит так:
SMF цитирование картинок


Из-за того, что 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)
Оставить сообщение






Любое копирование должно сопровождаться ссылкой на сайт.
Если вам что-то не понравилось — сообщайте.
Кича Владимир
x
Мне не нравится этот сайт, удалить его