Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Март » 20 » Галерея книга


11:53
Галерея книга

Галерея книга  

MOLESKINE НОУТБУК С JQUERY БУКЛЕТ


Сегодня мы покажем вам, как использовать и настраивать плагин буклет JQuery Grauvogel. Мы создадим виртуальный блокнот Moleskine с последними сообщениями  из блога.




ПОСМОТРЕТЬ ДЕМО                        ИСТОЧНИК СКАЧАТЬ

 

Итак, давайте начнем!

РАЗМЕТКА

HTML структура будет состовлять  разметку буклет плагина, который включает  DIV с идентификатором "MyBook". Мы также добавим некоторые элементы навигации и загрузки элемента, который мы хотим показать, в то время как содержание книги загружается:

<div class="book_wrapper"><font></font>

<font></font>

 <a id="next_page_button"></a><font></font>

 <a id="prev_page_button"></a><font></font>

 <font></font>

    <div id="loading" class="loading">Loading pages...</div><font></font>

    <font></font>

    <div id="mybook" style="display:none;"><font></font>

        <div class="b-load"><font></font>

        <font></font>

            <div><font></font>

                <img src="images/1.jpg" alt=""/><font></font>

                <h1>Slider Gallery</h1><font></font>

                <p>This tutorial is about creating a creative gallery...</p><font></font>

                <a href="#" class="article">Article</a><font></font>

                <a href="#" class="demo">Demo</a><font></font>

            </div><font></font>

            <font></font>

            <div><font></font>

                ...<font></font>

            </div><font></font>

            <font></font>

        </div><font></font>

    </div><font></font>

</div><font></font>

На каждой странице этой брошюры будут размещены в DIV элементы  внутри элемента с классом «B-Load". 
Поскольку плагин позволяет использовать пользовательские кнопки для перелистывания страницы, мы настроим плагин для использования наших стрелок.

Давайте посмотрим на стиль.

CSS

Мы начнем с адаптации "буклет" класса и придаим ему некоторые тени и закругленные границы:

.booklet{<font></font>

  -moz-box-shadow:0px 0px 1px #fff;<font></font>

   -webkit-box-shadow:0px 0px 1px #fff;<font></font>

   box-shadow:0px 0px 1px #fff;<font></font>

   -moz-border-radius:10px;<font></font>

   -webkit-border-radius:10px;<font></font>

   border-radius:10px;<font></font>

}<font></font>

 

Теперь добавим  фоновое изображение для левой и правой страницы, так что бы она была больше похожа на реальную книгу:

 

.booklet .b-wrap-left{<font></font>

    background:#fff url(../images/left_bg.jpg) no-repeat top left;<font></font>

    -webkit-border-top-left-radius: 10px;<font></font>

    -webkit-border-bottom-left-radius: 10px;<font></font>

    -moz-border-radius-topleft:10px;<font></font>

    -moz-border-radius-bottomleft: 10px;<font></font>

    border-top-left-radius: 10px;<font></font>

    border-bottom-left-radius: 10px;<font></font>

}<font></font>

.booklet .b-wrap-right{<font></font>

    background:#efefef url(../images/right_bg.jpg) no-repeat top left;<font></font>

    -webkit-border-top-right-radius: 10px;<font></font>

    -webkit-border-bottom-right-radius: 10px;<font></font>

    -moz-border-radius-topright: 10px;<font></font>

    -moz-border-radius-bottomright: 10px;<font></font>

    border-top-right-radius: 10px;<font></font>

    border-bottom-right-radius: 10px;<font></font>

}<font></font>

Также добавим в стиль номера страниц и добавим некоторые достоинства  верхней границе:

 

.booklet .b-counter{<font></font>

    bottom:10px;<font></font>

    position:absolute;<font></font>

    display:block;<font></font>

    width:90%;<font></font>

    height:20px;<font></font>

    border-top:1px solid #ddd;<font></font>

    color:#222;<font></font>

    text-align:center;<font></font>

    font-size:12px;<font></font>

    padding:5px 0 0;<font></font>

    background:transparent;<font></font>

    -moz-box-shadow:0px -1px 1px #fff;<font></font>

    -webkit-box-shadow:0px -1px 1px #fff;<font></font>

    box-shadow:0px -1px 1px #fff;<font></font>

    opacity:0.8;<font></font>

}<font></font>

 

В HTML стректуре, мы добавили обертку вокруг брошюры, так что мы можем использовать изображение фона:

 

.book_wrapper{<font></font>

    margin:0 auto;<font></font>

    padding-top:50px;<font></font>

    width:905px;<font></font>

    height:540px;<font></font>

    position:relative;<font></font>

    background:transparent url(../images/bg.png) no-repeat 9px 27px;<font></font>

}<font></font>

 

Мы хотим добавить рисованные  линии под заголовком на каждой странице:

 

.book_wrapper h1{<font></font>

    color:#13386a;<font></font>

    margin:5px 5px 5px 15px;<font></font>

    font-size:26px;<font></font>

    background:transparent url(../images/h1.png) no-repeat bottom left;<font></font>

    padding-bottom:7px;<font></font>

}<font></font>

 

Пункты и ссылки будут иметь следующие стили:

 

.book_wrapper p{<font></font>

    font-size:16px;<font></font>

    margin:5px 5px 5px 15px;<font></font>

}<font></font>

.book_wrapper a.article,<font></font>

.book_wrapper a.demo{<font></font>

    background:transparent url(../images/circle.png) no-repeat 50% 0px;<font></font>

    display:block;<font></font>

    width:95px;<font></font>

    height:41px;<font></font>

    text-decoration:none;<font></font>

    outline:none;<font></font>

    font-size:16px;<font></font>

    color:#555;<font></font>

    float:left;<font></font>

    line-height:41px;<font></font>

    padding-left:47px;<font></font>

}<font></font>

.book_wrapper a.demo{<font></font>

    margin-left:50px;<font></font>

}<font></font>

.book_wrapper a.article:hover,<font></font>

.book_wrapper a.demo:hover{<font></font>

    background-position:50% -41px;<font></font>

    color:#13386a;<font></font>

}<font></font>

 

Добавим  изображению легкий налет, добавив света границе с белой страницой  окна, создавая слегка выгравирован вид:

 

.book_wrapper img{<font></font>

    margin:10px 0px 5px 35px;<font></font>

    width:300px;<font></font>

    padding:4px;<font></font>

    border:1px solid #ddd;<font></font>

    -moz-box-shadow:1px 1px 1px #fff;<font></font>

    -webkit-box-shadow:1px 1px 1px #fff;<font></font>

    box-shadow:1px 1px 1px #fff;<font></font>

}<font></font>

Цвет границы на правой странице должен  быть немного темнее:

.booklet .b-wrap-right img{<font></font>

    border:1px solid #E6E3C2;<font></font>

}<font></font>

 

Для стрелок  навигации мы будем использовать  изображение, которое содержит все четыре типа стрелок:

 

a#next_page_button,<font></font>

a#prev_page_button{<font></font>

    display:none;<font></font>

    position:absolute;<font></font>

    width:41px;<font></font>

    height:40px;<font></font>

    cursor:pointer;<font></font>

    margin-top:-20px;<font></font>

    top:50%;<font></font>

    background:transparent url(../images/buttons.png) no-repeat 0px -40px;<font></font>

}<font></font>

a#prev_page_button{<font></font>

    left:-30px;<font></font>

}<font></font>

a#next_page_button{<font></font>

    right:-30px;<font></font>

    background-position:-41px -40px;<font></font>

}<font></font>

a#next_page_button:hover{<font></font>

    background-position:-41px 0px;<font></font>

}<font></font>

a#prev_page_button:hover{<font></font>

    background-position:0px 0px;<font></font>

}<font></font>

Загрузка элемента  будет иметь округлые границы и будет полупрозрачной.  Позиционируем ее  на правой стороне книги:

 

.loading{<font></font>

    width:160px;<font></font>

    height:56px;<font></font>

    position: absolute;<font></font>

    top:50%;<font></font>

    margin-top:-28px;<font></font>

    right:135px;<font></font>

    line-height:56px;<font></font>

    color:#fff;<font></font>

    padding-left:60px;<font></font>

    font-size:15px;<font></font>

    background: #000 url(../images/ajax-loader.gif) no-repeat 10px 50%;<font></font>

    opacity: 0.7;<font></font>

    z-index:9999;<font></font>

    -moz-border-radius:20px;<font></font>

    -webkit-border-radius:20px;<font></font>

    border-radius:20px;<font></font>

}<font></font>

Это были все стили! Теперь  добавим волшебство!

JAVASCRIPT

В JQuery, мы просто вызовем плагин после того, как все изображения в книге будут загружены. Проверьте все опции:Опции брошюры Jquery Plugin


var $mybook         = $('#mybook');<font></font>

var $bttn_next      = $('#next_page_button');<font></font>

var $bttn_prev      = $('#prev_page_button');<font></font>

var $loading        = $('#loading');<font></font>

var $mybook_images  = $mybook.find('img');<font></font>

var cnt_images      = $mybook_images.length;<font></font>

var loaded          = 0;<font></font>

//preload all the images in the book,<font></font>

//and then call the booklet plugin<font></font>

<font></font>

$mybook_images.each(function(){<font></font>

    var $img    = $(this);<font></font>

    var source  = $img.attr('src');<font></font>

    $('<img/>').load(function(){<font></font>

        ++loaded;<font></font>

        if(loaded == cnt_images){<font></font>

            $loading.hide();<font></font>

            $bttn_next.show();<font></font>

            $bttn_prev.show();<font></font>

            $mybook.show().booklet({<font></font>

                name:               null,                            <font></font>

                // name of the booklet to display in the document title bar<font></font>

                width:              800,                             <font></font>

                // container width<font></font>

                height:             500,                             <font></font>

                // container height<font></font>

                speed:              600,                             <font></font>

                // speed of the transition between pages<font></font>

                direction:          'LTR',                           <font></font>

                // direction of the overall content <font></font>

                // organization, default LTR, left to right, can be <font></font>

                // RTL for languages which read right to left<font></font>

                startingPage:       0,                               <font></font>

                // index of the first page to be displayed<font></font>

                easing:             'easeInOutQuad',                 <font></font>

                // easing method for complete transition<font></font>

                easeIn:             'easeInQuad',                    <font></font>

                // easing method for first half of transition<font></font>

                easeOut:            'easeOutQuad',                   <font></font>

                // easing method for second half of transition<font></font>

<font></font>

                closed:             true,                           <font></font>

                // start with the book "closed", will add empty <font></font>

                // pages to beginning and end of book<font></font>

                closedFrontTitle:   null,                            <font></font>

                // used with "closed", "menu" and "pageSelector", <font></font>

                // determines title of blank starting page<font></font>

                closedFrontChapter: null,                            <font></font>

                // used with "closed", "menu" and "chapterSelector", <font></font>

                // determines chapter name of blank starting page<font></font>

                closedBackTitle:    null,                            <font></font>

                // used with "closed", "menu" and "pageSelector", <font></font>

                // determines chapter name of blank ending page<font></font>

                closedBackChapter:  null,                            <font></font>

                // used with "closed", "menu" and "chapterSelector", <font></font>

                // determines chapter name of blank ending page<font></font>

                covers:             false,                           <font></font>

                // used with  "closed", makes first and last pages <font></font>

                //into covers, without page numbers (if enabled)<font></font>

<font></font>

                pagePadding:        10,                              <font></font>

                // padding for each page wrapper<font></font>

                pageNumbers:        true,                            <font></font>

                // display page numbers on each page<font></font>

<font></font>

                hovers:             false,                            <font></font>

                // enables preview pageturn hover animation, <font></font>

                // shows a small preview of previous or next page on hover<font></font>

                overlays:           false,                            <font></font>

                // enables navigation using a page sized overlay, <font></font>

                // when enabled links inside the content will <font></font>

                // not be clickable<font></font>

                tabs:               false,                           <font></font>

                // adds tabs along the top of the pages<font></font>

                tabWidth:           60,                              <font></font>

                // set the width of the tabs<font></font>

                tabHeight:          20,                              <font></font>

                // set the height of the tabs<font></font>

                arrows:             false,                           <font></font>

                // adds arrows overlayed over the book edges<font></font>

                cursor:             'pointer',                       <font></font>

                // cursor css setting for side bar areas<font></font>

<font></font>

                hash:               false,                           <font></font>

                // enables navigation using a hash string, <font></font>

                // ex: #/page/1 for page 1, will affect <font></font>

                // all booklets with 'hash' enabled<font></font>

                keyboard:           true,                            <font></font>

                // enables navigation with arrow keys <font></font>

                // (left: previous, right: next)<font></font>

                next:               $bttn_next,                     <font></font>

                // selector for element to use as click <font></font>

                // trigger for next page<font></font>

                prev:               $bttn_prev,                     <font></font>

                // selector for element to use as click <font></font>

                // trigger for previous page<font></font>

<font></font>

                menu:               null,                            <font></font>

                // selector for element to use as the menu area, <font></font>

                // required for 'pageSelector'<font></font>

                pageSelector:       false,                           <font></font>

                // enables navigation with a dropdown menu of pages, <font></font>

                // requires 'menu'<font></font>

                chapterSelector:    false,                           <font></font>

                // enables navigation with a dropdown menu of chapters, <font></font>

                // determined by the "rel" attribute, requires 'menu'<font></font>

<font></font>

                shadows:            true,                            <font></font>

                // display shadows on page animations<font></font>

                shadowTopFwdWidth:  166,                             <font></font>

                // shadow width for top forward anim<font></font>

                shadowTopBackWidth: 166,                             <font></font>

                // shadow width for top back anim<font></font>

                shadowBtmWidth:     50,                              <font></font>

                // shadow width for bottom shadow<font></font>

<font></font>

                before:             function(){},                    <font></font>

                // callback invoked before each page turn animation<font></font>

                after:              function(){}                     <font></font>

                // callback invoked after each page turn animation<font></font>

            });<font></font>

            Cufon.refresh(); // if you want to use cufon<font></font>

        }<font></font>

    }).attr('src',source);<font></font>

});<font></font>

 

Для работы плагина , мы добавим следующие строки в нашь  HTML:

<script src="cufon/cufon-yui.js" type="text/javascript"></script><font></font>

<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script><font></font>

<script src="cufon/Note_this_400.font.js" type="text/javascript"></script><font></font>

<script type="text/javascript"><font></font>

    Cufon.replace('h1,p,.b-counter');<font></font>

    Cufon.replace('.book_wrapper a', {hover:true});<font></font>

    Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});<font></font>

    Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});<font></font>

    Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});<font></font>

</script><font></font>

Вот и все Надеюсь Вам понравилось.

 

СМОТРЕТЬ ДЕМО                               СКАЧАТЬ ИСХОДНИК

Ссылка на источник урока

Категория: CSS//HTML//JS | Просмотров: 613 | Добавил: Admin | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди