Постраничная навигация при помощи jQuery

jQuery, jCarousel, немного PHP и HTML/CSS и получится такая навигация, как у меня внизу на главной. При желании можно доделать до любой формы. Еще это минус один плагин, что есть гуд в плане ресурсов. Из плагинов у меня скоро наверно только акисмет останется.

Приступим.

Библиотеки

Нужна jQuery, а именно jquery-1.2.1.pack.js просит карусель и сама карусель

PHP/HTML

Я добавил код в footer.php. Можно и в index.php, но тогда придется добавлять и в archives.php. Код следующий:

<?php if(!is_single()){?>
 <?php
        $max_page = $wp_query->max_num_pages;
        if(empty($paged) || $paged == 0) {
        $paged = 1;
 }
 ?>
<div id="alt_nav">
 <div>
<?php if(!is_paged()){ ?>Home
       <?php } else { ?>
     Page <?php echo $paged; }?></div>
 <ul id="mycarousel">
 <?php
 for($i=1; $i<$max_page+1; $i++){
 if($i == $paged){ ?><li><?php echo $i;?></li>
 <?php } else { ?>
 <li><a href="
      <?php echo clean_url(get_pagenum_link($i));?>
       "><?php echo $i;?></a></li>
 <?php } }?>
 </ul>
</div>
<?php }?>

По английски главная и страницы у меня написаны потому что крусадер сохраняет русский в какой-то своей кодировке а мне лень искать, поэтому оставил так, пускай все думают, что я невозможный знаток английского ))

CSS

Самая большая часть кода тут.

#alt_nav {color:#9e9e9e;}
#alt_nav .arrows1{
  font:200% Helvetica;
  color:#9e9e9e;
  text-decoration:none;
}
#alt_nav .arrows1:hover{
  font:200% Helvetica;
  color:#Cecece;
}
#alt_nav .arrows2{
  font:100% Helvetica;
  color:#9e9e9e;
  text-decoration:none;
}
#alt_nav .arrows2:hover{
  font:100% Helvetica;
  color:#Cecece;
}
#alt_nav .pageNum{
  font:bold 65px Verdana;
  color:#e1e1e1;
  height:55px;
  display:block;
  overflow:hidden;
}
.jcarousel-skin-tango .jcarousel-container {
    padding:5px;
    border:1px solid white;
    border-radius: 8px;
    -o-border-radius: 8px;
    -icab-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 220px;
    height: 20px;
    padding-left:50px;
    background: #F0F6F9;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  200px;

}

.jcarousel-skin-tango .jcarousel-item {
    width: 10px;
    height: 15px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {

}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top:0px;
    right: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(next-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top:0px;
    left: 5px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: transparent url(prev-horizontal.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

Подключение

Надо в шапку (header.php) добавить следующие строки:

<script type="text/javascript" src="/path/to/jquery-1.2.1.pack.js"></script>
<script type="text/javascript" src="/path/to/lib/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/lib/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/path/to/skin/skin.css" />

Затем еще вставить секцию инициализации скрипта.

<script type="text/javascript">

function mycarousel_initCallback(carousel)
{
 // Disable autoscrolling if the user clicks the prev or next button.
 carousel.buttonNext.bind('click', function() {
 carousel.startAuto();
 });

 carousel.buttonPrev.bind('click', function() {
 carousel.startAuto();
 });

 // Pause autoscrolling if the user moves with the cursor over the clip.
 carousel.clip.hover(function() {
 carousel.startAuto();
 }, function() {
 carousel.stopAuto();
 });
};

jQuery(document).ready(function() {
 jQuery('#mycarousel').jcarousel({
 auto: 0,
 wrap: 'last',
 scroll: 5,
 visible: 5,
 initCallback: mycarousel_initCallback
 });
});

</script>

По опыту говорю — если что-то не работает, то это скорей всего неправильно прописанные пути виноваты.

Более конкретные примеры параметров для инициализации можно посмотреть на оффсайте

В итоге получается вот такая навигация
Из плюсов еще надо отметить, что при таком варианте навигации в коде есть прямые ссылки на все страницы сразу, но показываются только несколько, что есть гуд в плане SEO и не особо дерет глаз посетителям

На закуску.

• Карта сайта — какая у вас?
• Скрыть/показать несколько элементов — примеры jQuery
• Постим в твиттер через курл