Сам пример виджета вы можете посмотреть на странице тестового блога.
Для полноценной работы виджета требуется подключенная библиотека Jquery. Обычно, при использовании нестандартных шаблонов для Blogger в них уже размещен скрипт Jquery по умолчанию. Если скрипт отсутствует, особенно при условии использования родных шаблонов Blogger, вам придется самостоятельно добавить его в блог. Для начала проверьте наличие скрипта: проследуйте Дизай > Изменить шаблон HTML и с помощью клавиш поиска в вашем браузере CTRL+F найдите участок кода или подобный ему:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>Если же такового не наблюдается, добавьте скрипт. Для этого вставьте указанную выше строку кода сразу перед </head> в шаблоне вашего блога. Библиотека Jquery подключена.
Установка виджета простого слайд-шоу на Jquery.
Теперь остается установить сам виджет слайд-шоу. Размещается он с помощью старого доброго гаджета HTML/JavaScript в разделе "Дизайн". Если же вы хотите лицезреть его на статической странице или странице сообщения, тогда вписывайте код слайд-шоу во вкладке "Изменить HTML" в момент создания сообщения.
Основу виджета составляет:
<div class="slidshow"> <img src="images1.jpg"> <img src="images2.jpg"> <img src="images3.jpeg"> <img src="images4.jpeg"> </div>где указываются ссылки на свои изображения и размещается нужное количество картинок.
Теперь добавляем стили CSS для нашего слайд-шоу:
.slidshow {
position:relative;
}
.slidshow img {
position:absolute;
left:0;
top:0;
width:300px;
height:300px;
}в которых вы можете обозначить свои размеры изображений и, соответственно, всего виджета, меняя значения width:300px и height:300px.Подключим небольшой скрипт, отвечающий за анимацию и смену картинок в слайд-шоу:
<script>
$(function(){
$('.slidshow img:gt(0)').hide();
setInterval(function(){
$('.slidshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slidshow');},2000);
});
</script>где число 2000 обозначает повторение смены изображений через каждые 2000 мс.Наконец, полный код виджета, который и нужно размещать в блоге, предварительно заменив ссылки изображений на свои:
<script>
$(function(){
$('.slidshow img:gt(0)').hide();
setInterval(function(){
$('.slidshow :first-child').fadeOut()
.next('img').fadeIn()
.end().appendTo('.slidshow');},2000);
});
</script>
<style>
.slidshow {
position:relative;
}
.slidshow img {
position:absolute;
left:0;
top:0;
width:400px;
height:400px;
}
</style>
<br />
<div class="slidshow">
<img src="http://4.bp.blogspot.com/-iRntl2hWaiA/Tg3VPxy1F6I/AAAAAAAABAs/G9Wr3P_y3rM/s320/Innuendo.jpg" />
<img src="http://1.bp.blogspot.com/-dGn8wP60sdQ/Tgy4BhlkX5I/AAAAAAAAA_8/j71y4aKjMFo/s320/queen-crest.jpg" />
<img src="http://2.bp.blogspot.com/-Jt39auJ8R8E/TY6aQtDcQoI/AAAAAAAAAxk/So50kjzPllg/s320/Serebro+%25282%2529.jpg" />
<img src="http://4.bp.blogspot.com/-M9rs9zyOsM8/ThEGl03p8wI/AAAAAAAABC8/t0eZ1ed9FE4/s1600/searching-for-info.jpg" />
<img src="http://1.bp.blogspot.com/-mf0OqvJn1Kg/TXjGjASG6AI/AAAAAAAAAxk/-dtV6_Qo4sg/s320/Poisk.jpg" />
</div>Устанавливаем и любуемся, а я тихо горжусь в сторонке.