Главная » Статьи » Статьи о/про uCoz » Оформление сайтов в uCoz

Оформление результатов поиска картинками-превью. Для юКоз

Скажем так:
По просьбам трудящихся ... ヅ ... и прочих ... а также по частым вопросам на эту тему - решил доступно, как мне кажется, описать как и сам скрипт, так и процесс его установки на страницу поиска.
Кто не понял из названия - повторяю - скрипт написан для сайтов, созданных в системе юКоз, хотя, без особых проблем и с начальными знаниями JScript, может быть переписан практически под любой другой сайт ... естественно - при наличии самого поиска ... ヅ.

Сам скрипт - не сложный.
На красоту и оптимальность не претендует.
Почему? - всё просто - универсальность. Он будет работать без настроек и при соблюдении инструкции - на любом юКоз-сайте. Те, кто и сами неплохо знают скриптовой язык, поняв принцип работы, - оптимизируют его чисто под/для себя, ну а те кто нет ... довольствуются имеющимся ... или повышают свои знания... ヅ


Начнём.

Для правильной, да и вообще, для работы скрипта - нам/вам понадобится подключённая стандартная библиотека jQuery, то есть если вы специально ничего не отключали и у вас сайт на юКоз хостиге, она у вас уже подключена (u.js). Больше ничего подключать не нужно. Всё остальное мы напишем сами.

Суть скрипта проста.
После выдачи результатов - пройтись по всем ссылкам, ссылающимся на страницы поиска, сделать на них запрос и при наличии картинки в контенте, вывести её на страницу с результатами.
Задача и принцип ясен ? ... ヅ

Теперь реализация.

Для начала скажу, что буду использовать стандартный юКозовский шаблон #908 ... То есть вот такой:

Скриншот

Не потому что «нравится» или «удобно» - нет, просто такой стоит и сам шаблон - не имеет принципиального значения.

Для наглядности, и понимания что, для чего, как и зачем, вот исходные данные «вида материалов» страницы поиска (фрагмент) и фрагмент (нужный нам/мне) из шаблона вид «материалов и комментариев к нему».

Вида материалов  (модуль \search\)

Code (Вид материалов)
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="eBlock"><tr><td style="padding:3px;">
<div class="eTitle" style="text-align:left;font-weight:normal"><a href="$ENTRY_URL$">$TITLE$</a></div>
<div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$</div>
<div class="eDetails" style="clear:both;">$ENTRY_DEPTH$
- $SAVING_DATE$</div></td></tr></table><br />

Фрагмент шаблона страницы материалла и комментариев к нему  (любой модуль, в данном случае \news\)

Code (Страница материала и комментариев к нему)
<table border="0" width="100%" cellspacing="1" cellpadding="2" class="eBlock">
<tr><td width="90%"><div class="eTitle"><div style="float:right;font-size:9px;">$ADD_TIME$ $MODER_PANEL$</div><h1>$ENTRY_NAME$</h1></div></td></tr>
<tr><td class="eMessage">$MESSAGE$ <div style="text-align:left;" class="eAttach"><!--<s3172>-->Прикрепления<!--</s>-->: $ATTACHMENTS$</div></td></tr>
<tr><td colspan="2" class="eDetails">
<div style="float:right"></div>
<!--<s3179>-->Категория<!--</s>-->: <a href="$CAT_URL$">$CAT_NAME$</a> |
<!--<s3177>-->Просмотров<!--</s>-->: $READS$ |
<!--<s3178>-->Добавил<!--</s>-->: <a href="$PROFILE_URL$">$USER$</a>
| <!--<s5308>-->Теги<!--</s>-->: $TAGS$
| <!--<s3119>-->Рейтинг<!--</s>-->: <span id="entRating$ID$">$RATING$</span>/<span id="entRated$ID$">$RATED$</span></td></tr>
</table>

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

Code (JScript)
<script type="text/javascript">
$(document).ready(function(){
// Start DocumentReady

// End DocumentReady
});
</script>

Ну и нам, конечно понадобятся некоторые стили:

Пропишем стили для картинок-превьюшек, дабы не возвращаться ....

Code
<style type="text/css">
/* StartStyle */
img.preview{width:100px;height:100px;float:left;margin:3px 7px 3px 0px;display:inline;}
/* EndStyle */
</style>

Думаю и так всё понятно, но на всякий - объясню.
Для картинок, в скрипте, мы зададим класс «preview» - и установим ему ширину и высоту равную 100px, естественно, вы можете установить любые другие атрибуты. Также установим обтекание текстом «float:left» - то есть картинка - слева, текст - справа... и отступы «margin:3px 7px 3px 0px» - то есть 3px - сверху, 7px - справа, 3px - снизу и 0px - слева.
По часовой стрелке, начиная с верху. Применительно ко всем сокращённым записям из четырёх параметров.

 

Для ускорения работы скрипта, так как по идентификатору поиск элемента осуществляется быстрее, заключим все результаты поиска, то есть $BODY$, в див и назначим ему ID. Например «searchText».
Выглядеть в шаблоне должно вот так:

Code
<div id="searchText">$BODY$</div>

И пишем:

Code (JScript)
<script type="text/javascript">
$(document).ready(function(){
// Start DocumentReady
$('#searchText table.eBlock div.eTitle a').each(function(){
/* Вот здесь будем обрабатывать ответ */
});
// End DocumentReady
});
</script>

Где:
#searchText table.eBlock div.eTitle a - путь до ссылок, по которым осуществляется поиск.


И объявим переменные, которые нам понадобятся в процессе:

Code
<script type="text/javascript">
$(document).ready(function(){
// Start DocumentReady
$('#searchText table.eBlock div.eTitle a').each(function(){
var el=$(this),$this=el.parents('table.eBlock'),url=el.attr('href');
/* Вот здесь будем обрабатывать ответ */
});
// End DocumentReady
});

Где:
el=$(this) - назначаем текущей «$(this)» ссылке - имя/псевдоним «el»

$this=el.parents('table.eBlock') - объявляем переменную «$this» и определяем её, как родитель «el», то есть - вверх по иерархии от «el» до «table.eBlock»

url=el.attr('href') - объявляем ещё одну переменную равную значению атрибута «href» элемента «el»


Удаляем лишние модули из поиска по ним картинок, точнее - прописываем те, в которых будем производить поиск.
Делается это достаточно просто, всего навсего - проверяем ссылки, которые обрабатываем, на наличие ключевого слова, в данном случае имени модуля.
Надеюсь у вас категории/разделы/страницы не имеют в ссылке этих сочетаний ... ヅ Иначе - придётся фильтровать немного по-другому ....

И, если находим, совершаем запрос на страницу с URL той ссылки, которую находим в результатах поиска...
Да, на словах - что-то сложновато, на примере - проще.

Пример:

Code
$(document).ready(function(){
// Start DocumentReady
$('#searchText table.eBlock div.eTitle a').each(function(){
var el=$(this),$this=el.parents('table.eBlock'),url=el.attr('href');
if(/load|publ|blog|dir|news/i.test(url.toLowerCase())){
$.get(url,{},function(data){
/* Вот здесь будем обрабатывать ответ */
});
};
});
// End DocumentReady
});

Где:
if(/load|publ|blog|dir|news/i.test(url.toLowerCase())) - «if» - если, «/load|publ|blog|dir|news/» - слова "load и пр." найдены в ссылке,  то совершаем запрос - «$.get» на страницу «url».

«url» - мы объявили ещё в начале скрипта: «url=el.attr('href')» - то есть - ссылка текущего элемента из элементов поиска.


Дальше - обрабатываем результат запроса - ответ.

Для начала - отфильтруем все ответы с материалов, в которых нет картинок ... (у меня таких много ... ) и, заодно объявим ещё одину переменную - «src» - ссылка на первую «img:eq(0)» картинку из поста. И, если она не равна «undefined» - продолжаем выполнение скрипта.

Code
var src=$(data).find('td.eMessage img:eq(0)').attr('src')||'undefined';
if(src!=='undefined'){
/* Вот здесь будем обрабатывать ответ */
};

А вот функция, которая будет создавать картинку, задавать ей параметр «src» и сласс, и вставлять в результат поиска.

Code
$this.find('div.eMessage').prepend($('<img/>').attr('src', src).addClass('preview'));

Где:
$this.find('div.eMessage') - находим куда будем вставлять элемент.
$('<img/>').attr('src', src) - создаём картинку и назначаем атрибут «src» равной переменной «var src» - из результата нашей фильтрации ответа.
.addClass('preview') - назначаем элементу (картинке) класс «preview», для которого писали стили.


Осталось всё собрать воедино ... ヅ

И вот что у нас, у меня и, надеюсь, у вас, получилось .....

Code
$(document).ready(function(){
/*Start DocumentReady*/
$('#searchText table.eBlock div.eTitle a').each(function(){
/*Start each*/
var el=$(this),$this=el.parents('table.eBlock'),url=el.attr('href');
if(/load|publ|blog|dir|news/i.test(url.toLowerCase())){
/*Start if*/
$.get(url,{},function(data){
/*Start get*/
var src=$(data).find('td.eMessage img:eq(0)').attr('src')||'undefined';
if(src!=='undefined'){
/*Start src*/
$this.find('div.eMessage').prepend($('<img/>').attr('src', src).addClass('preview'));
/*End src*/
};
/*End get*/
});
/*End If*/
};
/*End each*/
});
/*End DocumentReady*/
});

Если вы не очень хорошо ориентируетесь по коду JScript, да и просто, для простоты и наглядности, во время написания/разработки - старайтесь подписывать функции во избежании ошибок.
Впоследствии - комментарии можно/нужно удалить.
Кому не интересен сам скрипт, а только результат - вот чистый код:


Code
$(function(){
$('#searchText table.eBlock div.eTitle a').each(function(){
var el=$(this),$this=el.parents('table.eBlock'),url=el.attr('href');
if(/load|publ|blog|dir|news/i.test(url.toLowerCase())){
$.get(url,{},function(data){var src=$(data).find('td.eMessage img:eq(0)').attr('src')||'undefined';
if(src!=='undefined'){$this.find('div.eMessage').prepend($('<img/>').attr('src', src).addClass('preview'));};
});};});
});

В завершении.
Скрип на в шаблон «Страница поиска» - советую вставлять после $BODY$ или вообще, в самом низу шаблона ...
Ещё, так как скрипт обрабатывет ссылки, и на каждой совершает запрос на страницу, на что естественно уходит некоторое время, не выставляйте количество материалов на странице больше 15 - так как это увеличит общее время отклика. А вообще - попробуйте и определите своё оптимальное количество материатов. Опытным путём.

Скрипт можно загнать в отдельный JS-файл и подключать. Это уже на ваш выбор.... ヅ.

Результат, точнее живую версию скрипта можно посмотреть и опробовать вот тут.


Искать советую по слову «фильм» или «детский» - проверял ... ヅ
Ток там материалов мало ... так что - сначала добавьте ... что нибудь, с картинкой ... Для гостей, для добавления открыт только модуль новости.


Для тех, кому всё это не интересно.

Quote (Дуб дубом)
Для таких "деревьев", как я написали бы попроще: вот это ставим перед /(/body) - "КОД", вот это вместо $BODY$ - "Код", а это перед /head - "КОД" Я признателен автору, и понимаю желание показать все в деталях, объяснив каждую функцию, и выбор возможностей. Но я ничего не понял

О, да ... Возможно, вы и правы.

Идём в ПУ » Управление дизайном » Поиск по сайту » Страница поиска, заменяем оператор $BODY$ на:

Code (HTML)
<div id="searchText">$BODY$</div>
<script type="text/javascript">
$('#searchText div.eTitle a').each(function(){var c=$(this),cont=c.parents('td:eq(0)').find('div.eMessage'),url=this.href; if(/load|publ|blog|dir|news/i.test(url.toLowerCase())){ $.get(url,{},function(a){var b=$(a).find('.eMessage img')||$(a).find('.eText img'),src=null; for(var i=0;i<b.length;i++){if(!/ucoz.net/i.test(b[i].src)){ src=b[i].src;cont.prepend($('<img/>').attr('src',src).addClass('preview'));break}}})}; });
</script>


Или на вот это:

Code (HTML)
<div id="searchText">$BODY$</div>
<script type="text/javascript" src="http://likbezz.ru/_source/_js/ext/searchImg.js"></script>

Скрипт скачиваем себе, меняем ссылку.


Обсудить что-то конкретное и/или задать  более подробные вопросы по теме, можно на форуме, в теме: Оформление результатов поиска картинками-превью. Тема для подробных/иных вопросов по материалу. Обсуждения ... (если не устраивает - создайте свою тему) или - в комментариях.


Под нестандартные дизайны скрипт требует корректировки.
Корректировкой скриптов под заказ бесплатно НЕ занимаюсь.

P.S.

Пожелания приветствуются ...
Всем удачи... ヅ
Flesh.

Автор: Likbezz aka Flesh




Источник: скрипт, ucoz, что, цитировать, url, поиска, code, find, скрипт поиска для ucoz, превью, ucoz jquery
Категория: Оформление сайтов в uCoz | Добавил: likbezz (07.08.2010)
Просмотров: 34867 | Комментарии: 46 | Теги: юкоз, скрипты, результ, jQuery, UCOZ, Оформляем, поиск, страницу, JScript, Search
Всего комментариев: 461 2 3 4 »
0  
42  Add [Материал[03.12.2013]

В какой часте кода он должен присутствовать??? Я плохо понимаю в js

в этом коде

<div id="searchText">$BODY$</div>
<script type="text/javascript">
$('#searchText div.eTitle a').each(function(){var c=$(this),cont=c.parents('td:eq(0)').find('div.eMessage'),url=this.href; if(/load|publ|blog|dir|news/i.test(url.toLowerCase())){ $.get(url,{},function(a){var b=$(a).find('.eMessage img')||$(a).find('.eText img'),src=null; for(var i=0;i<b.length;i++){if(!/ucoz.net/i.test(b[i].src)){ src=b[i].src;cont.prepend($('<img/>').attr('src',src).addClass('preview'));break}}})}; });
</script>

Я пробовал по инструкции но не получилось, возможно что то не так сделал из-за незнания js

0  
43  likbezz [Материал[08.12.2013]

Цитата Add
В какой часте кода он должен присутствовать???

На странице материала и комментария к нему

Цитата Add
возможно что то не так сделал из-за незнания js

Возможно у вас просто нестандартный шаблон.
Данный скрипт работает только со стандартными, о чем и написано:
Цитата Add
Под нестандартные дизайны скрипт требует корректировки.

Под поиск по скриншотам - вообще отдельная тема - смотря как они выводятся в материале.

0  
41  Add1 [Материал[02.12.2013]

Мне нужно чтобы скрин выводил из каталога файлов

0  
45  likbezz [Материал[12.07.2015]

Цитата Add1
Мне нужно чтобы скрин выводил из каталога файлов

Со всеми “нужно” жду вот здесь: Платный радел

0  
40  Add [Материал[02.12.2013]

Будет ли скрипт работать screen_url со скриншотами??? Я пробовал сделать но не выходит

0  
46  likbezz [Материал[12.07.2015]

Цитата Add
Будет ли скрипт работать screen_url со скриншотами??? Я пробовал сделать но не выходит

Смотря как представлены скриншоты в материале. Если они выводятся картинками - то да, будет, если иначе - то нет.

0  
39  likbezz [Материал[22.06.2013]

Цитата (Vlad)
Подскажите можно ли мне на него установить поиск как тут написано?

Можно, но отредактировать скрипт под свой шаблон - имена классов изменить, в основном.

0  
37  likbezz [Материал[15.12.2012]

Возможно у вас НЕ стандартный шаблон?

0  
35  Chiffa [Материал[14.11.2012]

Quote (Chiffa)
Здравствуйте, может подскажите что не так?

Вроде шаблон стандартный, а не выходит (http://www.newsallworld7.ru/).


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

0  
36  likbezz [Материал[15.12.2012]
0  
38  Chiffa [Материал[17.12.2012]

Разобрались, правда пришлось менять главную, иначе скрипт не работает (с www), правда проблема не в самом скрипте а в особенностях ucoz

0  
34  Кожемяка [Материал[22.10.2012]

Такой вопрос, если у меня за картинки отвечает не <img> а фильтр (допустим "адрес сайта автора") что поменять в скрипте, чтобы всё заработало, так-то файлы в <img> отоброжаются

0  
33  qwerty [Материал[11.10.2012]

Ой, Likbezz, не надо, я уже нашел решение без скрипта, спасибо тебе за креатив!

0  
32  qwerty [Материал[11.10.2012]

Likbezz, подскажи, а как можно сократить этот скрипт, чтобы функция скрипта была всего одна:

присвоить тэгу img класс preview, чтобы можно было настроить ширину и высоту картинки в поисковой выдаче, если таковая есть. А то просто шаблон у меня нестандартный и "грязный" (в плане мусора много и так сразу и не разберешься что к чему smile

То есть мне не надо, чтобы скрипт вытаскивал img из указанных классов, а просто присвоить для картинки в поисковой выдаче img.preview...

Можно так? Или надо обязательно прописывать весь скрипт с классами?

1-10 11-20 21-30 31-33
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]