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

[friend111]

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

[Lex]

Не советую. Когда пользователь водит по странице мышкой и случайно задевает картинки, они начинают разворачиваться одна за другой. Дико раздражает.

[supernoob]

Первое предположение: А вы английские имена файлам пытались давать?

спасибо все верно!!
+1

[FrosTPK]

yunoshev

Добрый вечер, давно я тут не появлялся =)
Есть идея по Watermark-у правда не знаю на скоко моя реализация валидна,
но воть что у мну вышло, использовал последний билд Highslide JS 4.0.12 :

в Highslide JS после

Код:

creditsTitle : 'Go to the Highslide JS homepage',

добавил

Код:

WatermarkText : ' ',
WatermarkTitle : 'Watermark (c)',

далее, после

Код:

creditsHref : 'http://',

добавил

Код:

showWatermark : false, // you can set this to false if you want
WatermarkHref : 'http://',

после

Код:

writeCredits : function () {
if (this.credits) return;
this.credits = hs.createElement('a', {
href: hs.creditsHref,
className: 'highslide-credits',
innerHTML: hs.lang.creditsText,
title: hs.lang.creditsTitle
});
this.createOverlay({
overlayId: this.credits,
position: 'top left',
hsId: 'credits'
});
},

добавил

Код:

writeWatermark : function () {
if (this.Watermark) return;
this.Watermark = hs.createElement( 'a', {
href: hs.WatermarkHref,
className: 'highslide-Watermark',
innerHTML: '<span id="Watermark" class="correct-png"> </span>',
title: hs.lang.WatermarkTitle
});
this.createOverlay({
overlayId: this.Watermark,
position: 'bottom right',
hsId: 'Watermark'
});
},

добавил изменяемые параметры:

Код:

hs.WatermarkTitle = 'Watermark (c)'
hs.WatermarkHref = 'http://'

ну и на конец добавил в css

Код:

/*--- Watermark ---*/
span#Watermark {
width : 128px;
height : 128px;
background : url(../images/watermark.png) no-repeat 0 0;
display : block;
cursor : pointer;
}

a.highslide-Watermark,
a.highslide-Watermark:hover {
color: white;
background-color: transparent;
}

результат на скрине, пока всё нормально...

[FrosTPK]

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

в Highslide JS после

Код:

creditsTitle : 'Go to the Highslide JS homepage',

добавил

Код:

WatermarkText : ' ',
WatermarkTitle : 'Watermark (c)',

далее, после

Код:

creditsHref : 'http://',

добавил

Код:

showWatermark : false, // you can set this to false if you want
WatermarkHref : 'http://',

после

Код:

        writeCredits : function () {
if (this.credits) return;
this.credits = hs.createElement('a', {
href: hs.creditsHref,
className: 'highslide-credits',
innerHTML: hs.lang.creditsText,
title: hs.lang.creditsTitle
});
this.createOverlay({
overlayId: this.credits,
position: 'top left',
hsId: 'credits'
});
},

добавил

Код:

        writeWatermark : function () {
if (this.Watermark) return;
this.Watermark = hs.createElement( 'a', {
href: hs.WatermarkHref,
className: 'highslide-Watermark',
innerHTML: '<span id="Watermark" class="correct-png"> </span>',
title: hs.lang.WatermarkTitle
});
this.createOverlay({
overlayId: this.Watermark,
position: 'bottom right',
hsId: 'Watermark'
});
},

(дороботка) после

Код:

if (hs.showCredits) this.writeCredits();

добавил

Код:

if (hs.showWatermark) this.writeWatermark();

(перебил, из за глюков, и не возможности контролировать, тоисть при прошлом варианте было пофигу стоял - false или true, всё равно ватермарк отображался, оказывается они просто поменяли немножко параметры, вследствии чего пришлось енто править...)
добавил изменяемые параметры:

Код:

//Show Credits
hs.showCredits = false;
//Credits URL
hs.CreditsHref = 'http://';
//Watermark
hs.showWatermark = true;
//Watermark Title
hs.WatermarkTitle = 'Watermark (c)';
//Watermark URL
hs.WatermarkHref = 'http://';

добавил в css + фикс запрещающий FireFox обводить ссылки!

Код:

/*--- Watermark ---*/
span#Watermark {
width : 128px;
height : 128px;
background : url(../images/watermark.png) no-repeat 0 0;
display : block;
cursor : pointer;
}

a.highslide-Watermark,
a.highslide-Watermark:hover {
color: white;
background-color: transparent;
}
/*--- FireFox NOFocus ---*/
a:focus {
outline : none;
}

[Alex Revo]

Очень не хватает ручного параметра для отключения вывода полной картинки у отдельных изображений (по типу как у dinamicimage параметр popup=0).
Может подскажете в каком месте копать, чтобы я долго не ковырялся в коде.

[yunoshev]

Очень не хватает ручного параметра для отключения вывода полной картинки у отдельных изображений (по типу как у dinamicimage параметр popup=0).
Может подскажете в каком месте копать, чтобы я долго не ковырялся в коде.

Вы хотите отключить показ всплывающей картинки или полной (исходного размера) картинки по нажатию на кнопку "Развернуть до исходного размера"?

[Alex Revo]

Показ всплывающей картинки, чтобы при наведении и нажатии на эскиз фото ничего не происходило.

[Chirik]

Было бы неплохо добавить возможность вставлять картинки с других серверов, ну к примеру у меня есть 2 хоста, на одном лежит проект сугубо статейного характера, а на другом фото-видео материалы, соответственно на первом сервере место ограничено, а на втором в достатке. Ну и что бы не забивать ограниченное место вставка картинок с другого сервера была бы не заменимой! Что-то вроде этого:
{hsimage|www.site.ua/img.jpg|Моя первая картинка|right|||auto}

[yunoshev]

Ссылки в личке
эт последняя версия

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

Значит, отключите у себя временно обработку 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";
 

[Pups]

Всё заработало )
Почти
hstooltip всё равно в ручную расширить придётся

[yunoshev]

Всё заработало )
Почти
hstooltip всё равно в ручную расширить придётся

У Вас справа внизу есть специальная штука "Resizer" как в обычных окнах Windows. С помощью нее спокойно можно менять размер (растягивать) окна.

[Pups]

У Вас справа внизу есть специальная штука "Resizer"

Тк это я знаю 

А посетитель ?

Для этого специальную надпись делать... 

На предыдущей версии просто в файле highslide.css чуть расширил а здесь даже 650 выставил окно разъезжается но таблица всё равно поджимается   
похоже из -за шрифта в последней версии он почему то увеличился чот наспех пока не нашёл где вернут на место

[Chirik]

А можно сделать вывод галереи примерно http://gallery.korrespondent.net/ukraine/1342  ... ????

[Pups]

Можно ток не ботом а компонентом галерея

похоже из -за шрифта в последней версии он почему то увеличился чот наспех пока не нашёл где вернут на место

в highslide.css не надо указывать принудительно шрифт и размер пускай берёт из шаблона

Код:

.highslide-container div {
font-family: Verdana, Helvetica;
font-size: 10pt;

[yunoshev]

На предыдущей версии просто в файле highslide.css чуть расширил а здесь даже 650 выставил окно разъезжается но таблица всё равно поджимается  
похоже из -за шрифта в последней версии он почему то увеличился чот наспех пока не нашёл где вернут на место

Надо в CSS искать что-то типа "maincontent"

[yunoshev]

в highslide.css не надо указывать принудительно шрифт и размер пускай берёт из шаблона

Это оригинальный файл стилей, я там практически ничего не правил

[yunoshev]

@Chirik
Можно, но только на основе другого скрипта и я даже знаю примерно какого. Но это будет только в свободное время.

[Pups]

Это оригинальный файл стилей, я там практически ничего не правил

Начало highslide.css где указан шрифт и размер можно убрать у всех свои шрифты в шаблонах

highslide.css

строка 2

Код:

.highslide-container div {
/* font-family: Verdana, Helvetica;
font-size: 10pt;*/

В настройки можно добавить скорость скорлинга

hsimage.php

строка 110

Код:

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
slideshowGroup: 'hs_image_group',
interval: 3500,

начальные параметры отступов лучше наверно выставить в -0- а дальше уже настраивать, прибавлять в настройках

строка 132

Код:

<style type=\"text/css\">
img.hs_border {
border: 0px solid #ffffff;
padding: 0px;
margin: 0px ;
background: #000000;
 

===

После всех исправлений бот пашет на ура  

[warring]

Скажите плиз почему hsimage может не работать? сайт на джустине, но на другом сайте который тоже на ней, все работает, делаю все вроде правильно, но такое ощущение что что-то мешает ему?

[yunoshev]

@warring
http://joomlaforum.ru/index.php/topic,33289.msg335286.html#msg335286

[fatalerror]

Уважаемые форумчане! Прошу поделиться вашим опытом общения с "законченными пользователями" сайтов вот по какому вопросу.

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

У меня пара-тройка пользователей не догадывалась, что можно навести на фото, щелкнуть и увеличить.
Может быть, имеет смысл на превьюху в уголке помещать полупрозрачную лупу. Чтоб уже самые "законченные пользователи" без наведения мыши на фото сразу видели, что можно увеличить.

Может имеет смысл сделать это опционально. На усмотрение админа сайта, как говорится.

Пара-тройка пользователей - это не показатель. В любой области есть определенное кол-во идиотов, которым хоть какую лупу делай - все одно не врубятся.

Но вот ваше мнение. Есть смысл? Или избавим Виктора от просьб заниматься устройством подобных "удобств" в его замечательном мамботе?

[yunoshev]

Так. Сделал включение/отключение замены <IMG> как в параметрах мамбота, так и в теле самого <IMG>. Значит, будет так:
1. Если включено "Замена <IMG>", то обрабатываются все <IMG>, кроме тех, в которых прописано <IMG ... REL="nohsimage" />.
2. Если отключено "Замена <IMG>", то обрабатываться <IMG> НЕ БУДУТ, кроме тех, в которых прописано <IMG ... CLASS="hsimage" />.

Обновление будет выложено в следующем релизе на днях.

[Pups]

2fatalerror
Сегодня тестировал бот делетанский (бугалтерско-менеджерский) офис ~20 человек без обяснений все разобрались
Накладная иконка (плюсик, лупа, надпись) для тех кто не умет двигать мышкой наверно всё таки излишня это даже не посетитель, клиент  а так...зачем ему это...приболи он не принесёт) а проблемы с 6ie будут...

==
Если по графике тк лучше добравить и закругление углов в превью 

[yunoshev]

@fatalerror
Может, просто в следующем релизе добавить пожелания от newleax -- показ надписи к эскизу, как в mosimage, и тогда там просто слева от надписи/подписи прорисовывать иконку такую, как для всплывающих подсказок?

[fatalerror]

@fatalerror
Может, просто в следующем релизе добавить пожелания от newleax -- показ надписи к эскизу, как в mosimage, и тогда там просто слева от надписи/подписи прорисовывать иконку такую, как для всплывающих подсказок?

Ну, если Юля высказала такое пожелание, то надо сделать. С женщинами лучше соглашаться. Тем более она в джумластроении 100 очков фору даст вперед большинству форумчан.

Ну а с идиётами своими я сам как-нить разберусь.

[newleax]

Было бы неплохо добавить возможность вставлять картинки с других серверо

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

Ой, только наверное это нехило грузанет сервак, ммм?

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

Пара-тройка пользователей - это не показатель. В любой области есть определенное кол-во идиотов, которым хоть какую лупу делай - все одно не врубятся.

Ну не знаю, моим только дай потыкать везде. Мне такое не нужно.

Ой, меня тут хвалят, надо пилить отсюда.

[evpadallas]

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

[Sedoy]

О да, да, да, да!

как в кино...

Статьи .... , начинается про одно, в середине совсем про другое.

ну это ж нормальный женский разговор...

[yunoshev]

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

Да, планируется.