Описание: В этой версии - два css файла карусели, легко изменить под свой дизайн.
Возможность без границ, небольшие изображения, изменение размера изображения.
Установка глобального блока SLIDER и более подробное описание этого слайдера в первом виде.
Создадим Информер к примеру как в первой части: [ Новости сайта >>> Материалы >>> Дата добавления материала D >>> Материалы: 15 >>> Колонки: 1 ] Открываем шаблон информера оттуда все удаляем и ставим этот код: Code
<li><a href="$ENTRY_URL$"><img src="$IMG_URL1$" width="80" height="80" title="$TITLE$" /></a></li>
width="80" height="80" >>> где width ширина картинки, где height высота картинки. Теперь хорошая новость в этом виде слайдера удобно на страивается размеры вашего изображения или скриншота, так как слайдер автоматически регулируется под них.
Код слайдера: Code
<link rel="stylesheet" type="text/css" href='http://windchange.my1.ru/css/reset.css' />
<link rel="stylesheet" type="text/css" href='http://windchange.my1.ru/css/elastislide.css2' />
<noscript>
<style>
.es-carousel ul{
display:block;
}
</style>
</noscript>
<!-- Elastislide Carousel -->
<div id="carousel" class="es-carousel-wrapper">
<div class="es-carousel">
<ul>
[b]Ваш информер[/b]
<ul>
</div>
</div>
<!-- End Elastislide Carousel -->
<script type="text/javascript" src='http://windchange.my1.ru/js/jquery.min.js'></script>
<script type="text/javascript" src='http://windchange.my1.ru/js/jquery.easing.1.3.js'></script>
<script type="text/javascript" src='http://windchange.my1.ru/js/jquery.elastislide.js'></script>
<script type="text/javascript">
$('#carousel').elastislide({
minItems : 3,
border : 11
});
</script>
border : 11 >>> ширина обводки, если поставить 0 , изображение будет без нее.
Здесь я ришил показать как легко на страивается дизайн слайдера в css, вот строка из кода:
Code
<link rel="stylesheet" type="text/css" href='http://windchange.my1.ru/css/elastislide.css2' />
Убираем цифру 2 и наш слайдер принимает исходный вид, здесь только два вида, что бы изменить его вам нужно открыть загруженный elastislide.css в файловом менеджере и изменить цвета они имеют вот такое начало #, так же можно изменять кнопки все есть в архиве в папке images.
Глобальные блоки: $GLOBAL_SLIDER$
Примеры:
О скрипте: Изображения - Karrie Nodalo.
Карусель написанная Мэри Лу.
Примечания. Если по каким то причинам у вас не работает $GLOBAL_SLIDER$ попробуйте без него.
Учтите у всех шаблонов свой дизайн и стили менять его нужно, если вы знаете хотя бы базовые знания в HTML (язык разметки WWW документов) и CSS (Cascading Style Sheets) технологиях. Специально для сайта Ucozon.ru, указывайте ссылку на источник материалов.
Дополнительный скриншоты:
Меню сайта
Меню сайта
