[Хак] Highslide JS - модные превьюшки

SeeD · 2009-02-26 01:37:59

Информация не нова и при желании все можно по частям собрать их разных постов, но я так не люблю. Все-таки информация должны быть в одном месте, полная и самодостаточная.

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

1) На своем сайте в папке engine создайте папку hacks.
2) Скачайте архив из аттача и распакуйте его в только что созданную папку hacks.

У вас должен получиться результирующий путь http://site.ru/engine/hacks/highslide/highslide.js, где site.ru – имя вашего сайта.

3) Откройте файл main.tpl используемого вами шаблона (например, /templates/default/main.tpl) и сразу после {extracss} добавьте:

<style type="text/css" media="all">
@import url(http://site.ru/engine/hacks/highslide/highslide.css);
</style> 
<!-- highslide start  -->
<script type="text/javascript" src="http://site.ru/engine/hacks/highslide/highslide.js"></script>
<script type="text/javascript">    
    hs.graphicsDir = 'http://site.ru/engine/hacks/highslide/graphics/';
</script>
<!-- highslide end  -->

заменяя site.ru на имя вашего сайта.

4) Откройте файл engine/lang/russian/admin/images.ini и замените строки:

insert_thumb    =    "[img="{thumb_url}" border="0" align=""]{file_name}[/img]"
insert_file    =    "[img="{file_url}" border="0" width="{image_width}" height="{image_height}" align=""]{file_name} ({fsize})[/img]"

на:

insert_thumb    =    "[url="{file_url}" onclick="return hs.expand (this)"  class="highslide"][img="{thumb_url}" class="nimg" border="0" align=""]{file_name} ({fsize})[/img][/url]"
insert_file    =    "[img="{file_url}" border="0" width="{image_width}" height="{image_height}" align=""]{file_name} ({fsize})[/img]"

5) Откройте файл engine/includes/classes/parse.class.php, найдите в нем строки:

case 'title':
$v = str_replace(array("\"", ord(0), ord(9), ord(10), ord(13), ":", '<', '>', '&'),array("'",''),$kv);
$outkeys [] = $kn.'="'.$v.'"';
break;

и ниже добавьте:

case 'onclick':
$v = str_replace(array(ord(0), ord(9), ord(10), ord(13), "'", "\"", ";", ":", '<', '>', '&'),'',$kv);
$outkeys [] = $kn.'="'.$v.'"';
break;

Вот и вся установка. Теперь, когда вы будете добавлять в ваши новости превью, для их увеличения будет использоваться библиотека Highslide JS.

Авторы данной инструкции: netduke и d7p4x
Проверенно работает на 0.9.0 Release (Fix #04)
Официальный сайт Highslide JS: http://highslide.com

Отредактировано SeeD (2009-02-26 01:39:06)

vitaly · 2009-02-26 01:42:30

Тема перенесена в раздел FAQ.

SeeD · 2009-02-26 01:47:15

аттач только отвалился при переносе и приколоть я тут не имею прав, по всей видимости. на всякий случай, вот:
_http://pspfaqs.ru/highslide_4012.zip

vitaly · 2009-02-26 01:53:59

SeeD, проверь сейчас, plz.
В форуме FAQ не было ни у кого прав на просмотр аттачей, исправил доступы.

SeeD · 2009-02-26 01:56:54

качается, все в порядке. спасибо что перенес, я долго думал где создавать, но в FAQ`е все же не решился)

insider · 2009-04-17 03:21:52

есть еще Lightbox2

SeeD · 2009-04-17 10:52:58

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

Сокол · 2009-05-23 19:10:05

всё сделал точно по инструкции - хайслайд не пашет!
вставлял в запись и превьюшки и "мини-картинки" - при клике открывает само изображение из папки загрузки...
движок - последний релиз. что может быть не так?

SeeD · 2009-05-23 20:08:20

значит не все или не точно. у всех кто делает правильно, хайслайд работает.

RMC · 2009-10-10 21:29:34

а как сделать, чтобы для одиночных фоток был один стиль Highslide, а для галерей - другой.
так все работает, но вот такая "фишка" не получается.. ;)

Herm · 2009-12-11 20:37:42

Здравствуйте. Помогите, пожалуйста, разобраться. Адрес нашего сайта: http://kempo-ekb.ru

Хочу сделать такие превьюшки. Но в моем файле main.tpl нету строки {extracss}. Вообще ничего подобного. Использую шаблон st05. Все настроено, Шаблон менять не хочу. Но скрипт не работает. Видимо не туда вставил код. Подскажите точнее, куда нужно его вставлять. Заранее спасибо.

infinity237 · 2009-12-11 21:04:37

Никогда не понимал людей, которые удаляют копирайты и после этого идут на форум-поддержки за помощью...

Herm · 2009-12-11 21:29:38

Дизайном собственно и не я занимался. И сразу критика. Без разбору. Извините за беспокойство, в таком случае.

upd: Копирайты расставил. Я новичок, нашару делаю так сказать, и попросту не уделил этому внимания. Буду умней в будущем.

Отредактировано Herm (2009-12-11 21:43:55)

Trashcka · 2009-12-11 21:34:31

infinity237, че то ты злой сегодня такой всех ругаешь.

Herm, вставлять в любое место *я пошлячка* между <head> и </head>

infinity237 · 2009-12-11 21:53:51

Trashcka пишет:

infinity237, че то ты злой сегодня такой :) всех ругаешь.

Не злой, а справедливый. :) Просто оставить копирайты - это тот минимум, который может сделать любой пользователь, тем самым поддержав проект.

По теме:
{extracss} = {htmlvars}, так что код надо вставлять после {htmlvars}. Остальное должно работать и с 0.9.1, если не заработает пишите будем думать вместе.

Herm · 2009-12-11 22:05:51

Я попробовал поддержать проект, копирайт поставил!) Дада, я вот только что сам понял, что {htmlvars} таже вещь, что и {extracss"}. Потому что по умолчанию в шаблоне была эта строка, я посмотрел. Но я ее по неопытности удалил, потому что она вылезала сверху шапки сайта. Сейчас заменил ее на {extracss}, она встала на место похоже, но работать все равно не хочет скрипт. Еще так интересно, зашел на страничку Сида, с пспфакс(мой любимый сайт!), посмотрел его пример работы скрипта:

<a href="http://pspfaqs.ru/uploads/images/default/rabochii_stol.jpg" onclick="return hs.expand (this)" class="highslide"><img src="http://pspfaqs.ru/uploads/images/default/thumb/rabochii_stol.jpg" class="nimg" border="0" alt="rabochii_stol.jpg (1.67 Kb)" /></a>

У меня почему то при вставке изображения превью с помощью админки, код такой :

[url=http://kempo-ekb.ru/uploads/images/default/nguenvan_duc.jpg" target="_blank][img="http://kempo-ekb.ru/uploads/images/default/thumb/nguenvan_duc.jpg" border="0" align=""]nguenvan_duc.jpg (56.27 Kb)[/img][/url]

Может быть это как то связано... потому что при вставке кода Сида на мою страницу, для проверки, все работает!

Отредактировано Herm (2009-12-11 22:06:33)

infinity237 · 2009-12-11 22:10:23

1. Какую версию NGCMS вы используете?
2. Как давно вы скачивали шаблон st05? (Просто 8.11.2009 он был обновлён под 0.9.1 версию CMS)
3. pspfaqs.ru - это уже не NGCMS, а DLE, так что варианты реализации могут быть разными.
4. Вы точно сделали всё что требуется по инструкции? (В частности пункт 4)

Отредактировано infinity237 (2009-12-11 22:11:54)

Herm · 2009-12-11 22:34:52

1) Версия 0.9.0
2) Шаблон давно, но вроде подходит.
4) Перепроверил, да, давайте на ты, мне так гораздо удобней и уютней.

Вот файл parse.class.php, точнее нужный отрывок:

				foreach ($keys as $kn => $kv) {
					switch ($kn) {
						case 'class':
						case 'target':
							$v = str_replace(array(ord(0), ord(9), ord(10), ord(13), ' ', "'", "\"", ";", ":", '<', '>', '&'),'',$kv);
							$outkeys [] = $kn.'="'.$v.'"';
							break;
						case 'title':
							$v = str_replace(array("\"", ord(0), ord(9), ord(10), ord(13), ":", '<', '>', '&'),array("'",''),$kv);
							$outkeys [] = $kn.'="'.$v.'"';
							break;
case 'onclick':
$v = str_replace(array(ord(0), ord(9), ord(10), ord(13), "'", "\"", ";", ":", '<', '>', '&'),'',$kv);
$outkeys [] = $kn.'="'.$v.'"';
break;
					}

Вот отрывок images.ini

insert_thumb    =    "[url="{file_url}" onclick="return hs.expand (this)"  class="highslide"][img="{thumb_url}" class="nimg" border="0" align=""]{file_name} ({fsize})[/img][/url]"
insert_file    =    "[img="{file_url}" border="0" width="{image_width}" height="{image_height}" align=""]{file_name} ({fsize})[/img]"
insert_preview	=	"[url="{file_url}" target="_blank"][img="{thumb_url}" border="0" align=""]{file_name} ({fsize})[/img][/url]"

и Все равно не работает

[hr /]
Я уже раздумывал о том, что может быть, скрипт работает только в категориях, то бишь, в новостях, а в статик страницах - нет?

Отредактировано Herm (2009-12-11 22:39:52)

infinity237 · 2009-12-11 23:00:49

Каким образом ты вставляешь изображение в новость? Через загрузчик изображений или вручную через тег img?
Просто если вручную через img то нужно обезательно добавлять для уменьшенной копии код onclick="return hs.expand (this)" class="highslide" или предватительно прописать его в шаблоне engine/skins/default/tpl/quicktags.tpl.

P.S. Если всё сделано по инструкции, то в 0.9.0 должно работать, только что проверил.

Отредактировано infinity237 (2009-12-11 23:04:11)

Herm · 2009-12-12 17:36:55

Всем привет!) Немного продвинулся, кажется, скрипт то сам по себе работает, это можно проследить по ссылке:
http://kempo-ekb.ru/?action=static&altname=resistance

Но чтобы этого достичь, я много шаманил с ссылкой Сида...:

<a href="http://kempo-ekb.ru/uploads/images/default/nguenvan_duc.jpg" onclick="return hs.expand (this)" class="highslide"><img src="http://kempo-ekb.ru/uploads/images/default/thumb/nguenvan_duc.jpg" class="nimg" border="0" alt="rabochii_stol.jpg (1.67 Kb)" /></a>

Автоматически же ниче не работает (это вторая превьюшка на странице). Что может быть не так? я хочу чтобы все работало с одной кнопки.

infinity237 · 2009-12-12 18:58:32

См. сообщение выше, там всё написано.

vl · 2009-12-21 19:21:56

В админке вообще без этого полезнейшего скрипта тяжело просматривать вставляемые картинки. Да и в новостях он прекрасно смотрится

Wolverine · 2009-12-21 21:04:35

По инструкции в шапке в админке hs не появится.

Для этого идем в engine/skins/default/index.php и в переменную $skin_header добавляем

<style type="text/css" media="all">
@import url(http://site.ru/engine/hacks/highslide/highslide.css);
</style> 
<!-- highslide start  -->
<script type="text/javascript" src="http://site.ru/engine/hacks/highslide/highslide.js"></script>
<script type="text/javascript">    
    hs.graphicsDir = 'http://site.ru/engine/hacks/highslide/graphics/';
</script>
<!-- highslide end  -->

Затем идем в engine\includes\inc\file_managment.php и заменяем строчку

$tvars['vars']['view_file']      = '<a target="_blank" href="'.$fileurl.'"><img src="'.skins_url.'/images/insert_image.gif" border="0"/></a>';

на:

$tvars['vars']['view_file']      = '<a href="'.$fileurl.'" class="highslide" onclick="return hs.expand (this)"><img src="'.skins_url.'/images/insert_image.gif" border="0"/></a>';

И

$tvars['vars']['view_thumb']     = $row['preview'] ? '<a target="_blank" href="'.$thumburl.'"><img src="'.skins_url.'/images/insert_thumb.gif" border="0"/></a>' : '';

заменяем на:

$tvars['vars']['view_thumb']     = $row['preview'] ? '<a href="'.$thumburl.'" class="highslide" onclick="return hs.expand (this)"><img src="'.skins_url.'/images/insert_thumb.gif" border="0"/></a>' : '';

ИМХО эту фишку можно и в движок вшить.

P.S. И класс и class="nimg надо заменить на class="highslide"

Отредактировано Wolverine (2009-12-21 21:16:52)

infinity237 · 2009-12-21 21:40:54

Wolverine пишет:

По инструкции в шапке в админке hs не появится.

Спасибо кэп...
В теме вообще то ничего не говорится о админке...

Wolverine пишет:

ИМХО эту фишку можно и в движок вшить.

50кб - ради чего?

Wolverine · 2009-12-21 21:43:48

infinity237 пишет:

Wolverine пишет:
По инструкции в шапке в админке hs не появится.
Спасибо кэп...
В теме вообще то ничего не говорится о админке...

При чем тут тема? Я про:

vl пишет:

В админке вообще без этого полезнейшего скрипта тяжело просматривать вставляемые картинки.

infinity237 пишет:

50кб - ради чего?

удобства ради

Next Generation CMS :: Форум поддержки

Объявление

#1 2009-02-26 01:37:59

[Хак] Highslide JS - модные превьюшки

#2 2009-02-26 01:42:30

Re: [Хак] Highslide JS - модные превьюшки

#3 2009-02-26 01:47:15

Re: [Хак] Highslide JS - модные превьюшки

#4 2009-02-26 01:53:59

Re: [Хак] Highslide JS - модные превьюшки

#5 2009-02-26 01:56:54

Re: [Хак] Highslide JS - модные превьюшки

#6 2009-04-17 03:21:52

Re: [Хак] Highslide JS - модные превьюшки

#7 2009-04-17 10:52:58

Re: [Хак] Highslide JS - модные превьюшки

#8 2009-05-23 19:10:05

Re: [Хак] Highslide JS - модные превьюшки

#9 2009-05-23 20:08:20

Re: [Хак] Highslide JS - модные превьюшки

#10 2009-10-10 21:29:34

Re: [Хак] Highslide JS - модные превьюшки

#11 2009-12-11 20:37:42

Re: [Хак] Highslide JS - модные превьюшки

#12 2009-12-11 21:04:37

Re: [Хак] Highslide JS - модные превьюшки

#13 2009-12-11 21:29:38

Re: [Хак] Highslide JS - модные превьюшки

#14 2009-12-11 21:34:31

Re: [Хак] Highslide JS - модные превьюшки

#15 2009-12-11 21:53:51

Re: [Хак] Highslide JS - модные превьюшки

#16 2009-12-11 22:05:51

Re: [Хак] Highslide JS - модные превьюшки

#17 2009-12-11 22:10:23

Re: [Хак] Highslide JS - модные превьюшки

#18 2009-12-11 22:34:52

Re: [Хак] Highslide JS - модные превьюшки

#19 2009-12-11 23:00:49

Re: [Хак] Highslide JS - модные превьюшки

#20 2009-12-12 17:36:55

Re: [Хак] Highslide JS - модные превьюшки

#21 2009-12-12 18:58:32

Re: [Хак] Highslide JS - модные превьюшки

#22 2009-12-21 19:21:56

Re: [Хак] Highslide JS - модные превьюшки

#23 2009-12-21 21:04:35

Re: [Хак] Highslide JS - модные превьюшки

#24 2009-12-21 21:40:54

Re: [Хак] Highslide JS - модные превьюшки

#25 2009-12-21 21:43:48

Re: [Хак] Highslide JS - модные превьюшки

Подвал форума