Вставляем слайдер новостей на Ucoz, используя jQuery Cycle Plugin

Вставляем слайдер новостей на Ucoz, используя jQuery Cycle Plugin В этой статье мы вставим слайдер новостей на Ucoz, используя плагин jQuery Cycle Plugin. Вся прелесть это плагина в том, что он позволяет работать практически с любыми данными. Я приведу пример его работы с использованием информера, который выводит последние статьи из раздела Создание сайта. Но с таким же успехом, можно использовать и просто картинки, и любой другой контент в свободной форме. К тому же он позволяет сделать множество настроек, которые Вы можете посмотреть на страницах плагина тут и тут
Итак, начну, как обычно, по пунктам:
1. Скачиваем этот архив и из него закачиваем через файловый менеджер в папку js файлы jquery.cycle.all.2.72.js и jquery.easing.1.1.1.js
2. Создаем информер, материалы которого Вы хотели бы вывести. Я вывожу последние статьи раздела Создание сайта и код шаблона у меня следующий:
Code<table class=»infTable» border=»0″ cellpadding=»2″ cellspacing=»1″ width=»100%»><tbody><tr><td colspan=»2″><div class=»eText» align=»justify»><a href=»$ENTRY_URL$» >$TITLE$</a><br> $MESSAGE$</div></td></tr></tbody></table>
Как я уже упомянула выше, шаблон может быть произвольным, и не обязательно повторять мой.
3. Создаем страничку на которой будем выводить наш слайдер и прописываем сначала вызов скриптов, которые мы закачали в пункте 1:

Code
<script type=»text/javascript» src=»http://otlichnica.ucoz.ru/js/jquery.cycle.all.2.72.js»></script>
<script type=»text/javascript» src=»http://otlichnica.ucoz.ru/js/jquery.easing.1.1.1.js»></script>

дальше добавим еще немного
Code
<script type=»text/javascript»>

$.fn.cycle.defaults.timeout = 6000;

$(function() {

  // run the code in the markup!

  $(‘td pre code’).each(function() {

  eval($(this).text());

  });

});

</script>

4. Теперь нам надо вывести сами новости:

Code

<table width=»340″ height=»250″ border=»0″ >

<tr>

<td>
<div id=»s3″ class=»pics»>
  $MYINF_№$
</div>
</td></tr></table>

Номер информера вставляете свой и обратите внимание, что задан класс pics и id=»s3″

5. После того, как содержимое вставлено, надо определить, что с ним будет делать скрипт, для этого дальше вставляем следующий код

Code
<pre><code class=»mix»>$(‘#s3’).cycle({  
  fx: ‘custom’,  
  cssBefore:{  
  left: 232,  
  top: -232,  
  display: ‘block’  
  },  
  animIn: {  
  left: 0,  
  top: 0  
  },  
  animOut: {  
  left: 232,  
  top: 232  
  },  
  delay: -3000  
});</code></pre>

Обратите внимание на то, что в начале идут строки $(‘#s3’) — это значит, что этот код будет работать с элементом для которого id=»s3″
Другие варианты этого пункта Вы можете посмотреть на страницах плагина, указанных выше или на моей страничке
Все, что Вам нужно будет поменять в предлагаемых кодах это id=»s3″

6. В целом, наш плагин готов. Осталось настроить стили. Заходим в css и добавляем:
pre { text-align: left; display:none; } // это мы делаем невидимым наш код из пункта 5
и настраиваем вид блоков
.pics { width:340px;height:230px; padding:5px; margin:7px 7px 30px 7px; overflow: hidden; top:0; left:0; }
.pics table{-moz-border-radius: 10px; -webkit-border-radius: 10px;border: 1px solid #ccc; background-color: #eee;width:300px;height:200px;padding:5px;margin:7px 7px 30px 7px;}
Все эти параметры можете менять под любые свои нужды.

Вот и все готово!!! Надеюсь, что у Вас все получилось.

Комментарии на Facebook