Четверг, 14.12.2017, 16:07
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 из 11
Модератор форума: ges 
форум для всех » Все для web мастера » Скрипты для "UCOZ" » Автоматический слайдер контента, новостей, под информер. (Для юКоз (uCoz))
Автоматический слайдер контента, новостей, под информер.
gesДата: Понедельник, 05.03.2012, 14:14 | Сообщение # 1
Administrator
Группа: Администраторы
Сообщений: 297
Статус: Offline
Делаем автоматический слайдер контента, новостей, под информер. Для юКоз (uCoz)



Ну... не то что бы он не будет работать без информера, ヅ,
просто ориентировка этого поста будет направлена именно под скрипт слайдера плюс информер.

За основу - взял плагин «Cycle Through a List» от By Charles Harvey. В сети очень много подобных скриптов, но этот мне понравился своей простотой, лаконичностью и лёгкостью кода. Это не «Featured Content Slider» или «Coda Slider», которые, несомненно, имеют больше настроек и возможностей, но и весят в десятки, если не в сотни, раз больше. Выбор - всегда за вами.
Помните об этом.

В данном скрипте есть: автоматическая смена контента и регулировка/установка времени показа. В данном случае - мне больше ничего не нужно и не вижу смысла в навороченных по функционалу и настройкам более продвинутых фреймворках (Frameworks).

Приступим.
Для работы скрипта, а, следовательно и всего слайдера, нам/вам понадобится подключённая к странице/сайту библиотека jQuery версии не ниже v1.3.2. Как я уже где-то писал, но повторюсь: "Если у вас сайт на хостинге юКоз, и вы не совершали никаких действий по отключению скрипта - он у вас есть, так как подключён по умолчанию.”. Это, тот самый, скрипт «u.js» - который включает в себя эту библиотеку.

Структура блока с контентом.

Наверно вступление опущу, сразу код.
HTML-каркас будующего блока:

Code
<ul class="newsCont" id="newsCont1">
<!--Start(InformerCont)-->
  <!--Здесь будет контент, который будет динамически вставлять информер-->
<!--End(InformerCont)-->
</ul>


Как видно из кода - все просто до невозможности.
В блок, в котором ожидаем показывать контент, просто вставляем ненумерованный список без элементов. Элементы, то есть «li» - будет подставлять информер.

Идем в ПУ (здесь и далее - панель управления сайтом.) Главная » Информеры и создаём информер, например ... ну, давайте - Новости » Материалы в случайном порядке. Вы, естественно, можете выбрать другое.



Теперь создадим содержание для нашего информера.
Выглядеть оно будет примерно вот так:
Шаблон информера.

Code
<li>
<h4><a title="$TITLE$«?if($CATEGORY_NAME$)?» [Категория «$CATEGORY_NAME$»]«?endif?»" href="$ENTRY_URL$">«?substr($TITLE$,0,25)?»...</a></h4>
«?if($IMG_SMALL_URL1$)?»
<img class="prev" style="width:120px;" src="$IMG_SMALL_URL1$" alt="$TITLE$" />«?else?»«?if($IMG_URL1$)?»<img class="prev" style="width:120px;" src="$IMG_URL1$" alt="$TITLE$" />«?endif?»«?endif?»
$MESSAGE$
«?if($CATEGORY_NAME$)?»<span class="inf">[<a href="$CATEGORY_URL$">«?substr($CATEGORY_NAME$,0,25)?»...</a>]</span>«?endif?»
</li>


Вот чистый код (Шаблон информера)


Quote
Где:
«?if($CATEGORY_NAME$)?» - проверяем, есть ли у данной новости категория, и, если есть - записываем её в титле..
«?substr($TITLE$,0,25)?» - ограничиваем количество символов в названии новости. В данном случае - 25. От «0», количеством «25».
«?if($IMG_SMALL_URL1$)?» - Проверяем наличие маленькой картинки, если есть - выводим в новость. Если нет («?else?»), проверяем наличие «большой» («?if($IMG_URL1$)?), если есть большая - выводим, если нет - ничего не делаем («?endif?»«?endif?»)
«?if($CATEGORY_NAME$)?» - проверяем наличие категории, и, если есть, выводим ссылку в неё, которую тоже ограничиваем в количестве символов («?substr($CATEGORY_NAME$,0,25)?»).


Quote
Не забываем, при копировании кода, заменять « на < и вот это » на вот это > ... Движок парсит «?if(....)?» ... ヅ.


Оформлять контент нашего слайдера я буду при помощи CSS, которую затем буду подключать на страницы с информером. Можно прямо из скрипта, или вместе со скриптом. Позже покажу как.
Итак, стили для контента.

Code
<style type="text/css">
/* StartStyle */
ul.newsCont,ul.newsCont li,ul.newsCont *{
font: 11px/1 Verdana,sans-serif; /* прописываем для любых элементов общий фонт. */
list-style:none;
background-image:none;
margin:0; /* убираем все возможные отступы и поля в контенте  */
padding:0;
}
ul.newsCont{
width:200px; /* указываем фиксированную ширину. */
border:1px solid #CCC;
position:relative; /* задаём позиционирование */
overflow:hidden; /* задаём поведение блока при переполнении */
height:200px; /* указываем высоту */
text-align:left;
}
ul.newsCont li{
padding:3px 2px;
opacity:0;
display:none; /* скрываем контент */
position:absolute; /* задаём абсолютное позиционирование, относительно блока контента */
}
ul.newsCont p,ul.newsCont h4{
margin-bottom:3px; /* отступы для заголовков и параграфов */
}
ul.newsCont h4 a{
font: bold 11px/1 Georgia,serif; /* перебиваем значение фонта по умолчанию для ссылок заголовков */
}
ul.newsCont h4:first-letter {
vertical-align:baseline;color:#C03; /* буквица для заголовков */
}
ul.newsCont .inf{
position:absolute; /* задаём позиционирование для блока дополнительной информации */
top:187px;right:1px; /* вычисляется от высоты блока контента */
text-align:right; /* выравнивание текста в блоке */
float:right; /* для оперы ... ヅ */
background:#FFF; /* задаём белый фон, для удобства чтения/восприятия */
font-size:10px;
color:777;
padding:1px 3px 2px; /* задаём поля, для удобства чтения/восприятия */
}
ul.newsCont img.prev{
max-height:120px!important; /* ограничиваем максимальные размеры картинки в контенте. На всякий... */
max-width:120px!important;
border:solid 1px #ddd; /* немного оформления ... */
float:left; /* положение относительно текста - картинка - слева, текст справа ヅ */
margin-right:5px;
padding:3px;
}
/* EndStyle */
</style>


Смотреть чистый код (CSS информера)



Ну и, наконец, сам скрипт.

Code
(function($){
$.cycleThru={defaults:{delay:3000}};
$.fn.extend({cycleThru:function(config){
var config=$.extend({},$.cycleThru.defaults,config);
return this.each(function(){
var delay = config.delay;
var ulid = $(this).attr("id");
var el=0;
var elmax=$(this).children("li").hide().length-1;
function cyclee(){
$("ul#"+ulid+" li:eq("+el+")").show()
.animate({"opacity":"1"}, 400)
.animate({"opacity":"1"}, delay)
.animate({"opacity":"0"}, 400,function(){
(el==elmax)?el=0:el++;
cyclee();
});
};
cyclee();
})
}
})
})(jQuery);


Смотреть чистый код скрипта



Скрипт вызова функции:

Code
<script type="text/javascript">
$("ul#newsCont1").cycleThru({delay:6000});
</script>


Quote
Остановлюсь на некоторых моментах:
.animate({"opacity":"1"} ,400) - переход от полной прозрачности (opacity:0) до полной непрозрачности (opacity:1) за промежуток времени 400 миллисекунд. Можно прописать свои значения. Влияет на скорость/время отображения скрытого контента. Смены.
.animate({"opacity":"1"}, delay) - тайм-аут - указываем при вызове (.cycleThru({delay:6000})). Значения в миллисекундах. Влияет на время отображения контента.
.animate({"opacity":"0"}, 400 - переход от полной непрозрачности (opacity:1) до полной прозрачности (opacity:0) - скрытие. Число «400» - влияет на скорость/время скрытия контента.
$("ul#newsCont1").cycleThru({delay:6000}); - вызов функции. Передаём значения таймингов показа (delay:6000) и ID блока контента к которому применяем функцию. В данном вызове - к блоку с идентификатором «newsCont1». Должна находится ниже блока.


Quote
Если на странице больше одного блока со слайд-контентом - у каждого из них должны быть оригинальные ID !!!
У каждого блока - свой.
Например:
ul#newsCont1 и ul#newsCont2 и так далее.
Соответственно к каждому - своя функция вызова.
Например:
К первому

и ко второму


Если все сделано более-мене правильно, должно́ получится что-то вроде вот этого ... ヅ



Ну, и, наверное пример сто́ит привести .... ヅ ... Пример .... (откроется в новом окне ... )
Вопросы по теме - ниже, в комментариях ...
Сам скрипт. (на всякий....)

Всем удачи... ヅ
Flesh.

Автор: Likbezz a.k.a. Flesh


Прежде чем задать вопрос Администратору подумайте вопрос о чем?
Администраторы вопросах не отвечает только создает тему!
Вопросы долько в том случай о том вопрос будет про
Студии "RR"
 
форум для всех » Все для web мастера » Скрипты для "UCOZ" » Автоматический слайдер контента, новостей, под информер. (Для юКоз (uCoz))
Страница 1 из 11
Поиск:

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