Всем доброго дня или ночи, это уж кого как вставило.
Сегодня, собравшись с мыслями и отбросив все сомнения, мы вместе с вами уважаемые читатели нашего блога, рассмотрим интересное и популярное решение по выводу изображений на страницах сайта в виде “слайдера”, иначе, доведенного до ума, хорошо всем знакомого, ротатора баннеров.
Достопочтенные буржуины например, давно и плотно используют слайдеры на своих блогах, не только в качестве галерей, но и как способ анонсирования статей на главных страницах. Среди наших блогеров “слайдеры” так же приобретают все большую популярность, все чаще можно увидеть использование шаблонов и тем со встроенными ротаторами изображений. Как все это устроено и работает, мы и попробуем разобраться, без лишней суеты, как говориться: с чувством, с толком, с расстановкой.
Для того что бы слайдер заработал, в первую очередь нам необходимо подключить к документу html дополнительные javascript, а точнее плагины jQuery, которые вы найдете в папке с исходниками, для этого перед тегом /head следует прописать следующее:
Затем нужно определиться с местом где будет выводиться сам слайдер, в моем примере вывод ротатора настроен сразу под шапкой и меню точно посередине, так как в нашем случае слайдер широкоформатный и занимает всю ширину фиксированного шаблона размером 960px. Не стал особо мудрить и заключил наш слайдер в div контейнер, выглядит в html это так:
Вот и все, проделав все вышеописанное, предварительно не забыв скачать архив с исходниками, вы получите в свое распоряжение замечательный, широкоформатный слайдер для изображений с красивым анимированным эффектом перехода от одной картинки к другой и с возможностью вывода анонса статей, а что еще надо страждущему блогеру.
Всем спасибо и удачи.
Отдельное спасибо: Dobrovoimaster
Сегодня, собравшись с мыслями и отбросив все сомнения, мы вместе с вами уважаемые читатели нашего блога, рассмотрим интересное и популярное решение по выводу изображений на страницах сайта в виде “слайдера”, иначе, доведенного до ума, хорошо всем знакомого, ротатора баннеров.
Достопочтенные буржуины например, давно и плотно используют слайдеры на своих блогах, не только в качестве галерей, но и как способ анонсирования статей на главных страницах. Среди наших блогеров “слайдеры” так же приобретают все большую популярность, все чаще можно увидеть использование шаблонов и тем со встроенными ротаторами изображений. Как все это устроено и работает, мы и попробуем разобраться, без лишней суеты, как говориться: с чувством, с толком, с расстановкой.
Установка:
Для того что бы слайдер заработал, в первую очередь нам необходимо подключить к документу html дополнительные javascript, а точнее плагины jQuery, которые вы найдете в папке с исходниками, для этого перед тегом /head следует прописать следующее:
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.settings.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.settings.js"></script>
Затем нужно определиться с местом где будет выводиться сам слайдер, в моем примере вывод ротатора настроен сразу под шапкой и меню точно посередине, так как в нашем случае слайдер широкоформатный и занимает всю ширину фиксированного шаблона размером 960px. Не стал особо мудрить и заключил наш слайдер в div контейнер, выглядит в html это так:
<div id="banner">
<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="#"><img src="banner/banner.jpg" alt="" /></a>
<a href="#"><img src="banner/banner2.jpg" alt="" title="#htmlcaption" /></a>
<a href="#"><img src="banner/banner3.jpg" alt="" /></a>
<a href="#"><img src="banner/banner4.jpg" alt="" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption"><p>Это пример заголовка изображения или анонс статьи HTML </p></div>
</div>
</div>
Как вы видите ничего сложного и особо навороченного в данном коде нет, все настройки вынесены в отдельный файл стилей style.css, который так же следует подключить к нашему документу:<div id="slider-wrapper">
<div id="slider" class="nivoSlider">
<a href="#"><img src="banner/banner.jpg" alt="" /></a>
<a href="#"><img src="banner/banner2.jpg" alt="" title="#htmlcaption" /></a>
<a href="#"><img src="banner/banner3.jpg" alt="" /></a>
<a href="#"><img src="banner/banner4.jpg" alt="" /></a>
</div>
<div id="htmlcaption" class="nivo-html-caption"><p>Это пример заголовка изображения или анонс статьи HTML </p></div>
</div>
</div>
<link rel="stylesheet" type="text/css" href="css/style.css" title="styles1" />
Соответственно путь к файлу у вас может разниться с указанным в примере, так что будьте внимательны и постарайтесь не лопухнуться, иначе вылезет полнейший косяк. В стилях тоже особо сложных настроек не наблюдается, думаю трудностей не возникнет, если решите поэкспериментировать с параметрами при желании изменить внешний вид слайдера./* Основа ротатора изображений */
#banner { padding:0 0 30px 0; background:#ebebeb url(../images/shadow0.png) bottom no-repeat; margin:0; height:260px; text-align:center;}
/* Контейнер */
#container { width:960px; margin: 20px auto; }
#slider-wrapper { background:none; width:960px; padding:0; margin:auto; }
#slider { position:relative; width:960px; height:260px;background:url(../images/loading.png) no-repeat 50% 50%; }
#slider img { position:absolute; top:0px; left:0px; display:none; }
#slider a { border:0; display:block; }
.nivo-controlNav { margin:auto;padding:0; position:absolute; bottom:-19px;left:440px;text-align:center; margin:auto; }
.nivo-controlNav a { display:block;width:15px;height:15px;
background:url(../images/bullets.png) no-repeat; text-indent:-9999px;
border:0; margin-right:3px; float:left; position:relative; z-index:30; cursor:pointer; }
.nivo-controlNav a.active {font-weight:bold; background-position:0 -22px; }
.nivo-directionNav a { display:block; width:56px; height:50px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px; border:0; position:absolute; top:45%;
z-index:30;cursor:pointer; }
a.nivo-nextNav { background-position:-56px 0; top:101px; right:-15px; }
a.nivo-nextNav:hover { background-position:-56px -50px; }
a.nivo-prevNav { top:101px; left:-15px; }
a.nivo-prevNav:hover { background-position:0 -50px; }
/* Nivo Slider стили */
.nivoSlider { position:relative; }
.nivoSlider img { position:absolute; top:0px; left:0px; }
/* Если изображение обвернуто в ссылку */
.nivoSlider a.nivo-imageLink { position:absolute;
top:0px; left:0px; width:100%; height:100%;
border:0; padding:0; margin:0; z-index:20; display:none; }
.nivo-slice { display:block; position:absolute;z-index:10;height:100%; }
/* Стили заголовка */
.nivo-caption {position:absolute; left:0px; bottom:0px; font:13px calibri;
padding:0; margin:0; color:#CCC; background:#000; opacity:0.7; width:100%; z-index:29; }
.nivo-caption p { margin:0; padding:10px 15px 10px 15px;}
.nivo-caption a { color:#efe9d1; text-decoration:underline;display:inline !important; }
.nivo-html-caption { display:none; }
#banner { padding:0 0 30px 0; background:#ebebeb url(../images/shadow0.png) bottom no-repeat; margin:0; height:260px; text-align:center;}
/* Контейнер */
#container { width:960px; margin: 20px auto; }
#slider-wrapper { background:none; width:960px; padding:0; margin:auto; }
#slider { position:relative; width:960px; height:260px;background:url(../images/loading.png) no-repeat 50% 50%; }
#slider img { position:absolute; top:0px; left:0px; display:none; }
#slider a { border:0; display:block; }
.nivo-controlNav { margin:auto;padding:0; position:absolute; bottom:-19px;left:440px;text-align:center; margin:auto; }
.nivo-controlNav a { display:block;width:15px;height:15px;
background:url(../images/bullets.png) no-repeat; text-indent:-9999px;
border:0; margin-right:3px; float:left; position:relative; z-index:30; cursor:pointer; }
.nivo-controlNav a.active {font-weight:bold; background-position:0 -22px; }
.nivo-directionNav a { display:block; width:56px; height:50px;
background:url(../images/arrows.png) no-repeat;
text-indent:-9999px; border:0; position:absolute; top:45%;
z-index:30;cursor:pointer; }
a.nivo-nextNav { background-position:-56px 0; top:101px; right:-15px; }
a.nivo-nextNav:hover { background-position:-56px -50px; }
a.nivo-prevNav { top:101px; left:-15px; }
a.nivo-prevNav:hover { background-position:0 -50px; }
/* Nivo Slider стили */
.nivoSlider { position:relative; }
.nivoSlider img { position:absolute; top:0px; left:0px; }
/* Если изображение обвернуто в ссылку */
.nivoSlider a.nivo-imageLink { position:absolute;
top:0px; left:0px; width:100%; height:100%;
border:0; padding:0; margin:0; z-index:20; display:none; }
.nivo-slice { display:block; position:absolute;z-index:10;height:100%; }
/* Стили заголовка */
.nivo-caption {position:absolute; left:0px; bottom:0px; font:13px calibri;
padding:0; margin:0; color:#CCC; background:#000; opacity:0.7; width:100%; z-index:29; }
.nivo-caption p { margin:0; padding:10px 15px 10px 15px;}
.nivo-caption a { color:#efe9d1; text-decoration:underline;display:inline !important; }
.nivo-html-caption { display:none; }
Вот и все, проделав все вышеописанное, предварительно не забыв скачать архив с исходниками, вы получите в свое распоряжение замечательный, широкоформатный слайдер для изображений с красивым анимированным эффектом перехода от одной картинки к другой и с возможностью вывода анонса статей, а что еще надо страждущему блогеру.
Всем спасибо и удачи.
Отдельное спасибо: Dobrovoimaster
Если кто то еще не знаком с этим детищем чешских умельцев, то стоит обратить внимание на возможности этого продукта. Ребята не стали мудрить и обозвали свою программу "Avast", на английском языке являлось термином означающим “
Еще один, порой так необходимый инструмент для борьбы с разного рода шпионскими программами, а в частности это надежный механизм очистки системы от программ-вымогателей, которых в последнее время развелось как грязи.
Kaspersky, вездесущий, поселившийся практически в каждом доме, порой через чур навязчивый, но однозначно одна из самых продуктивных антивирусных лабораторий. Лаборанты нет-нет да и выбрасывают на рынок бесплатные утилитки, для затравки или же для очистки совести не суть важно, главное программы раотают не смотря на их бесплатность, как раз из этой серии. В последнее время все коммерческие проекты лаборатории иногда в стиле работы напоминают назойливую рекламу в виде всплывающих и выпрыгивающих Pop-Up окон, это только мое совсем необъективное мнение, кому то может и в кайф, мне же интересен конечный результат. 
Давно и прочно укрепивший свои позиции на рынке антивирусных программ, Avira AntiVir Personal входит в ТОП 10 антивирусов. Его считают лучшим из бесплатных антивирусных программ своего класса... Полюбившийся многим "Зонтик" - бесплатный (для частных пользователей) антивирус, предлагающий эффективную защиту против компьютерных вирусов. Avira AntiVir Personal находит и уничтожает вирусы и трояны, в том числе и еще неизвестные макровирусы. Есть возможность постоянного мониторинга системы. 
