BloggaRolla
Онлайн-генератор веб-цветов
Онлайн-подбор оптимальных веб-цветов для сайта
Онлайн-редактор HTML
Цветовой онлайн-калькулятор
Онлайн-калькулятор
Онлайн-рисовалка PencilMadness
  • Web
  • Images
  • News
  • Videos
  понедельник, июля 04, 2011  

Простое слайд-шоу на основе Jquery в блог
Сегодня рассмотрим возможность добавления небольшого и удобного в установке слайд-шоу на Jquery в блог, в основе которого красивая галерея картинок, попеременно сменяющих друг друга через заданный интервал времени. В этом слайд-шоу отсутствуют кнопки перемотки изображений, смена картинок протекает автоматически и с небольшим анимированным переходом.

Сам пример виджета вы можете посмотреть на странице тестового блога.

Для полноценной работы виджета требуется подключенная библиотека 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>
Устанавливаем и любуемся, а я тихо горжусь в сторонке.



Понравилась статья? Поделись ею с друзьями!

Не забудь подписаться на обновления блога:


Вы можете оставить свой отзыв через блок комментариев Вконтакте. При отсутствии профиля в этой социальной сети, воспользуйтесь удобной формой Disqus ниже.