Скажем так:
По просьбам трудящихся ... ヅ ... и прочих ... а также по частым вопросам на эту тему - решил доступно, как мне кажется, описать как и сам скрипт, так и процесс его установки на страницу поиска.
Кто не понял из названия - повторяю - скрипт написан для сайтов, созданных в системе юКоз, хотя, без особых проблем и с начальными знаниями 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(){
});
</script>
Ну и нам, конечно понадобятся некоторые стили: Пропишем стили для картинок-превьюшек, дабы не возвращаться .... Code <style type="text/css">
img.preview{width:100px;height:100px;float:left;margin:3px 7px 3px 0px;display:inline;}
</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(){
$('#searchText table.eBlock div.eTitle a').each(function(){
});
});
</script>
Где:
#searchText table.eBlock div.eTitle a - путь до ссылок, по которым осуществляется поиск.
И объявим переменные, которые нам понадобятся в процессе: Code <script type="text/javascript">
$(document).ready(function(){
$('#searchText table.eBlock div.eTitle a').each(function(){
var el=$(this),$this=el.parents('table.eBlock'),url=el.attr('href');
});
});
Где:
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(){
$('#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){
});
};
});
});
Где:
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(){ $('#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')); }; }); }; }); });
Если вы не очень хорошо ориентируетесь по коду 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.
Источник: скрипт, ucoz, что, цитировать, url, поиска, code, find, скрипт поиска для ucoz, превью, ucoz jquery | 
