Удобная навигация
Как не странно, но живой пример этой навигации вы уже можете лицезреть у меня в блоге.
Как вы уже могли заметить эта навигация сделана при помощи jQuery, а так же плагина scrollable, от создателей не безызвестного флешплеера Flowplayer.
Плагин scrollable отвечает за главный эффект этой навигации — прокрутку.
Очень примечательно, что этот плагин имеет очень маленький размер(4 килобайта), множество настроек, а также дружит с плагином , который позволяет использовать колесико мышки для прокрутки.
Прокрутка может быть как горизантальной так и вертикальной, так что можно не ограничивать себя только навигацией и создавать множество интересный решений.
И самое главное, всё это будет работать в:
- Firefox 1.5/2.0+
- Internet Explorer 5.5/6.0/7.0+
- Safari 2.0+
- Opera 9.0+
Скачать этот плагин, почитать документацию, и посмотреть еще примеры вы можете перейдя по ссылке ниже. Всем удачного дня!
Скажу чесно, навигация не самая удобная. Спецциально релил погулять по сайту, заглядывая в старые посты. Так вот, зайдя на 10 страницу, чтобы потом попасть на 11-ую нужно снова перематывать всю навигацию, занятие довольно утомительное. А если на сайте не 15, а 115 страниц? + она очень крупная, привлекает на себя много внимания, что удивительно, ведь это всего лишь эоемент управления, а не та информация, за которой я пришел на сайт.
Согласен с Kozlovski. Навигация подходит для имиджевых дизайнов с не очень большим количеством ссылок. Если страниц очень много будет неудобно все просматривать. Но для интерактивности, скажем переключения страниц в небольшой галерее подходит.
Нужно просто сделать «автоскролинг» к выбраной странице :)
и она опять станет самой удобной ;)
А если чесно, саммый удобный скролинг на «дёрти».ру, только прикрутить ивент скрола и всё будет луше, чем когда либо ;)
Для jQuery есть еще один похожий плагин: . Так вот он умеет перематывать сразу большое количество элементов, кроме того умеет автоматически скроллиться к текущему объекту, это удобно если на данный момент отображается, например, десятая из пятидесяти страниц. Пример можно посмотреть тут: .
Для обладателей Microsoft Mouse с аналоговым сроллом подобная навигация зло! :D стоит чуть-чуть зацепить скроллер и такая менюшка мгновенно прокручивается притом ещё и тормозит, так как браузеры не могут обеспечить такую высокую скорость работы в JavaScript. Лучше вообще убрать возможность управления скроллом. А так в целом, как элемент интерфейса — клёвая штука :)
О боже, почти впервые настоящие большие комментарии и даже небольшое обсуждение.
Просто клева, я вас обожаю.
Так вот, по теме, для множества страниц над навигацией появляется несколько точек, с помощью которых можно попадать в нужный отрезок одним кликом, только вот он у меня неожиданно пропал, буду налаживать.
В демо на оф. сайте, кстати, эти точки имеются.
>для множества страниц над навигацией появляется несколько точек
Все-таки слабо представляется количество этих точек, при большом количестве страниц.
По-моему, самый нормальный листинг – «(первая) … (n предидущих) (текущая) (n слейдущих) … (последняя)» – а для форумов, с бешенным количеством постов, ну или каталогов, неплохо иметь select с выбором любой страницы.
Ув. Чернев, а можно как то узнать подробную установку данного скрипта ? на сайте нашел только таблицу стилей и сам скрипт =) да и откуда вы вытащили изображения, на сайте автора их нет.. вроде.
спасибо
Ну можно свои изображения сделать. Я просто поковырял css и вытащил картинки.
А сам процесс установки к примеру на вп? очень хочу сделать похожую навигацию но с JS сталкиваюсь впервые.
1. Прочитал документацию к скрипту.
2. Установил плагин WP-PageNavi.
3. Соединил всё воедино.
Если не трудно можно получить копию вашего WP-PageNavi, у меня не выходит скрестить, хоть ошибки посмотрю.
Да пожалуйста. Качайте.
Вот таким кодом его включать:
<div id="scrollable"> <div class="navi"></div> <a class="prev" rel="nofollow"></a> <?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?> <a class="next" rel="nofollow"></a> </div>А скрипт навигации подключайте идентичный тому, что в примере.
*offtop*
Комментарий с кодом вылез за отведенные рамки, нехорошо :)
У меня все нормально, странно.
Скорее всего это особенность тега pre.
Ув. Чернев, спасибо …. очень нравится ваш сайт, можно найти кучу интересных примеров, скриптов итд ..
Очень хотел бы увидеть на вашем сайте урок внедрения любого ява скрипта в вп. ( было бы круто ).
*offtop*
Да все что описано выше это я знаю, мне интересен сам пример подключения скрипта =(. На флове я ничего не понял.
З.Ы. Нахожу много полезных скриптов а как их подключать не знаю, как вп понимает вообще где этот скрипт лежит ? меня этот вопрос уже 3й день мучает =)
ВП ничего не должен понимать, должны понимать вы, все подключается в файлах темы оформления.
Вы меня не поняли, цсс прописал, в индексе темы код итегрировал, но как сам скрипт подключить я понятия не имею
$(»#scrollable»).scrollable({items:’.items’,horizontal:true});
( вставил в код стариницы сразу же перед кодом отображения самой менюхи )
скрипт закинул в папку темы ( js ) и в корень ..
получается вот такое – тоесть цсс вместе с плагином работает то .. но скрипт попросту не подключен ( вот как сам скрипт подключить, я хочу знать брльше всего и не ради этой менюшки .. есть множество других скриптов которые я не могу подключить,таберы итд )
Лучше напишите мне в icq(он указан на странице контакт).
*offtop*
Код вылазит только в Опере 9,5. В остальных браузерах (IE 7, FF, Safari, Chrome) нормально.
Искал что-то наподобие WP-PageNavi, нашел Ваш сайт. Попробовал поперемещаться по страницам – утомительно. Представил как эта строчка прокрутки будет тормозить у человека, который зайдет на ваш блог с очень древнего компьютера, а таких как известно очень много.
Позаимствовал картинки кнопок с этого плагина, прикрутил к page-navi… Как получилось можно посмотреть на внизу страницы…
Выкладываю свой вариант пагинации
Соответственно результат работы Вы сможете увидеть на самом блоге, внизу.
ну и как здесь реализовано постраничная навигация, исходя из того, что коментарии должны выводится по каждой статье отдельно