Мамбот HSImage - всплывающие картинки (подсказки) в материалах v.1.1.4

[yunoshev]

Уважаемые форумчане!

Модифицировал стандартный мамбот MOSImage в... читайте далее...  

Изображение с мини-эскизом -- Замена в содержимом тэга {hsimage} специальной ссылкой всплывающего изображения.
Основан на скрипте Highslide JS Version: 3.3.20 (June 19 2008). Как и стандартный мамбот mosimage (изображение MOS), данный мамбот внедряет в содержимое картинку, указанную в параметрах материала "Изображения". Внимание, в данных параметрах ("Изображения") ничего указывать не нужно! Ваше изображение в тексте по-умолчанию будет прижато к левой стороне (float: left).

Для версий Joomla 1.5.x: плагин HSImage для Joomla 1.5

Чтобы у Вас все работало хорошо, рекомендую загружать последнюю версию мамбота! (Первые оставлены для тех, кто загружал мамбот изначально.)

ВНИМАНИЕ: Нельзя использовать никаких спец/рус символов в названиях файлов изображений!

Параметры мамбота

Параметры мамбота:

• Анимация (по-умолчанию: да) - выполнять анимацию при открытии окошка или нет; (версия 1.0.3)
• Копирайт (по-умолчанию: нет) - показывать копирайт Highslide (авторство) или нет (доступно только для полных картинок); (версия 1.0.3)
• Подгружать скрипт (по-умолчанию: да) - если Вы уже используете данный скрипт на сайте, то можете отключить, чтобы не возникло конфликтов.
• Размер превьюшки (по-умолчанию: 100) - размер мини-эскиза в пикселах большей из сторон изображения, т.е. если ширина > высоты, тогда ширина=100, а высота вычисляется пропорционально исходному изображению;
• Отступ (Margin) (по-умолчанию: 0) - Отступ изображения в пикселях (px), окружающий изображение;
• Отбивка (Padding) (по-умолчанию: 0) - Отбивка изображения в пикселях (px), окружающее изображение;
• Цвет рамки превьюшки (по-умолчанию: #1e90ff) - Цвет рамки превьюшки (мини-эскиза) по-умолчанию; (версия 1.0.3)
• Цвет рамки при наведении (по-умолчанию: #b0c4de) - Цвет рамки превьюшки (мини-эскиза) при наведении курсора мыши; (версия 1.0.3)
• Показывать заголовок (по-умолчанию: да) - указываем, отображать или нет надпись всплывающего изображения (к сведению пассажиров , заголовок я беру автоматически из названия материала и добавляю "(рис. ##)", так что я постарался Вам упростить задачу по-максимуму);
• Контуры (по-умолчанию: округленные белые) - какое обрамление контуров всплывающей картинки Вы хотите испльзовать; (версия 1.0.3)
• Панель управления (по-умолчанию: тип 3) - показывать панель управления картинками во всплывающем окошке или нет; (версия 1.0.3)

   
Внедрено еще ручное указание параметров. Синтаксис:
{hsimage|ваш_заголовок|выравнивание|ваша_ширина|ваша_высота|масштабирование}, где:

• ваш_заголовок - Ваш заголовок всплывающего изображения;
• выравнивание - необходимое положение рисунка в материале, допустимые значения: right, left, center или none (доступно в версии 1.0.2);
• ваша_ширина - Ваша ширина мини-эскиза изображения;
• ваша_высота - Ваша высота мини-эскиза изображения;
• масштабирование - чем будет выполняться масштабирование рисунка в материале (автоматически браузером или встроенным скриптом thumb.php), допустимые значения: auto - автоматически браузером (доступно с версии 1.0.2).
• nopopup - запрещаем показывать "большой вариант" картинки;

Пример:
{hsimage|Моя первая картинка|right|||auto} - изображение будет в материале справа, автоматически отмасштабировано браузером, заголовок "Моя первая картинка";
{hsimage|Моя вторая картинка|||||nopopup} - изображение будет в материале слева, отмасштабировано скриптом, заголовок "Моя вторая картинка" без возможности увеличения данного эскиза (отключено всплывающее окошко).

После установки не забудьте опубликовать мамботы (сам hsimage и его кнопку).
Отключение стандартного мамбота MOSImage не требуется.

Новые версии и улучшение функционала

Новые версии (эволюция мамонботов ).

bot_hsimage_v.1.0.1.zip:
1. Локализован и исправлен глюк с некорректным отображением заголовка картинки (текста) при ручном его указании.
2. Добавлено выравнивание по-середине, НО превьюшка размещается не в тексте, а выше или ниже его, смотря где вставляете.
3. Изменен в коде скрипта Z-INDEX, равный 10001. Тестировать было не на чем, у меня на сайтах элементов выше такого уровня нет.

bot_hsimage_v.1.0.2.zip:
1. Локализован и исправлен глюк при совместном использовании HSImage и MOSImage.
2. Локализован и исправлен глюк с некорректным отображением заголовков картинок (текста) при отображении материалов в виде блога.
3. Сделано корректно выравнивание по-середине, а также его отсутствие (float:none).
4. Добавлена возможность указания, чем будет выполняться масштабирование рисунка в материале: автоматически браузером или встроенным скриптом thumb.php (см. синтаксис мамбота). Внимание: в данном случае, при указании параметра auto будет подгружаться картинка целиком!

bot_hsimage_v.1.0.3.zip:
1. Добавлена поддержка многоязычности.
2. Добавлены дополнительные параметры мамбота (оформление стилей отображения, отображение панели управления и другое).
3. Добавлена поддержка дополнительной инструкции {hstooltip|Текст_ссылки|Текст_HTML}, которая внедряется с помощью кнопки bot_hstooltip_btn.zip. Это позволит Вам помимо картинок делать всплывающие текстовые подсказки. Т.е. мамбот HSImage теперь как 2 в 1.

bot_hsimage_v.1.0.3.1.zip:
1. Локализован и исправлен глюк с некорректным отображением при заданном размере превьюшки.
(PS: достаточно будет заменить файл hsimage.php)

bot_hsimage_v.1.0.3.2.zip:
1. Подкорректировано подключение дополнительных стилей в <head> страницы для валидности кода мамбота.
2. Очень важное дополнение! Добавлен новый параметр мамбота "Подгружать предварительно" -- указывается количество изображений для предварительной загрузки в фоновом режиме. Параметр обязательный. ВНИМАНИЕ! От данного параметра зависит нагрузка на сервер! (если бы не проблемы с сервером у newleax, такой параметр бы не скоро появился ).
(PS: достаточно будет заменить файлы hsimage.php & hsimage.xml.)

bot_hsimage_v.1.0.3.3.zip:
1. Подкорректировано подключение скрипта в <head> страницы.

bot_hsimage_v.1.1.b.zip -- beta версия:
1. ВНИМАНИЕ! Это тестовая версия мамбота. Инсталлятор еще не корректировал, поэтому устанавливать сперва стабильную версию 1.0.3.3 потом просто заменить файлы из архива. Из того, что было в планах, осталось сделать замену <IMG>, кеширование эскизов.

bot_hsimage_v.1.1.2.zip:
1. Сделал обработку <IMG> как в материалах, так и в пользовательских модулях.
2. Если для всплывающих подсказок выбран режим "по наведению мыши", то кнопки "Переместить" и "Закрыть" не добавляются.
3. Оптимизирован код мамбота.
4. Инсталлятор уже нормальный!

bot_hsimage_v.1.1.3.zip:
1. Отображение картинок с внешних ресурсов. Эскизы (превьюшки) отображаются, но грузится вся картинка!
2. Исправлены мелкие упущения при переключении режимов работы мамбота, а также некоторые глюки.

bot_hsimage_v.1.1.4.zip:
1. Исправлено формирование HTML-кода для корректного отображения подписи в тегах <p>.

Тестировалось: Joomla! 1.0.12 LE, SEO-Joomla! 1.0.15.

С уважением, Юношев Виктор.

Демо: http://hsimage.yunoshev.com/
Админка: юзер - demo, пароль - demo
P.S. Только ничего там не ломайте

Для версий Joomla 1.5.x: плагин HSImage для Joomla 1.5

[newleax]

Sedoy  тыыык, оффтопим... злостно.  Надо это... как-то ближе к мамботу 
yunoshev а когда будет новая версия? Ну так, примерно. Я просто думаю то ли сейчас поставить, то ли уж дождаться ту, что с подписями и тогда заняться... кхм, если не сильно долго, то скорее всего второе.

[Bickaze]

Скажите, планируется ли добавление к боту возможность наложения ватермарка?

через .htaccess добавьте.

[Alex Revo]

а как это?

[yunoshev]

yunoshev а когда будет новая версия? Ну так, примерно. Я просто думаю то ли сейчас поставить, то ли уж дождаться ту, что с подписями и тогда заняться... кхм, если не сильно долго, то скорее всего второе.

Даже не знаю, что сказать, т.к. "застрял" на создании эскизов из <IMG>, где указан ресурс, который "не родной" для сайта. Проблема в том, что для его создания необходимо знать абсолютный путь к картинке.

Может кто сталкивался?

Из того, что готово и будет в новом релизе:
1. Включение/отключение замены <IMG> как в параметрах мамбота, так и в теле самого <IMG>.
2. Сегодня переделал создание эскизов. Теперь эта функция осуществляется другим, более совершенным скриптом, при этом эскизы кешируются в папке "ваш_сайт/cache/". Надеюсь эта папка есть у всех.

[Bickaze]

а как это?

http://joomlaforum.ru/index.php/topic,53858.0.html

[mystique]

Для начала позвольте сказать огромное спасибо за чудесный навесок к джомле! Я в восторге! Но при освоении возникли маленькие непонятки... Поставил версию 1.1.2 (вроде бы самую свежую) и так и не нашел там кнопки "Замена IMG", как на демосайте... Этого действительно еще нет в последенй, 1.2.2 версии? Или это нужно как-то активировать отдельно?

И еще один момент хотел уточнить... Вставляю ссылочку на картинку. Тегом <img> на внешний ресурс. При редактировании картинка отображается. После сохранения и просмотре статьи картинки нет. Вместо нее заголовок статьи. Причем по идее скрипт по клику пытается что-то нарисовать (появляется надпись Loading...), но ничего не происходит. Опять же, в этой тебе обсуждалась похожая проблема (ссылки на другие ресурсы), но я так и не понял, чем все закончилось... В 1.2.2 это не работает? Или я что-то не так сделал?

P.S. Вот пример странички моего тестового полигона, где я пытаюсь освоиться с этим замечательным мамботом: http://test.mototravel.org/index.php?option=com_content&task=view&id=2&Itemid=1&mosmsg=%D3%F1%EF%E5%F8%ED%EE+%F1%EE%F5%F0%E0%ED%E5%ED%EE%21

Рядом с картинкой часов по идее должна быть девушка. А там просто надпись... ;(

[yunoshev]

@mystique
1. Новый релиз, работа которого показана на демо-сайте еще не доступен для общего скачивания, проходит стадию тестирования.
2. Скорее всего, что поддержки создания эскизов с чужих (внешних) ресурсов НЕ БУДЕТ, т.к. в данном случае прийдется закачивать фотки к "себе" и только потом делать с них эскизы... Короче, идея хороша, а реализация не пойдет. Это будет грузить ваш сайт, товарищи.

@evpadallas
А ватермарки нужны к эскизам?

[mystique]

Так достаточно один раз сделать эскиз и им пользоваться. Не так уж часто новые статьи появляются. Хотя может я не прав... ;(

[evpadallas]

Не, нафиг они к эскизам? К фул имг хватит вполне.
У меня возникла проблема.
Скачал 1.1.2, ради тултипа, все картинки в материалах что нужны, т.е. которые должны увеличиваться по клику - показываются правильно, а все остальные - нет, на них накладывается зачем-то скрипт увеличения и получаются пустые места с обрамлением. В админке все отображается как надо. Редактор FCK.

[yunoshev]

По этому поводу я отвечал Pupsу, кажется, на предыдущей странице, как отключить временно обработку IMG

[evpadallas]

Спасибо, а фишку отключения обхода картинок из настроек было бы неплохо видеть 

Еще вопрос: Почему, когда вставляю тултип, в конце него появляется тег "p" и происходит перенос остального текста на след. строку? можно как-то сделать так, чтобы переноса не было?

[algol]

поставил bot_hsimage_v.1.1.2 и пробовал bot_hsimage_v.1.0.3.3   на LE J1.0.15- аналогичная ситуация - вместо превьющки рамка и в ней загловок статьи - я подозреваю что это alt или title картнки
При клике на это дело - открывается картинка - тут все ОК.
HELP
Архиважный и нужный бот, Multithumb  замучил глюками наконец нашел аналог, осталось тока чтобы он работал .

Кажется путь не правильно вычисляется где то, посмотрел через IE и увидел битый путь у превюшках:
httр://www.mysite.ru/mambots/content/highslide/thumb.php?src=/var/www/user/data/www/mysite.ru/images/stories/strani/britania/img_01.jpg&x=100&y=75&f=0
где это можно поправить или такой он и должен быть?

[evpadallas]

Скорее всего это происходит из-за того, что в подсказке Вы используете картинки, идет "перехват" и наложение на одну и ту же ссылку.

Значит, отключите у себя временно обработку IMG. Откройте файл hsimage.php и со строки где-то №202:

Код

 	// expression to search for
	$regex  = '';
	$regex  = '#<img[^>]*src=(["\'])([^"\']*)\1[^>]*>';
	$regex .= '|{hsimage\s*.*?}#is';
	//$regex = '/{hsimage\s*.*?}/i';
	$regex_tooltip = "#{hstooltip\s*(.*?)}#s";
 

сделайте так:

Код

 	// expression to search for
	$regex  = '';
	//$regex  = '#<img[^>]*src=(["\'])([^"\']*)\1[^>]*>';
	//$regex .= '|{hsimage\s*.*?}#is';
	$regex = '/{hsimage\s*.*?}/i';
	$regex_tooltip = "#{hstooltip\s*(.*?)}#s";
 

[yunoshev]

Почему, когда вставляю тултип, в конце него появляется тег "p" и происходит перенос остального текста на след. строку? можно как-то сделать так, чтобы переноса не было?

завтра проверю.

[algol]

Дело в том, что при обходе всех элементов IMG в тексте я из адреса картинки автоматически убираю "/images/stories/", т.к. потом вручную его добавляю ("/images/stories/") при показе эскиза самой картинки.

Обнаружил, как раз, что если картинки вставлены через <img> то:
Адрес ссылки:
http://www.mysite.ru/images/stories/images/stories/strani/andora/img_04.jpg
Адрес картинки:
httр://www.mysite.ru/mambots/content/highslide/thumb.php?src=/var/www/user/data/www/mysite.ru/images/stories/images/stories/strani/andora/img_04.jpg&x=&y=&f=0
1. видно что /images/stories/ там и там дублируется
2. не хотелось бы "палить" путь  /var/www/user/data/www/mysite.ru/ лучше как то бы к относительному привязаться бы
это на v.1.1.2

[yunoshev]

@ALL
Я ж писал, что в новом релизе (работает на демо-сайте) этих ошибок нет и при создании эскиза указывается не абсолютный путь, а относительный. Абсолютный путь уже просчитывается в теле нового скрипта создания эскизов.

Но все это справедливо для картинок с одного ресурса. Если будет указан внешний ресурс с картинкой, то их мамбот обрабатывать НЕ БУДЕТ!

Выложу данный релиз уже после того, как доделаю отображение подписей к мини-эскизам.

[evpadallas]

2 yunoshev: а как там с тегом P?

[yunoshev]

@evpadallas
Даже не знаю, откуда у Вас идет такая вставка, т.к. ниже представлен код, который вставляет мамбот-кнопка:

Код

$button = array( 'hstooltip.gif', '{hstooltip|Текст_ссылки|Текст_html}' );
 

И на моих рабочих и демо-сайтах такого тоже нет. Может это особенность виз. редактора, который у Вас стоит. Лично я визуальными редакторами Joomla никогда не пользовался и своих клиентов приучаю к тому же.

[Alex Revo]

Виктор, такой момент.
У меня на странице есть фото и mp3-плеер, подключаемый плагином AllVideos. При просмотре фото в полный размер окно плеера отображается поверх фото, что не есть хорошо. Манипуляции с css (z-index) ни к чему не привели.
Можно скрывать div с плеером в момент нажатия на фото, вопрос в том в каком месте лучше влезть в код, чтобы прописать вызов этой функции.
Что посоветуете?

P.S. Жду параметра возможности отключения вывода полной картинки для указанных фото.

[yunoshev]

@Alex Revo
Насколько я помню, для работы этого плагина используется флеш?
Значит, напомню всем правила вставки флеш, будь то баннер или другой флеш-объект:

Код:

...
<param name="wmode" value="transparent" />
<embed src="images/flash/ваш_флеш_элемент.swf" wmode="transparent" ... >
...

Просто добавьте эти параметры там, где описывается этот объект.

[Alex Revo]

Спасибо, помогло. Надо было самому догадаться.

[sstib]

Дядька, я тебя не забуду.

[yunoshev]

Дядька, я тебя не забуду.

Это в каком смысле?

[sstib]

Это в каком смысле?

в смысле что подобная преполезнейшая штука в открытом доступе и для народа – это очень здорово.
спасибо большое

[bestel]

to yunoshev: спс за качественный мамбот!

[yunoshev]

Пожалуйста.
Но смотрите, не ругайтесь, т.к. текущая версия (1.1.2) еще некорректно работает.

[bestel]

Угу, киппер проверь:)

[yunoshev]

Угу, киппер проверь:)

Это первая материальная благодарность (безвозмездно) за год

[Chirik]

Для хорошего человека, как известно, ничего не жалко =) Тоже тебе скинул немного электронной материальной помощи 

А в новой версии еще нельзя указывать ссылки на фото с других серверов?

Да, и если в заголовке статьи присутствует символ " то все что после него обрубается

[yunoshev]

спасибо. по поводу других серверов ничего не обещаю, за глюк - спасибо