Мамбот 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

[dvtimofei]

И как сделать что бы она отображалась поверх всех элментов, а то сейчас она залазиет при увелечении под flash?

[al6855]

Отлично. В новой версии:
+++ работает выравнивание right
++ выводится подпись из тела мамбота

- картинка с принудительными размерами масштабируется из превью по умолчанию
пишу {hsimage|Портрет|right|220|273} (220х273 - родное размер) - что получается, можно посмотреть во вложенном файле
- конфликт с {mosimage} - если есть в теле, картинка не выводится

По поводу потерпеть - без проблем.
Огромное спасибо за работу - бот действительно очень полезный.

[sias]

У меня такая же проблема, только я не юзаю Джумлу, я из сообщества MODx.
Использую ту же самую либу Highslide JS.
Когда прописываешь флеш добавь и проблема уйдет.
<PARAM NAME="WMode" VALUE="Transparent">

К сожалению работает только в IE. Вопрос. Как сделать, чтобы это работало везде?

Нашел решение проблемы на сайте adobe.
Нужно в тег EMBED добавить wmode="transparent"

Источник: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14201&sliceId=1

[yunoshev]

Можно и так.
Спасибо sias за подсказку!

P.S. Joomla! & MODx forether & together!

[oleggrz]

Уважаемый Юношев.Подскажите пожалуйста,где можно изменить стили рамки для маленькой картинки и где активизировать
кнопку {hsimage}?Не могу найти,пока вбиваю ручками.

[yunoshev]

Стиль рамки для маленькой картинки в файле mambots/content/highslide/styles/style.css, строки:

Код:

.highslide img {
border: 1px solid #ccc;
}
.highslide:hover img {
border: 1px solid #B0C4DE;
}

Если Вы закачали и установили архив кнопки (bot_hsimage_btn.zip), то включается он там же, где и основной мамбот, название "Кнопка изображений с мини-эскизом".

[oleggrz]

Спасибо за быстрый ответ.Все работает прекрасно.

[dezzor]

Чето не понял как вставлять всплывающий текст Приведите пример. А то чет торможу

[yunoshev]

Пример использования HSImage для создания всплывающего текста:
{hstooltip|Сенсация!|<h3>Сенсация дня!</h3><p>Как стало известно сегодня из достоверных источников в правительстве, на днях была разработана новая версия мамбота HSImage, которая позволяет пользователю внедрять в текст материала всплывающие подсказки или полноценный форматированный текст HTML!</p>}

Данная вставка активируется путем установки мамбота-кнопки (bot_hstooltip_btn.zip). После установки мамбот нужно активировать, в материалах появится кнопочка "Вставить HSTOOLTIP".

В качестве разделителей заголовка ссылки  и текста выступают символы "|".

[dezzor]

Такс установил опубликовал, с картинками все нормально, но вот всплывающие подсказки все равно не хотят работать, може че упустил? в параметрах мамбота ничего не надо прописывать или в шаблоне может надо что то прописать на двух сайтах испробовал и ничего   вот можно посмотреть че получается, в конце текста http://kadrovest.ru/content/view/108/108/

[yunoshev]

Все ясно: у вас используется альтернативный модуль/мамбот ЛОГИНА (авторизации) cd_scriptegrator, но судя по разделам сайта -- он у Вас не используется. Он использует тот же самый скрипт, что и мой мамбот.

Варианты устранения глюка:
1. Переместите мамбот HSImage на самый верх в списке мамботов;
2. Если не помог первый пункт, то попробуйте его отключить (мамбот авторизации, вы ведь его все равно не используете).

[dezzor]

Четвертый сайт залил с нуля все стандартно, шаблон стандартный, не хочет ни в какую работать   hstooltip.btn ?  Картинки работают вставка текста не работает. Перепробовал на разных серверах, везде одно и тоже. Что зделать что бы заработал. У меня уже мозг кипит. На случай вопроса а включен ли мамбот - отвечаю да включен.

[yunoshev]

Да, глюк заметил...
+1 за настойчивость!
Спасибо!

(Проявляется, если в материале нет картинки, а только подсказка)

[dezzor]

  Вот жеж, теперь придумать бы как сделать так что бы всплывающие подсказки отображались без вставки картинки...... может в шабе прописать че? кпримеру путь до скрипта........... просто не ставить же картинку в 1 пиксель для того чтобы отобразить всплывающую подсказку

[yunoshev]

ЛЮДИ ДОБРЫЕ!!!

Надеюсь на ваше понимание и прошу прощения за поспешную рекламную кампанию.

Благодаря dezzor, был отловлен ВЕСЬМА СУЩЕСТВЕННЫЙ ГЛЮК в работе текущей версии (в.1.0.3) данного мамбота, который отказывался корректно работать, в частности, выводить всплывающую подсказку, если в материале не было всплывающих картинок.

Данный глюк оперативно мной исправлен. Приношу свои извинения.

Качайте исправленную версию здесь и в начале топика (там, где идет "эволюция мамонботов").
P.S. Можно не переустанавливать. Достаточно заменить hsimage.php. Касается тех, кто уже устанавливал версию 1.0.3!

Всегда Ваш, Юношев Виктор

[вложение удалено Администратором]

[dezzor]

Оперативно, честно говоря  после того как ты мне показал какой приблизительно код должен быть в исходном коде страницы я начал думать что не так, почему не цепляется скрипт, Со своим хреновым знанием рнр соответственно после трех дней ковыряния к положительному результату не очень то и приблизился.......  

[yunoshev]

думаю да

[skiigor]

Впервые увидел эту вещь. Посмотрел демо, почитал описание и отзывы - всё очень понравилось. Вопрос автору - прочитал всю тему так и не увидел никаких ваших упоминаний о работе этого мамбота с Joomla 1.5.х. Если работает, то есть ли какие-то нюансы в использовании, а если не работает, то планируется ли сделать версию совместимую с джумлой 1.5.х и как скоро?

[yunoshev]

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

@skiigor
К сожалению, ничего однозначно положительного вам ответить не могу и обещать впустую тоже не буду. С Joomla 1.5.х я ни разу не работал и даже не знаю, буду ли.

Если найдутся энтузиасты для портирования, думаю, наше сообщество будет им весьма признательно.
В исходном коде я все в ремарках описывал, что и для чего делаю...
Даешь HSIMAGE для Joomla 1.5.х!

[skiigor]

Жаль что не работает на 1.5
Просто на данный момент развитие 1.5 идет в полном разгаре хотелось бы увидеть и на 1.5 такую фичу )))

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

Я вот тут темку создал где покопал и собрал расширения для 1.5 работающие на том же скрипте HighSlide JS.

[newleax]

У меня такой вопрос - по умолчанию, если ничего под изображением не подписывать то в ALT ставится Title?

Просто я тут случайно эту темку задела на http://forum.searchengines.ru/

И там мне сказали следующее  (_Владимир_)

прочел ваше сообщение здесь http://forum.searchengines.ru/showpost.php?p=3425322&postcount=9  Вы сильно заблуждаетесь, это серьезная ошибка для Яндекса.

Однозначно alt и title в картинке должны быть разными, я давненько это доказал экспериментом. см. http://forum.searchengines.ru/showthread.php?t=243981&highlight=title+%E0%ED%EA%EE%F0

правильно составлять сначала alt="первая часть фразы" далее title="вторая часть фразы" таким образом вы создадите грамотные пассажи, которые будут рулить выдачей картинок.

Мммм... а как бы это автоматизировать в мамботе?

[yunoshev]

в картинке выставляю ALT, в ссылке -- TITLE

[yunoshev]

@Арчик
Привожу куски кода:

Код:

<head>
...
<script type="text/javascript" src="<?php echo $template_path;?>/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  // подключаем панель "web-інструменти"
$("#sitetools_slider").click(function(){
$("#cpaneldiv").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
</script>
...
</head>

<body>
...

<!-- START: CPANEL  (jQuery) -->
<div id="cpaneldiv">
<?php if (mosCountModules('cpanel')) { ?>
<div id="topmodule">
<?php mosLoadModules ( 'cpanel', -3 ); ?>
</div>
<?php } ?>
<div id="fontsdiv"> <!-- start: fonts resizer -->
<div id="fonts">
<span class="title">Розмір шрифту</span><br />
<span class="todo">оберіть потрібне значення</span><br />
<a href="javascript:void(0)" title="Зменшити розмір шрифту" onclick="changeFontSize(-1);return false;"><img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/font_decrease.gif" alt="" /></a>
<a href="javascript:void(0)" title="Звичайний розмір шрифту" onclick="revertStyles(); return false;"><img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/font_reset.gif" alt="" /></a>
<a href="javascript:void(0)" title="Збільшити розмір шрифту" onclick="changeFontSize(1);return false;"><img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $mainframe->getTemplate(); ?>/images/font_increase.gif" alt="" /></a>
</div>
</div> <!-- end: fonts resizer -->
<div class="clr"></div>
</div>
<!-- END: CPANEL  (jQuery) -->

<!-- START: WEBSITE TOOLS -->
<div id="sitetoolsdiv" class="yv_sitetools">

<?php if (strtolower($option) != 'com_frontpage'){ ?>
<div id="pathway">
<?php mosPathWay(); ?>
</div>
<?php } ?>

<div id="sitetools">
<a id="sitetools_slider" href="#" onclick="containerHeight.toggle();" title="Налаштування web-сторінки">настройки</a>
</div>
</div>
<!-- END: WEBSITE TOOLS -->

...
</body>

Надеюсь, дружище с CSS сами придумаете/разберетесь.

Исходный пример-обучалка: jQuery для начинающих

Реально рабочий сайт с этим кодом: www.kemo.com.ua (не считать за рекламу, просто разрешаю выцепить оттуда CSS).

[GapArchi]

Виктор, большое спасибо за мамбот, пользуюсь очень доволен. Поменял шаблон на сайте, а там контент идет по умолчанию белым цветом, т.е. когда выезжает рисунок с белой рамкой, текста конечно на нем не видно. Подскажите как исправить, в стилях писал непомогает, мож неправильно написал?, вот смотрите:
div.highslide-caption highslide-display-block {
color: #000000;
}

[yunoshev]

Виктор, большое спасибо за мамбот, пользуюсь очень доволен. Поменял шаблон на сайте, а там контент идет по умолчанию белым цветом, т.е. когда выезжает рисунок с белой рамкой, текста конечно на нем не видно. Подскажите как исправить, в стилях писал непомогает, мож неправильно написал?, вот смотрите:
div.highslide-caption highslide-display-block {
color: #000000;
}

Решение:
mambots/content/highslide/styles/style.css

Код:

.highslide-caption {
display: none;

border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
padding: 5px;
background-color: white;
}

меняем на

Код:

.highslide-caption {
display: none;

border: 2px solid white;
border-top: none;
font-family: Verdana, Helvetica;
font-size: 10pt;
color: ВАШ_ЦВЕТ_ТЕКСТА (к примеру, #fff);
padding: 5px;
background-color: ВАШ_ЦВЕТ_ФОНА;
}

В новой версии вынесу в параметры мамбота!

[newleax]

Ааа вот у меня какая проблема вспомнила сейчас.
У меня новости чередуются - те, что с фотками и те, что с видео. Я просто беру код embed с youtube, например. Ну или еще как.

Суть - картинки когда подгружаются до большого размера оказываются ПОД этим видео.
Слегка напрягает, хотелось бы над. Наглядность прикладываю.

[yunoshev]

Ааа вот у меня какая проблема вспомнила сейчас.
У меня новости чередуются - те, что с фотками и те, что с видео. Я просто беру код embed с youtube, например. Ну или еще как.

Суть - картинки когда подгружаются до большого размера оказываются ПОД этим видео.
Слегка напрягает, хотелось бы над. Наглядность прикладываю.

На уровне HSImage проблема не решается, но есть другой путь: в этой же теме

[fatalerror]

В общем, после пары-тройки писем с yunoshev через личку, выкладываю сравнение двух мамботов: HSImage и Multithumb. Сравнение с точки зрения уполномоченного по правам чайников.  Так сказать, для "адаптации интерфейсов двух разных людей – заказчика и исполнителя" (©  2008 Dead Krolik:  _http://dead-krolik.info/2008/07/20/menedzher-spasenie-frilansera). Может, данное сравнение скорректирует планы Виктора, а то он "ватермарки" собрался делать.  Ви-иктор, есть более важные проблемы (по моему мнению), решение которых может сделать из HSImage - №1 среди мамботов по обработке изображений

(Таблица-сравнение на рисунке во вложении - 12.gif)

Оптимизм по поводу multithumb улетучивается, как только возникает необходимость редактировать фото в ранее размещенных статьях. Неважно, каким способом размещенных. Multithumb в любом случае создает превьюхи – уменьшенные копии. И присваивает им примерно вот такие имена: b.150.0.16777215.0.stories.glava.dezhurnaya.jpg. Размещая их в своей папке mambots\content\multithumb\thumbs\
Чайник, при необходимости поменять фото, убирает, естественно, оригинал. Но превьюха-то остается! Получается, как у меня однажды: на превью – добрый дядя с умными глазами, а в оригинале выскакивает какой-то обдолбанный рокер. То есть в режиме редактирования чайнику очень трудно работать с multithumb: знания требуются сверх ворда, да и концепция «каждому пользователю по индивидуальной папке» летит ко всем чертям. А еще с такими названиями файлов все шаблоны разъезжаются.
А вот HSImage превью в виде отдельного файла не создает. Поэтому в режиме редактирования просто меняется исходник. Но такой простоты можно добиться, только пройдя через перипетии первоначального размещения. То есть через недостатки пункта 2.
К сожалению, случаев, когда необходимо менять ранее размещенные фото, не так уж и мало. Особенно в статичных материалах.

Что мы имеем на выходе.
Средние и крупные фирмы готовы нести расходы не только на создание сайтов, но и на их поддержание: человек в штате или договор с фрилансером- программистом (хотя для филансера заниматься рутинным наполнением сайта – это забивание гвоздей микроскопом).
А что делать мелким фирмам? В которых наполнение сайта – это, как правило, кому-то дополнительная нагрузка (бухгалтеру, секретарю, офис-менеджеру, сам директор (предприниматель) этим занимается)? Обучать? А что делать, если наполнением занимаются несколько человек? И каждому надо по персональной папке? Такому заказчику легче разместить заказ у человека, который работает с другой CMS.  Не с Joomla. И таких мелких заказчиков – великое множество, потому что для столиц – мелкая, а в провинции – «деревнеобразующее предприятие». Получается, что эта мелкота пролетает мимо кассы фрилансера, специализирующегося на Joomla.

Хочу подчеркнуть, речь ведется о базовых сборках, базовых версиях указанных мамботов и движков. Без хаков. То есть, на сегодняшний день нет решения, которое позволяло бы чайнику с базовыми знаниями работать с фото на базе Джумлы: «Шоб красиво и одинакового размера и без дополнительного обучения!»»

Так же не сравниваю указанные мамботы на предмет «тяжести кода, СЕО и прочих тонкостей», о существовании которых заказчик не подозревает и никогда не будет подозревать.

[yunoshev]

Хорошая постановка задачи.
Все понятно и правильно, особенно относительно вбивания новостей самим шефом мелкой фирмы и разжевывания ему, как надо вставлять картинки...

Свалилась на меня неожиданно "внеплановая работа" -- у брата моей жены была свадьба (я уже и не помню как это по-русски здесь, во Львове, "швагро"... сам я с под Луганска...), я был кинооператор, а теперь -- кинорежиссер. Вторую неделю монтирую видео. Даже намоем Core2 Duo Pinnacle иногда капризничает. А еще это мое желание извечное "чтоб по-людски было". Но сегодня-завтра заканчиваю второй диск и В БОЙ!

У меня уже давно чешутся руки улучшить мамбот.