Карусель новых пользователей на jquery

+29
2.3K
Для одного из моих проектов, ссылку к сожалению пока дать не могу)), необходим был модуль последних зарегистрированных пользователей, которые бы при помощи jquery пролистывались бы в виде карусели.

В результате моих усилий и изучении новых (первых!) азов программирования получился модуль.
В принципе то что мне нужно было сделать я сделал. Вот пример с минимальной версткой sasovo.net/sitemap

модуль также выводит город и возраст. Посмотреть можете на примере пользователя kkkkk.
Модуль работает как на 1.8 так и на 1.9

Настроек из админки модуль не имеет, да мне они и не нужны были.

Инструкция по установке (она есть в архиве в файле README)

Внимание, инструкция для шаблона по умолчанию _default_, для другого шаблона необходимо исправить пути к скриптам

Для начала скачиваем и распаковываем архив.

1. Из файла SQL.txt копируем текст и выполняем запрос к базе данных.


2. Папки modules и templates целиком копируем в корень сайта.


3. В файле template.php вашего шаблона перед тегом </head> вставляем следующий код.


  1.  
  2.  
  3. <link href="/templates/_default_/skins/tango/skin.css" rel="stylesheet" type="text/css" />
  4.  
  5.  
  6. <script src="/templates/_default_/lib/jquery-1.4.2.min.js" type="text/javascript"></script>
  7.  
  8. <script src="/templates/_default_/lib/jquery.jcarousel.min.js" type="text/javascript"></script>
  9.  
  10.  
  11.  
  12. <script type="text/javascript">
  13.  
  14.  
  15.  
  16. function mycarousel_initCallback(carousel)
  17. {
  18.  
  19. // Disable autoscrolling if the user clicks the prev or next button.
  20.  
  21.  
  22. carousel.buttonNext.bind('click', function() {
  23.  
  24. carousel.startAuto(0);
  25.  
  26. });
  27.  
  28.  
  29.  
  30. carousel.buttonPrev.bind('click', function() {
  31.  
  32. carousel.startAuto(0);
  33.  
  34. });
  35.  
  36.  
  37.  
  38. // Pause autoscrolling if the user moves with the cursor over the clip.
  39.  
  40.  
  41. carousel.clip.hover(function() {
  42.  
  43. carousel.stopAuto();
  44. },
  45. function() {
  46.  
  47. carousel.startAuto();
  48.  
  49. });
  50.  
  51. };
  52.  
  53.  
  54.  
  55. jQuery(document).ready(function() {
  56.  
  57. jQuery('#mycarousel').jcarousel({
  58.  
  59. auto: 2,
  60.  
  61. wrap: 'circular',
  62.  
  63. initCallback: mycarousel_initCallback
  64.  
  65. });
  66.  
  67. });
  68.  
  69.  
  70.  
  71. </script>

4. Заходим в админку, находим модуль Новые регистрации и отображаем его там, где нужно.


Собственно сам архив — СКАЧАТЬ
+7
Rossoman Rossoman 13 лет назад #
Я думаю через несколько дней наверное еще пару модулей появятся. Может пригодятся кому. А вообще в планах разработка компонента голосований, не модуль как есть, а именно компонент.
+3
lezginka.ru lezginka.ru 13 лет назад #
+
Rossoman ,а может компонент "викторины" ;)
+4
Rossoman Rossoman 13 лет назад #
Ну я примерно это и имел ввиду)
+2
lezginka.ru lezginka.ru 13 лет назад #
я готов даже готов купить , если цена не кусается :)
-1
Алексей Т Алексей Т 13 лет назад #
я тоже готов купить...
+3
Rossoman Rossoman 13 лет назад #
Может тогда есть смысл ТЗ сформировать?
+2
lezginka.ru lezginka.ru 13 лет назад #
готов по-участвовать в тз
+2
lezginka.ru lezginka.ru 13 лет назад #
может на обсуждение вынести ТЗ ?
-1
Алексей Т Алексей Т 13 лет назад #
Выноси я поддержу и народ подтянется
+1
lezginka.ru lezginka.ru 13 лет назад #
BilarИuss , я в личку скинул
0
energy74 energy74 13 лет назад #
Поставил, работает все отлично, но почему-то разворотило модуль рейтинг пользователей. увеличились аватары, текст уехал вправо. подскажите как можно это исправит
0
Rossoman Rossoman 13 лет назад #
У меня все нормально http://sasovo.net/sitemap
Дайте ссылку посмотреть
+2
lezginka.ru lezginka.ru 13 лет назад #
не увидел стрелок слева-справа
+2
Rossoman Rossoman 13 лет назад #
Стрелки были, но я их удалил за ненадобностью в моем проекте. Если очень нужно, то впринципе можно их вернуть.
+2
Rossoman Rossoman 13 лет назад #
Стрелки вернул. Осталось их только отверстать под свои нужды. Чтобы отображались стрелки, нужно в файле skin.css в папке /skins/tango (в этой же папке и картинки стрелок) в самый конец добавить эти стили
Код PHP:
/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 43px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
    left: 5px;
    right: auto;
    background-image: url(prev-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 43px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
    left: auto;
    right: 5px;
    background-image: url(next-horizontal.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

/**
 *  Vertical Buttons
 */
.jcarousel-skin-tango .jcarousel-next-vertical {
    position: absolute;
    bottom: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-next-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-next-disabled-vertical,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical {
    position: absolute;
    top: 5px;
    left: 43px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-vertical.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:hover {
    background-position: 0 -32px;
}

.jcarousel-skin-tango .jcarousel-prev-vertical:active {
    background-position: 0 -64px;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-vertical,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-vertical:active {
    cursor: default;
    background-position: 0 -96px;
}
На примере тоже обновил, стрелки сейчас есть, но только без нужного оформления и на картинки наезжает, но это уже дело в верстке...
+1
Михаил Михаил 13 лет назад #
отлично то что нужно
+1
imprint imprint 13 лет назад #
Прикольная штука, но с табами в профиле конфликт...
+1
Rossoman Rossoman 13 лет назад #
Странно только что проверил на своем сайте, у меня нет никакого конфликта. Все нормально работает
+1
Edik_Salonikski Edik_Salonikski 13 лет назад #
да и у меня конфликт с табами.в профиле
+1
Edik_Salonikski Edik_Salonikski 13 лет назад #
не только табы но и лента в профиле слетает!!
+1
Rossoman Rossoman 13 лет назад #
Поставил 1.9 с нуля на девфолтном шаблоне действительно происходит конфликт с этим
<script src="/templates/_default_/lib/jquery-1.4.2.min.js" type="text/javascript"></script>

Как разберусь скажу...
+1
Rossoman Rossoman 13 лет назад #
Кстати попробуйте просто удалить эту строку, у меня и без нее работает!!!
+1
Rossoman Rossoman 13 лет назад #
И соотв. никакого конфликта не происходит
+1
Edik_Salonikski Edik_Salonikski 13 лет назад #
все отлично убрал строку .все отлично работает.спасибо!!!
+1
imprint imprint 13 лет назад #
вопрос....где указывать количество объектов?
+1
Rossoman Rossoman 13 лет назад #
Только в БД. newscount: 10
Соответственно число это количество объектов для отображения. Я делал модуль для своего проекта и мне настройки не нужны были, поэтому все просто. Может если время будет прикручу настройки к модулю, но пока я занят другим модулем интересным, который тоже на днях выложу, может даже сегодня.
+1
imprint imprint 13 лет назад #
окей....понял....спасибо....+++++
+1
Rossoman Rossoman 13 лет назад #
Этот вариант будет выводить больше пользователей в карусели. Но число отображаемых одновременно остается прежним. Что бы изменить число отображаемых, то для этого достаточно всего лишь изменить ширину модуля.
+1
джин джин 13 лет назад #
+
+1
imprint imprint 13 лет назад #
а пользователь после регистрации сразу не попадает в карусель? потому что человек зарегестрировался 20 минут назад...его ещё нет в карусели....а человек который 4 часа назад зарегился...есть...
0
Zau4man Zau4man 13 лет назад #
Возможно включено кэширование модуля? и человек попадает в модуль после обновления кэша, что логично...
+1
Rossoman Rossoman 13 лет назад #
Дело было не в кешировании. Поправил файл module.php, теперь все работает, сейчас обновлю архив. Кому не хочется качать архив, ниже код. Его нужно заменить целиком на код в файле module.php
Код PHP:
<?php

    function mod_newreg($module_id){
        $inCore = cmsCore::getInstance();
        $inDB = cmsDatabase::getInstance();
        global $_LANG;

		$cfg = $inCore->loadModuleConfig($module_id);

		$sql = "SELECT u.*, p.imageurl, p.city, birthdate,(YEAR(CURRENT_DATE)-YEAR(birthdate))-(RIGHT(CURRENT_DATE,5)<RIGHT(birthdate,5))AS age 
		FROM cms_users u
		LEFT JOIN cms_user_profiles p ON p.user_id = u.id
		WHERE u.is_deleted = 0 AND u.is_locked=0
		ORDER BY u.regdate DESC
		LIMIT ".$cfg['newscount']."
		";	
		
		$result = $inDB->query($sql) ;
		

		
		$is_last_reg = false;
		
		
		
		if ($inDB->num_rows($result)){	
			
			$is_last_reg = true;
			$usrs = array();

			
			if ($cfg['view_type']=='table' || $cfg['view_type']=='hr_table'){
				if (!function_exists('usrImageNOdb')){ //if not included earlier
				include_once(PATH.'/components/users/includes/usercore.php');
				}	
				while($usr = $inDB->fetch_assoc($result)){
					$usr['avatar'] = usrImageNOdb($usr['id'], 'small', $usr['imageurl'], $usr['is_deleted']);
					$usrs[] = $usr;
					

					
				}
			}
			
			if ($cfg['view_type']=='list'){
				$total = $inDB->num_rows($result);
				while($usr = $inDB->fetch_assoc($result)){				
					$usrs[] = $usr;
				}
				$total_all = $inDB->rows_count('cms_users', 'is_deleted=0 AND is_locked=0');
				}
			}
			
		
		
		$smarty = $inCore->initSmarty('modules', 'mod_newreg.tpl');			
		$smarty->assign('usrs', $usrs);
		$smarty->assign('cfg', $cfg);
		if ($cfg['view_type']=='list'){
			$smarty->assign('total', $total);
			$smarty->assign('total_all', $total_all);
		}
		$smarty->assign('is_last_reg', $is_last_reg);
		$smarty->display('mod_newreg.tpl');	
				
		return true;
	
	}
?>

Еще от автора

Компонент Вопросы и Ответы.
P.S. Теперь приобрести компонент можно в автоматическом режиме. Способы оплаты различные.
Компонент Вопросы и Ответы
Компонент предназначенный для реализации на сайте сервиса вопросов и ответов.
Компонент Вопросы и ответы FREE - ICMS2
Представляю Вашему вниманию компонент вопросов и ответов. Данный компонент является бесплатным и доступен каждому для скачивания.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.