| uSefuL | Offline Дата: Вт, 20.12.2011, 20:39 | Сообщение # 1 |
Специалист Iucoz.Ru
Пользователь
Постов: 33 |
 |
| Ну... не то что бы он не будет работать без информера, ヅ, просто ориентировка этого поста будет направлена именно под скрипт слайдера плюс информер.За основу - взял плагин «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>
Где:
Code «?if($CATEGORY_NAME$)?» - проверяем, есть ли у данной новости категория, и, если есть - записываем её в титле..
«?substr($TITLE$,0,25)?» - ограничиваем количество символов в названии новости. В данном случае - 25. От «0», количеством «25».
«?if($IMG_SMALL_URL1$)?» - Проверяем наличие маленькой картинки, если есть - выводим в новость. Если нет («?else?»), проверяем наличие «большой» («?if($IMG_URL1$)?), если есть большая - выводим, если нет - ничего не делаем («?endif?»«?endif?»)
«?if($CATEGORY_NAME$)?»<span class="inf"> - проверяем наличие категории, и, если есть, выводим ссылку в неё, которую тоже ограничиваем в количестве символов («?substr($CATEGORY_NAME$,0,25)?»).
писал(а):
Не забываем, при копировании кода, заменять « на < и вот это » на вот это > ... Движок парсит «?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>
Ну и, наконец, сам скрипт.
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>
Остановлюсь на некоторых моментах:
.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». Должна находится ниже блока.
Если на странице больше одного блока со слайд-контентом - у каждого из них должны быть оригинальные ID !!!
У каждого блока - свой.
Например:
Code ul#newsCont1 и ul#newsCont2 и так далее.
Соответственно к каждому - своя функция вызова.
Например:
К первому
<script type="text/javascript">
$("ul#newsCont1").cycleThru({delay:6000});
</script>
и ко второму
<script type="text/javascript">
$("ul#newsCont2").cycleThru({delay:6000});
</script>
Если все сделано более-мене правильно, должно́ получится что-то вроде вот этого ...
|
|
|
|
