Плагин или слайдер для постраничной навигации в блоге

В дефолтовых шаблонах Blogger для постраницной навигации используются ссылки "далее", "предыдущее", "главная страница" и другие. Более продвинутые юзеры блогспота ставят разные паджинаторы (наверное, все помнят виджеты Абдурахмана или как там его?).

На технологии jQuery есть несколько интересных разработок, об одной из чуть ниже пойдёт разговор, а о других читайте в следующих выпусках.
Предупреждаю, что это не замена автоматической навигации, здесь ссылки расставляются вручную, и для чего эти плагины смогут пригодиться, думайте сами. Это смесь облака тегов, категорий, слайдера и перелинковщиков.

jQuery плагин - это Easy Paginate.


Подключается он с помощью скрипта, который скачиваем отсюда (или мою русифицированную версию). Кладём на свой хостинг. Подробности по установке скриптов в блоггер здесь.

Скрипт настройки для этого демо выглядит так:
<script type="text/javascript">
 
jQuery(function($){
 
 $('ul#items').easyPaginate({
  step:3
 });
 
});    
    
    </script>

Обратите внимание на настройки этого скрипта

step
Default value: 3
Отображает кол-во страниц (которые на демо в квадратах) на экране.

delay
Default value: 100
Задержка эффекта fade для каждого элемента. В миллисекундах.

numeric
Default value: true
Показывать или нет номера навигации. Если не нужно, ставим false.

nextprev
Default value: true
Показывать элементы навигации: "предыдущие" (previous), "следующие" (next). Если не нужно, ставим false.

auto
Default value: false
Если поставить true, плагин будет автоматически пролистывать элементы.

pause
Default value: 4000
Настройка для auto: пауза между перелистыванием элементов, в миллисекундах.

clickstop
Default value: true
Настройка для auto: этот параметр позволяет остановить перелистывание щелчком мыши. Если не нужно, ставим false.

controls
Default value: 'pagination'
Как уже упоминалось, плагин генерирует упорядоченный список для навигации по "страницам". Этот параметр определяет ID (идентификатор) списка.

current
Default value: 'current'
Этот параметр определяет имя класса текущей "страницы" в цифровой навигации. Он используется для назначения класса.

Таблица стилей для этого демо:
<style>
/* content */
  
 ul#items{  
  margin:0;
  height:120px;
  width:auto;
  overflow:hidden;
  }
 ul#items li{
  list-style:none;
  float:left;
  width:200px;
  height:120px;
  overflow:hidden;
  margin:0 0 0 1px;
  background:#f3f3f3;
  color:#fff;
  text-align:center;
  }
 ol#pagination{overflow:hidden;}
 ol#pagination li{
  float:left;
  list-style:none;
  cursor:pointer;
  margin:0 0 0 .5em;
  }
 ol#pagination li.current{color:#f00;font-weight:bold;}
 
/* // content */
</style>
В ней вы можете подстроить внешний вид "квадратов" (или убрать их совсем) и маленького навигатора (под ними).

Htm код для установки в блог очень простой, имеет вид:
<ul id="items">
  <li>Page 1</li>
  <li>Page 2</li>
  <li>Page 3</li>
  <li>Page 4</li>
  <li>Page 5</li>
  <li>Page 6</li>
  <li>Page 7</li>
  <li>Page 8</li>
  <li>Page 9</li>
  <li>Page 10</li>
  <li>Page 11</li>
  <li>Page 12</li>
  <li>Page 13</li>
  <li>Page 14</li>
</ul>

Если установить изображения с ссылкой, как у меня: вставьте в редакторе сообщений (в Blogger) картинки (одного размера), привяжите к ним ссылку на нужные страницы, перейдите в html режим и уберите все теги <div></div>.

Вот образец с моими ссылками из демо:
<ul id="items">
<li><a href="http://blogger.omg-linux.ru/search/label/html"><img border="0" src="http://3.bp.blogspot.com/-HSJqHfOTN6Y/TjD0dcWEcsI/AAAAAAAAFp0/ItmFsKLxCt4/s1600/Yunomi+%2528tea+cup%2529.png" /></a></li>
<li><a href="http://blogger.omg-linux.ru/search/label/jquery"><img border="0" src="http://1.bp.blogspot.com/-LPm74hbkH3w/TjD0hZKa_VI/AAAAAAAAFp8/mV1Li6wqzMo/s1600/Yoritsuki_disk.png" /></a></li>
<li><a href="http://blogger.omg-linux.ru/search/label/%D1%85%D0%B8%D1%82%D1%80%D0%BE%D1%81%D1%82%D0%B8"><img border="0" src="http://4.bp.blogspot.com/-xZCGkW5z8_w/TjD0mhReP7I/AAAAAAAAFqE/Y_vzR23iZ04/s1600/Noren+%2528short+split+curtain%2529.png" /></a></li>
<li><a href="http://blogger.omg-linux.ru/search/label/js"><img border="0" src="http://3.bp.blogspot.com/-dlAyGYEi2zg/TjD0qdGsF6I/AAAAAAAAFqM/1zKzRXahsIY/s1600/Folder.png" /></a></li>
<li><a href="http://blogger.omg-linux.ru/search/label/%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD"><img border="0" src="http://2.bp.blogspot.com/-j-I2H-F0qq8/TjD0uUM1DnI/AAAAAAAAFqU/2qNEJIWJRVU/s1600/Takezake+%2528sake%25D0%259C%25D0%2583+in+a+bamboo+container%2529.png" /></a></li>
<li><a href="http://blogger.omg-linux.ru/search/label/%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B"><img border="0" src="http://1.bp.blogspot.com/-ZAlUs-yqlnQ/TjD1ooiOPnI/AAAAAAAAFqk/Eljv8cGKbH0/s1600/Oshibori+%2528wet+hand+towel%2529.png" /></a></li>
</ul>


Демонстрацию более продвинутого использования этого плагина можно посмотреть на моём тестовом блоге.
Я специально не стал здесь делать второе демо, чтобы не перегружать страницу.

Прилагаю коды для вставки (к верхнему демо они не относятся!)


Настройка плагина:
<script type="text/javascript">
 
jQuery(function($){
 
 $('ul#items').easyPaginate({
  step:3
 });
 
});    
    
    
</script>

Css:
<style>
/* HTML elements  */  
 p, blockquote, ul, ol, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}
 ul, ol, dl{padding:0;}
 ul ul, ul ol, ol ol, ol ul, dd{margin:0;}
 li{margin:0 0 0 2em;padding:0;display:list-item;list-style-position:outside;} 
 blockquote, dd{padding:0 0 0 2em;}
 pre, code, samp, kbd, var{font:100% mono-space,monospace;}
 pre{overflow:auto;}
 abbr, acronym{
  text-transform:uppercase;
  border-bottom:1px dotted #000;
  letter-spacing:1px;
  }
 abbr[title], acronym[title]{cursor:help;}
 small{font-size:.9em;}
 sup, sub{font-size:.8em;}
 em, cite, q{font-style:italic;}
 img{border:none;}   
 hr{display:none;} 
 table{width:100%;border-collapse:collapse;}
 th,caption{text-align:left;}
 form div{margin:.5em 0;clear:both;}
 label{display:block;}
 fieldset{margin:0;padding:0;border:none;}
 legend{font-weight:bold;}
 input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}

/* //  HTML elements */ 

/* base */
 
 body, table, input, textarea, select, li, button{
  font:1em Helvetica, Arial, Sans-Serif;
  line-height:1.5em;
  color:#333;
  }  
 body{
  font-size:12px;
  background:#fff;
  margin:0;
  padding:20px;  
  } 
 a, a:visited{
  text-decoration:none;
  color:#06C;
  }
 a:hover{color:#999;}

/* base */

/* content */

 #container{ 
  margin:0 auto;
  width:818px;
  text-align:left;
  position:relative;
  padding:2em 0;
  }
  
 ul#items{  
  margin:1em 0;
  width:auto;
  height:245px;
  overflow:hidden;
  }
 ul#items li{
  list-style:none;
  float:left;
  height:240px;
  overflow:hidden;
  margin:0 4px;
  background:#DBDAE0;
  color:#fff;
  text-align:center;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  -moz-box-shadow:0 1px 1px #777;
  -webkit-box-shadow:0 1px 1px #777;
  box-shadow:0 1px 1px #777;
  color:#555;
  }
 ul#items li:hover{color:#333;}
 ul#items li .image{
  margin:20px 20px 10px 20px;
  width:220px;
  height:150px;
  overflow:hidden;
  border:2px solid #fff;
  -moz-box-shadow:0 1px 1px #bbb;
  -webkit-box-shadow:0 1px 1px #bbb;
  box-shadow:0 1px 1px #bbb;
  } 
 ul#items h3{text-transform:uppercase;font-size:14px;font-weight:bold;margin:.25em 0;text-shadow:#f1f1f1 0 1px 0;} 
 ul#items .info{color:#999;text-shadow:#f1f1f1 0 1px 0;} 
 ol#pagination{position:relative;text-align:center;}
 ol#pagination li{
  display:inline-block;
  width:16px;
  height:16px;
  background:url(http://3.bp.blogspot.com/-MazrJ-fH7W0/TqEis3hoyAI/AAAAAAAAGaQ/53lBrcvEm4Y/s1600/bg_buttons.png) no-repeat 0 0;
  text-align:left;
  text-indent:-8000px;
  list-style:none;
  cursor:pointer;
  margin:0 2px;
  }
 ol#pagination li:hover{http://3.bp.blogspot.com/-MazrJ-fH7W0/TqEis3hoyAI/AAAAAAAAGaQ/53lBrcvEm4Y/s1600/bg_buttons.png) no-repeat 0 -16px;}
 ol#pagination li.current{color:#f00;font-weight:bold;background:url(http://3.bp.blogspot.com/-MazrJ-fH7W0/TqEis3hoyAI/AAAAAAAAGaQ/53lBrcvEm4Y/s1600/bg_buttons.png) no-repeat 0 -32px;}
 ol#pagination li.prev, ol#pagination li.next{
  position:absolute;
  top:-150px;
  }
 ol#pagination li.prev{left:-30px;background:url(http://3.bp.blogspot.com/-MazrJ-fH7W0/TqEis3hoyAI/AAAAAAAAGaQ/53lBrcvEm4Y/s1600/bg_buttons.png) no-repeat 0 -64px;}
 ol#pagination li.next{right:-30px;background:url(http://3.bp.blogspot.com/-MazrJ-fH7W0/TqEis3hoyAI/AAAAAAAAGaQ/53lBrcvEm4Y/s1600/bg_buttons.png) no-repeat 0 -48px;}
 
/* // content */
</style>
Картинки должны быть размером 220x115 , а не как у меня :). Небольшая доработка стилей не только приветствуется, но и обязательна.

Html:
<ul id="items">
<li>
<div class="image">
<a href="#"><img alt="Template preview" src="http://3.bp.blogspot.com/-pJGt4mQmf1Y/TojHGipA-lI/AAAAAAAAGBo/1Hk-mNO73NE/s1600/exapp.png" /></a></div>
<h3>
Template 01</h3>

<div class="info">
Pretty cool template</div>
</li>
<li>
<div class="image">
<a href="#"><img alt="Template preview" src="http://3.bp.blogspot.com/-CKQJPaL89WE/TojHG1uN4RI/AAAAAAAAGB4/VhVaqro5lPg/s1600/exlibrary.png" /></a></div>
<h3>
Template 02</h3>
<div class="info">
Pretty cool template</div>
</li>
<li>
<div class="image">
<a href="#"><img alt="Template preview" src="http://1.bp.blogspot.com/-_-2GwFScBc4/TojHG8jFFkI/AAAAAAAAGBw/lkeFSMXlz8g/s1600/excomputer2.png" /></a></div>
<h3>
Template 03</h3>
<div class="info">
Pretty cool template</div>
</li>
<li>
<div class="image">
<a href="#"><img alt="Template preview" src="http://4.bp.blogspot.com/-xbryRHMWR1s/TojHHP5pElI/AAAAAAAAGCA/KWkk6OvU_3E/s1600/exphoto.png" /></a></div>
<h3>
Template 04</h3>
</li>
</ul>

Ссылки на картинки заменены на #



Да, разработчик и его страница  тут.

Комментариев нет:

Отправка комментария