ges | Дата: Суббота, 03.03.2012, 18:56 | Сообщение # 1 |
Administrator
Группа: Администраторы
Сообщений: 297
Статус: Offline
| И так начнем сначала от кого и из чего все это произошло!
Вот у меня сайт StudioRR с видео роликами и онлайн тв Я тут как то начал сделать дизайн по каждый модулю, и решил сделать результат поиск видео материала с картинками.
Но тут такой небольшая проблема !? я тогда про Java script не чего не понимал.
Решил искать скрипта для вывода результат поиска с картинками.
После долгого поиска нашел скрипт в сайте http://likbezz.ru с называнием <<Оформление результатов поиска картинками-привью. Для юКоз>>
Но тут стоял скрипт который адаптирован под стандартный дизайн.
Quote Что же делать это скрипт на мой шаблон не подходит, и я про скриптах не очень разбираюсь. Написал в форуме автору скрипта LIKBEZZ-у чтоб помог меня как работает его скрипт (хотя он написал по подробнее изначально этого темы скрипта!) Но не для меня для профессионалов! Я благодарен Likbezz-у чтоб помог меня разобраться как все это переписать под не стандартный дизайн !
И так перейдем в самый важному делу.
Вот скрипт который стоял в likbezz.ru под стандартный шаблон UCOZ, И его пошаговая объяснение.
Автор пишет !
Как и всегда, у меня есть заготовленные шаблоны стандартных функций и подобного - дабы не вбивать каждый раз одно и тоже ... здесь - узнаём о готовности документа, то есть о том, что его объектная модель готова к использованию, обработке скриптом. Не скажу, что это - самая правильная трактовка - зато понятно.... ヅ прим. автора
Javascript Code <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 <script type="text/javascript"> $(document).ready(function(){ // Start DocumentReady $('#searchText table.eBlock div.eTitle a').each(function(){ /* Вот здесь будем обрабатывать ответ */ }); // End DocumentReady }); </script>
Quote Где: #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 });
Quote Где: el=$(this) - назначаем текущей «$(this)» ссылке - имя/псевдоним «el» $this=el.parents('table.eBlock') - объявляем переменную «$this» и определяем её, как родитель «el», то есть - вверх по иерархии от «el» до «table.eBlock»
Удаляем лишние модули из поиска по ним картинок, точнее - прописываем те, в которых будем производить поиск. Делается это достаточно просто, всего навсего - проверяем ссылки, которые обрабатываем, на наличие ключевого слова, в данном случае имени модуля. Надеюсь у вас категории/разделы/страницы не имеют в ссылке этих сочетаний ... ヅ Иначе - придётся фильтровать немного по-другому .... И, если находим, совершаем запрос на страницу с 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 });
Quote Где: 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'));
Quote Где: $this.find('div.eMessage') - находим куда будем вставлять элемент. $('').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-файл и подключать. Это уже на ваш выбор.... ヅ. Результат, точнее живую версию скрипта можно посмотреть и опробовать вот тут.
Для тех, кому всё это не интересно.
Идём в ПУ » Управление дизайном » Поиск по сайту » Страница поиска, заменяем оператор $BODY$ на:
Code <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 <div id="searchText">$BODY$</div> <script type="text/javascript" src="http://studiorr.ucoz.ru/js/SEARCH/searchImg.js"></script>
Скрипт скачиваем себе, меняем ссылку.
Обсудить что-то конкретное и/или задать более подробные вопросы по теме, можно на форуме, в теме: Оформление результатов поиска картинками-превью. Тема для подробных/иных вопросов по материалу. Обсуждения ... (если не устраивает - создайте свою тему) или - в комментариях.
Прежде чем задать вопрос Администратору подумайте вопрос о чем? Администраторы вопросах не отвечает только создает тему! Вопросы долько в том случай о том вопрос будет про Студии "RR"
|
|
| |
ges | Дата: Воскресенье, 04.03.2012, 04:31 | Сообщение # 2 |
Administrator
Группа: Администраторы
Сообщений: 297
Статус: Offline
| Теперь немного о теории
Скреншот
То что все вы видите из начало темы все под стандартный шаблон юкоза (UCOZ). Если у вас шаблон взято с интернета и не подходить в стандарта юкоз, (UCOZ) тогда это скрипт первый версии к вашем шаблону не подойдет, вам нужно скрипт второй версии с обновленными мною SamirMM и по шаговая объяснением!
(А если вы сами знаете еще лучшие решение тогда дела с вами, а если нет, или что то не понятно напишите только по теме!)
И так начнем с самого скрипта что он делает,что где чего ищет!
Вот скрипт который не стандартный шаблон переделанный мною с помощью Likbezz
Code <script type="text/javascript"> $('#searchText div.eBlock h3.eTitle a').each(function(){ var c=$(this),cont=c.parents('div.eBlock:eq(0)').find('.clip'),url=this.href; if(/load|publ|blog|board|forum|stuff|gb|dir|photo|news/i.test(url.toLowerCase())){ $.get(url,{},function(a){ var b=$(a).find('.eMessage img:eq(0)')||$(a).find('.eTitle img:eq(0)')||$(a).find('.posttdMessage img:eq(0)'),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>
Что в этом скрипте?
searchText это класс как автор написал, для ускорение скрипта принимается вокруг оператора $BODY$ С таким способам
Code <div id="searchText">$BODY$</div>
что она дает ?
это id="searchText" скрипту говорить что куда именно загрузить полученный результат, скрипт то так так знает куда загрузить! но мы все равно как говорили ускоряем работы скрипта.
в этой строке
Code $('#searchText div.eBlock h3.eTitle a').each
Указанные классы div.eBlock и h3.eTitle
который стоящие в модуле поиска, вид материала в этом коде выделенном красным синим и зеленным цветам
Стандартный дизайн! вид материала модуль поиска <.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$ <.div class="eMessage" style="text-align:left;clear:both;padding-top:2px;padding-bottom:2px;">$MESSAGE$ <.div class="eDetails" style="clear:both;">$ENTRY_DEPTH$ - $SAVING_DATE$<./div><./td><./tr><./table><.br />
Если у вас не стандартный шаблон! значит надо переделать строки или перерисовать под свой класс
Как это делаем! чтоб не путаться.
У нас есть в модуле страница поиска вид материала начало контейнера начинающие с классам <.table class="eBlock"> если она стоит у вас там не трогаем, а если у вас тут какой не будь другой контейнер например <.span class="класс который с вашем шаблоном "> или какой то с тегам div тут не чего не меняя просто добавляем наш класс который есть в скрипте в этой строке выделено жирными шрифтам
$('#searchText div.eBlock h3.eTitle a').each
вот таким способам <.span class="класс который с вашем шаблоном eBlock ">
у нас получается в одном строке 2 разных класса 1 к вашему шаблону и другой к нашем скрипта.
обратите внимание!
у нас в скрипте в этой строке класс применен в тег DIV если у вас другой тег например <.span class="eBlock"> <.a class="eBlock"> <.div class="eBlock"> <.ul class="eBlock"> и другие
в этой строке выделенным красным цветом меняем это тег на свой
$('#searchText div.eBlock h3.eTitle a').each
Класс 2 из строки
$('#searchText div.eBlock h3.eTitle a').each С называнием h3.eTitle
Это класс в том же модуле страница поиска вид материала
h3.eTitle тоже может быт находится не h3
примерно вот так как и div.eBlock теге как и он у вас есть в не стандартным шаблоне. если окружаешим оператора $TITLE$ есть класс с таким же способам добавляем наш класс eTitle
варианты может быт вот так. <.div class="ваш класс в шаблоне eTitle"> $TITLE$<./div> <.span class="ваш класс в шаблоне eTitle">$TITLE$<./span> <.p class="ваш класс в шаблоне eTitle">$TITLE$<./p> <.a class="ваш класс в шаблоне eTitle">$TITLE$<./a> а также может быт другие теги
тоже самое в этом строке тег h3 меняем на свой $('#searchText div.eBlock h3.eTitle a').each
Объяснения тег и класса h3.eTitle
Что же нам дает класс eTitle ? eTitle класс определитель называние материала, и наш скрипт читает от него информации с помощью определенного ID ом который задается при добавление материала, для вывода по отдельности на вид материала каждого модуля. и скрипт посылают запрос, для проверки поисковые фразы есть ли материал для вывода на страницу в этих модулях с фото.
Строка для вывода фото в определенный тег <.><.>
как это происходить ?
в этой строке выделенными красными и синими цветом
var c=$(this),cont=c.parents('div.eBlock:eq(0)').find('.clip')
выводится найденное фото (если есть)
Класс div.eBlock говорит скрипту что да провальное место нахождение, то есть правильно попали куда надо!
Тут тоже самое тег div меняем на свой как и ране говорили об этом.
Потом следующий класс .clip который внутри будет находится наше фото
примерно вот так где вы хотите видеть фото.
Варианты!
<.div class="clip">Фото будет здесь <./div> <.span class="clip">Фото будет здесь<./span> <.a class="clip"><./a> эту тег лучший не использовать плохой эффект выдает . <.p class="clip">Фото будет здесь<./p> <.ul class="clip">Фото будет здесь<./ul>
Наверно вы меня поняли! скрипт загружает найденное фото где написано "Фото будет здесь"
Немного по подробнее .
вот как вы видите здесь перед классом clip не стоит определенный тег
почему это так?
потому что мы говорим скрипту что, может быт у нас разные теги пример div,span,p,a,ul,il, и.т.д и чтоб скрипт не путался, где же это тег .
Если она задано нами вот так <.span class="clip">Фото будет здесь<./span>
а в скрипте указанно вот так
var c=$(this),cont=c.parents('div.eBlock:eq(0)').find('div.clip')
Далее мы будем посмотреть строку чтоб именно с какого модулях надо искать фото
Строка поиска по модулю!
url=this.href; if(/load|publ|blog|board|forum|stuff|gb|dir|photo|news/i.test(url.toLowerCase()))
Вот здесь как вам известно указанно наши модули
load|publ|blog|board|forum|stuff|gb|dir|photo|news
Если вы не хотите чтоб какой то из них не выводил фото, можете удалять имя модуля вот таким способам
load|publ|blog|forum|dir|photo|news
помните каждая строка разделяется вот так |blog|
Строка для GET запроса для поиска где именно нам надо искать фото !
$.get(url,{},function(a){ var b=$(a).find('.eMessage img:eq(0)')||$(a).find('.eTitle img:eq(0)')||$(a).find('.posttdMessage img:eq(0)'),src=null;
Обратите внимание в важном методы!
Теги выделенном красным , синим , и зеленным цветом, который мы говорим скрипту что, где именно находится наш фото
В портативном случай скрипт найдет первую фото, и будет выводит в результата с определенным $TITLE$ тогда у вас получится << Имя материала "Боевик">> а фото будет от материала << Мультики >>
По подробнее !
Мы задавали скрипте классы .eMessage .eTitle .posttdMessage без тега это почему ?
Потому что в не стандартным шаблоне может быт разные теги окружавших операторы $MESSAGE$ $TITLE$ $ENTRY_TITLE$
Например у вас в модуле каталог статей, оператор $MESSAGE$
выглядит вот так
<.div class="eMessage">$MESSAGE$<./div>
А в модуле Новости сайта он выглядит
вот так
<.span class="eMessage">$MESSAGE$<./span>
И мы задавали в скрипте с определенными тегами вот так
$.get(url,{},function(a){ var b=$(a).find('div.eMessage img:eq(0)')||$(a).find('div.eTitle img:eq(0)')||$(a).find('div.posttdMessage img:eq(0)'),src=null;
Тогда скрипт найдет фотографии только находящих в тегах DIV CLASS="eMessage" (Если фото есть!)
Метод второй для определение точное фото
Если у вас фото ссылки к материалы выставлен в ниже указанных операторах
$OTHER...5$ $AHUTOR_NAME$ Или какой другой, тогда вам надо округлят этого определенного фото с тегам и классом
вот таким способам
<.div class="eMessage">$OTER1$<./div>
в конце этого строке src=null определяет ест ли фото на вывод или нет? если нет тогда без фото.
Есть способ для вывода места не найденного фото НЕТ СКРЕНШОТА
Это делается вот так
В любом модуле где есть Страница Материалов и Комментариев к нему
тут находим ссылку на фото и сразу под него вставляем
эту <.div class="eMessage eText eTitle"> <.span style="display:none;"><.img src="http://АДРЕС ВАШЕГО САЙТА/ПУТЬ ДО ПАПКУ С НЕТ СКРЕНШТОМ/ССЫЛКА НА ВАШ ФОТО К МАТЕРИАЛУ/И НЕТ СКРЕНШОТ.jpg"><./span><./div>
или вот так <.div class="eMessage eText eTitle"> <.span style="display:none;"><.img src="http://i1.ytimg.com/vi/ССЫЛКА НА ВАШ ФОТО К МАТЕРИАЛУ/default.jpg"><./span> <./div>
Если не получится тогда обращаемся к условным оператором
примерно вот так
<.?if($MESSAGE$)?> <.div class="eMessage eText eTitle">
<.span style="display:none;"> <.img src="ССЫЛКА НА ВАШ ФОТО К МАТЕРИАЛУ"><./span>
<.?else?> <.span style="display:none;"> <.img src="ССЫЛКА НЕТ СКРЕНШОТА"><./span>
<./div> <.?endif?>
Пришли до конца у нас остался стиль нашего фото!
Стока размера фото для вывода полученного фото.
src=b.src;cont.prepend($('').attr('src',src).addClass('preview'));break;
Тут как вы видите выделенным красным цветом , это наш стиль который выводит определенный размер фото, с вашем усмотрением.
Если вас не интересует размер фото тогда просто поменяйте класс review на clip который мы ранее говорили об этом для загрузку фото в <.div class="clip">Фото будет здесь <./div> <.span class="clip">Фото будет здесь<./span> <.a class="clip"><./a> эту тег лучший не использовать плохой эффект выдает . <.p class="clip">Фото будет здесь<./p> <.ul class="clip">Фото будет здесь<./ul>
Вот так src=b[i].src;cont.prepend($('').attr('src',src).addClass('.clip'));break;
И все наслаждаемся с результатом !
Работы скрипта можно смотреть здесь
Еще раз Благодарим [i]Автору скрипту Likbezz
Прежде чем задать вопрос Администратору подумайте вопрос о чем? Администраторы вопросах не отвечает только создает тему! Вопросы долько в том случай о том вопрос будет про Студии "RR"
|
|
| |