Настройка модуля "Доска объявлений" на сайте uCoz
Задача, которую я поставил перед собой на сегодня - привести в порядок и настроить нужным мне образом еще один модуль системы - "Доска объявлений".
Это один из популярных модулей, возможности его использования довольно широки, и ограничиваются только вашей фантазией и знаниями. Мне необходимо будет решить такие подзадачи:
- добавить необходимые мне разделы и категории
- привести внешний вид модуля на всех этапах работы с ним к общему виду всего сайта
- добавить специфические возможности - например, удобный показ фотографий в объявлении, информацию итд.

Начнем с добавления необходимых разделов и категорий. Работа с ними построена в модуле так, что можно создать удобную иерархию объявлений, разделив их на понятные всем группы. Начну с разделов. На первое время я хочу чтобы пользователи могли размещать объявления связанные с автомобилями и запчастями к ним (впоследствии добавятся и другие разделы). Завожу два раздела - "Автомобили" и "Автозапчасти" . Чтобы структура была более понятна, и все объявления не были собраны в одну большую кучу - разделим их на категории. Для раздела "Автомобили" это будут категории "Продам авто", "Куплю авто", "Аренда авто" и "Автоуслуги".
Для раздела "Автозапчасти" это будут категории "Продам запчасти" и "Куплю запчасти". Для начала хватит. Результат моего труда можно увидеть на скриншоте.


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

.blockb {
 border:1px solid #666666;
 padding:2px;
 margin-bottom:1px;
 background:#EFEFEF;
}
Ничего нового в настройке дизайна модуля нет - поэтому подробно на этом останавливаться я не буду. Перейдем к более интересным задачам - в частности, созданию удобных функций для работы с объявлениями. Так как эффективное объявление само по себе предусматривает наличие фотографии предлагаемого товара, сделаем удобную навигацию по фото, прикрепленным пользователем к объявлению. Возможности системы позволяют добавлять до 10 изображений к объявлению - я ограничусь пятью, но сделаю их удобный просмотр непосредственно на странице объявления. В этом мне помогут предоставляемые системой коды, а именно $IMG_URL1..10$, $IMGS_ARRAY_JS$, $IMG_SMALL_URL1..10$. Реализую просмотр таким образом - слева от текста объявления будет размещен блок с изображениями, первое из которых будет показано сразу же, а остальные (если они будут) в виде небольших кликабельных изображений предпросмотра. По нажатию на изображение будет открываться большая картинка - изначально в новом окне, а чуть позднее я реализую это в виде лайтбокса.
Вот что получилось в итоге:

А это javascript, при помощи которого я сделал реализацию этой функции:
<?if($IMG_SMALL_URL1$)?>
 <a href="$IMG_URL1$" id="cur_img_lnk" target="_blank">
<img src="$IMG_SMALL_URL1$" align="left" id="cur_img" class="newsPictures"
 style="margin-bottom:5px;"></a><br>
 <?if($IMGS_ARRAY_JS$)?>
 $IMGS_ARRAY_JS$
 <script type="text/javascript">
 function changeImg(img_id) {
 document.getElementById('cur_img').src=allEntImgs$ID$[img_id][3];
 document.getElementById('cur_img_lnk').href=allEntImgs$ID$[img_id][0];
 }
 var total_img = allEntImgs$ID$.length;
 for (i=0; i<total_img; i++) {
 document.write('<span class="img_list"><a href="#" 
onClick=changeImg("'+i+'")>'+i+'</a></span>');
 }
 </script>
 <?endif?>
 <?endif?>
Хотелось бы задержаться на минутку и еще раз посмотреть на то, как работает код $IMGS_ARRAY_JS$. При добавлении нескольких изображений в объявление, для каждого из них формируется отдельная запись в переменной $IMGS_ARRAY_JS$, первый параметр которой содержит ссылку на изначальный вариант изображения и его размеры, а второй - на уменьшенный вариант для предпросмотра. Используя несложные функции мы разбираем этот массив - и выводим изображения так как нам надо.

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

P.S. Все вышеописанное по-прежнему можно посмотреть по адресу http://autoclub.ck.ua
Эта статья входит в цикл статей блога "Делаем проект с нуля".
Ознакомиться с полным циклом можно по ссылке.
27 комментариев
1 Написал MaxL 30 Сентябрь 2009, 02:35
Я только заметил, что в шапке фото возле 700-ки. Неплохо получилось.
А по сути, как то темно на сайте, хочется больше жизни )
18 Написал ЦарьКиевскойРуси 27 Февраль 2010, 16:30
+100
Цвет на сайте хмурый и тоскливый.
19 Написал ЦарьКиевскойРуси 27 Февраль 2010, 16:32
у автора наверное депресняк)))
2 Написал Хиcп 30 Сентябрь 2009, 10:00
Честно - я уже задолбался ждать нового выхода. И так уже все понятно. Скорее бы Интернет-магазин dry Но я думаю, через год вы до него дойдете dry
5 Написал JackSIM 01 Октябрь 2009, 19:12
Хпис, смысл писать о новом модуле который еще не прошел тестирование и вообще там еще все "сырое"... ???
3 Написал weiss 01 Октябрь 2009, 12:44
Никакого разделения по маркам, типам кузова и т. д. в доске объявлений не будет? Фильтры бы пригодились тут...
8 Написал Styler 02 Октябрь 2009, 13:27
Quote
В следующей статье своего цикла я отдельно остановлюсь на том, как можно успешно создавать и применять различные фильтры данных. В моем случае это будет показано на примере доски объявлений.

Вроде же понятно написано... Вы до конца не дочитали?

avatar
4 Написал Revs 01 Октябрь 2009, 13:35
А это javascript, при помощи которого я сделал реализацию этой функции:

попробовал использовать этот код в разделе Статей, почему то при обновлении показывается та что нада картинка, но при дальнейшей смене картинок идут картинки из предыдущего материала, точнее первого материала. Кто подскажет что не так? http://toyota.ucoz.com/publ/

9 Написал Styler 02 Октябрь 2009, 13:38
У вас пропущен символ # в коде ссылки.
Вот тут:
Quote

<a href="#" onClick=changeImg
11 Написал Arei 06 Октябрь 2009, 01:44
Я хочу улучшить визуальное восприятие своих объявлений. Подскажите (пошагово) куда вставить этот скрипт:
<?if($IMG_SMALL_URL1$)?>
<a href="$IMG_URL1$" id="cur_img_lnk" target="_blank">
<img src="$IMG_SMALL_URL1$" align="left" id="cur_img" class="newsPictures"
style="margin-bottom:5px;"></a><br>
<?if($IMGS_ARRAY_JS$)?>
$IMGS_ARRAY_JS$
<script type="text/javascript">
function changeImg(img_id) {
document.getElementById('cur_img').src=allEntImgs$ID$[img_id][3];
document.getElementById('cur_img_lnk').href=allEntImgs$ID$[img_id][0];
}
var total_img = allEntImgs$ID$.length;
for (i=0; i<total_img; i++) {
document.write('<span class="img_list"><a href="#"
onClick=changeImg("'+i+'")>'+i+'</a></span>');
}
</script>
<?endif?>
<?endif?>

если можно напишите на моё мыло patriot1982@ukr.net

6 Написал NikoGiant 01 Октябрь 2009, 21:44
Расписали красиво....
Но, можно было бы хотя бы немного намекнуть, куда хоть этот код ставить..... wink
avatar
7 Написал Revs 02 Октябрь 2009, 12:17
Цитирую: Реализую просмотр таким образом - слева от текста объявления будет размещен блок с изображениями, первое из которых будет показано сразу же, а остальные (если они будут) в виде небольших кликабельных изображений предпросмотра.

Вроде бы понятно что надо ставить слева от текста, или справа, как вам нравится

10 Написал †Angel† 03 Октябрь 2009, 02:53
Как можно реализовать тоже самое но чтоб при клике на само изображение оно открывалось в Ajax окне?
12 Написал Burgem 24 Октябрь 2009, 14:13
Как использовать "форму добавления комментариев"?
13 Написал diyakov-vlad 13 Декабрь 2009, 20:26
Не хватает раздела "Работа", и в нём категорий: "Вакансии", "Резюме", "Разное по теме".
avatar
14 Написал Сашуля7586 06 Январь 2010, 15:40
Извините что не по теме, но я что то не могу понять, а как удалить сайт??
15 Написал brother_Vladimir 16 Январь 2010, 15:08
также просто как и создать-жмешь удалить сайт,вводишь пару паролей и сайт удалён wacko biggrin
avatar
16 Написал ODESIT 30 Январь 2010, 02:54
Подскажите куда вставить ява скрипт для изминения шаблона обявления???
17 Написал diyakov-vlad 10 Февраль 2010, 14:52
Да, а зачем ссылки на сайты с доски объявлений убрали под жабаскрипт?
1. Я и прочие админы совсем не против прямых ссылок.
2. "Пузо" с моего сайта передаётся с коэффициентом затухания 0,15.
3. "Пузо" с сайта, на который идёт ссылка с моего сайта, передаётся моему сайту с коэффициентом повышения 0,85.
Короче, как не крути, в выигрыше остаётся мой сайт.
Так что, учитывая всё вышеописанное, прошу убрать жабаскрипт, скрывающий ссылки.
20 Написал Admin_Kresh1999 27 Март 2010, 02:56
А как иконку менять сайту я их уже скачал. cry cry cry
22 Написал Velo 11 Апрель 2010, 11:11
переименуй иконку на компе в favicon.ico
с помощью файлового менеджерав панели управления) закачай.
старая favico.ico (базовая uCoz) должна исчезнуть.
avatar
21 Написал makler6004 29 Март 2010, 11:28
Подскажыте пожалуйста как поетапно сделать так,штобы можно было добавлять фотографии в доске обявлений?
23 Написал dust-club 01 Май 2010, 00:55
Да они и сами не знают наверное happy Люди очень надо ну хоть кто нибудь!!!!! Откликнитесь разложите по полочкам!
24 Написал Klimoschka 04 Август 2012, 00:38
Дружище !
Будь любезен,напиши подробней куда устоновить эти коды.

Заранее блогодарен !
avatar
25 Написал loa666 10 Март 2015, 07:12
Как по мне так ерунда, ничего нового нет
avatar
26 Написал loa666 08 Апрель 2015, 15:12
Я вообще все заделал проще вот пример mirpost.ru
avatar
27 Написал loa666 10 Январь 2016, 13:47
Спасибо, ну вот что у меня получилось http://mirpost.ru/ smile
Ваш комментарий