Четверг, 28.03.2024, 15:42
RR - StUdIo___Добро Пожаловать Шамкир Гес___StUdIo...RR
Гипер-Софт
Главная Регистрация Вход
Приветствую Вас, гости · RSS
SamirMM Studio"RR" WWW.GES.MOY.SU
  
  Ключи и пин-коды
FIFA, Steam: случайные, Counter-Strike, Playstation Network, Hearthstone: Heroes of Warcraft, World of Warcraft, Xbox LIVE (Microsoft Points), Prepaid Credit Card, Far Cry, Assassin´s Creed, Diablo 3, Middle-earth: Shadow of Mordor, ...
  Электронные книги
Контрольные работы, Музыка, ноты, тексты песен, В помощь студенту, Фэнтази, Физика, История, Государство и право, Математика, Магия, оккультизм, мистика, Творческие личности, Рукоделие, Экономика, ...
  Цифровые товары
Игровые аккаунты, Аккаунты PSN, Аккаунты Xbox, iTunes & App Store, Telonko.ru, Приглашения /инвайты, Разное, Skype-аккаунты, Видео и аудиокурсы, уроки, Google Play, Анонимные прокси, Базы данных, ...
  Программное обеспечение
Разблокировка телефонов, Антивирусы, Принтеры, Программы > MMORPG, Программы для сотовых телефонов, Шифрование, Windows, Спортивные, SEO скрипты, Советники, Стратегии, Mногофункциональные утилиты, ...
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: ges  
форум для всех » Все для web мастера » Скрипты для "UCOZ" » Оформление результатов поиска картинками-превью. Для юКоз (Тут будет переделка, и подробно описание скрипта шаг за шаг)
Оформление результатов поиска картинками-превью. Для юКоз
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"
 
форум для всех » Все для web мастера » Скрипты для "UCOZ" » Оформление результатов поиска картинками-превью. Для юКоз (Тут будет переделка, и подробно описание скрипта шаг за шаг)
  • Страница 1 из 1
  • 1
Поиск:

© GES.MOY.SU 2007-2024 . Администрация не несёт ответственности за содержащие файлы на портале.   
Все материалы на сайте принадлежат исключительно их владельцам! 
Сайт оптимизирован для просмотра с разрешением более 1024x768, браузером FireFox или Opera.
 Разрешение вашего экрана : Ваш браузер: -
<< Сайт зарегистрирован в домене >>