Галерея книга - 20 Марта 2013 - Блог

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

Всегда в теме

Статистика

Онлайн всего: 6

Гостей: 6

Пользователей: 0

Свежий софт

Wrecker
Kaspersky Internet Security 2015

Wrecker
Virtual DJ

Wrecker
SoundForge 11

Wrecker
Alcohol 120

Wrecker
Norton Internet Security 2014

Iron
Loaris Trojan Remover

Рекомендуем

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

11:53

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

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

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

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

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

РАЗМЕТКА

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

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

<div>

<h1>Slider Gallery</h1>

This tutorial is about creating a creative gallery...

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

</div>

<div>

...

</div>

</div>

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

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

CSS

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

.booklet{

-moz-box-shadow:0px 0px 1px #fff;

-webkit-box-shadow:0px 0px 1px #fff;

box-shadow:0px 0px 1px #fff;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

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

.booklet .b-wrap-left{

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

-webkit-border-top-left-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-moz-border-radius-topleft:10px;

-moz-border-radius-bottomleft: 10px;

border-top-left-radius: 10px;

border-bottom-left-radius: 10px;

}

.booklet .b-wrap-right{

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

-webkit-border-top-right-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-moz-border-radius-topright: 10px;

-moz-border-radius-bottomright: 10px;

border-top-right-radius: 10px;

border-bottom-right-radius: 10px;

}

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

.booklet .b-counter{

bottom:10px;

position:absolute;

display:block;

width:90%;

height:20px;

border-top:1px solid #ddd;

color:#222;

text-align:center;

font-size:12px;

padding:5px 0 0;

background:transparent;

-moz-box-shadow:0px -1px 1px #fff;

-webkit-box-shadow:0px -1px 1px #fff;

box-shadow:0px -1px 1px #fff;

opacity:0.8;

}

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

.book_wrapper{

margin:0 auto;

padding-top:50px;

width:905px;

height:540px;

position:relative;

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

}

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

.book_wrapper h1{

color:#13386a;

margin:5px 5px 5px 15px;

font-size:26px;

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

padding-bottom:7px;

}

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

.book_wrapper p{

font-size:16px;

margin:5px 5px 5px 15px;

}

.book_wrapper a.article,

.book_wrapper a.demo{

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

display:block;

width:95px;

height:41px;

text-decoration:none;

outline:none;

font-size:16px;

color:#555;

float:left;

line-height:41px;

padding-left:47px;

}

.book_wrapper a.demo{

margin-left:50px;

}

.book_wrapper a.article:hover,

.book_wrapper a.demo:hover{

background-position:50% -41px;

color:#13386a;

}

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

.book_wrapper img{

margin:10px 0px 5px 35px;

width:300px;

padding:4px;

border:1px solid #ddd;

-moz-box-shadow:1px 1px 1px #fff;

-webkit-box-shadow:1px 1px 1px #fff;

box-shadow:1px 1px 1px #fff;

}

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

.booklet .b-wrap-right img{

border:1px solid #E6E3C2;

}

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

a#next_page_button,

a#prev_page_button{

display:none;

position:absolute;

width:41px;

height:40px;

cursor:pointer;

margin-top:-20px;

top:50%;

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

}

a#prev_page_button{

left:-30px;

}

a#next_page_button{

right:-30px;

background-position:-41px -40px;

}

a#next_page_button:hover{

background-position:-41px 0px;

}

a#prev_page_button:hover{

background-position:0px 0px;

}

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

.loading{

width:160px;

height:56px;

position: absolute;

top:50%;

margin-top:-28px;

right:135px;

line-height:56px;

color:#fff;

padding-left:60px;

font-size:15px;

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

opacity: 0.7;

z-index:9999;

-moz-border-radius:20px;

-webkit-border-radius:20px;

border-radius:20px;

}

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

JAVASCRIPT

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

var $mybook = $('#mybook');

var $bttn_next = $('#next_page_button');

var $bttn_prev = $('#prev_page_button');

var $loading = $('#loading');

var $mybook_images = $mybook.find('img');

var cnt_images = $mybook_images.length;

var loaded = 0;

//preload all the images in the book,

//and then call the booklet plugin

$mybook_images.each(function(){

var $img = $(this);

var source = $img.attr('src');

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

++loaded;

if(loaded == cnt_images){

$loading.hide();

$bttn_next.show();

$bttn_prev.show();

$mybook.show().booklet({

name: null,

// name of the booklet to display in the document title bar

width: 800,

// container width

height: 500,

// container height

speed: 600,

// speed of the transition between pages

direction: 'LTR',

// direction of the overall content

// organization, default LTR, left to right, can be

// RTL for languages which read right to left

startingPage: 0,

// index of the first page to be displayed

easing: 'easeInOutQuad',

// easing method for complete transition

easeIn: 'easeInQuad',

// easing method for first half of transition

easeOut: 'easeOutQuad',

// easing method for second half of transition

closed: true,

// start with the book "closed", will add empty

// pages to beginning and end of book

closedFrontTitle: null,

// used with "closed", "menu" and "pageSelector",

// determines title of blank starting page

closedFrontChapter: null,

// used with "closed", "menu" and "chapterSelector",

// determines chapter name of blank starting page

closedBackTitle: null,

// used with "closed", "menu" and "pageSelector",

// determines chapter name of blank ending page

closedBackChapter: null,

// used with "closed", "menu" and "chapterSelector",

// determines chapter name of blank ending page

covers: false,

// used with "closed", makes first and last pages

//into covers, without page numbers (if enabled)

pagePadding: 10,

// padding for each page wrapper

pageNumbers: true,

// display page numbers on each page

hovers: false,

// enables preview pageturn hover animation,

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

overlays: false,

// enables navigation using a page sized overlay,

// when enabled links inside the content will

// not be clickable

tabs: false,

// adds tabs along the top of the pages

tabWidth: 60,

// set the width of the tabs

tabHeight: 20,

// set the height of the tabs

arrows: false,

// adds arrows overlayed over the book edges

cursor: 'pointer',

// cursor css setting for side bar areas

hash: false,

// enables navigation using a hash string,

// ex: #/page/1 for page 1, will affect

// all booklets with 'hash' enabled

keyboard: true,

// enables navigation with arrow keys

// (left: previous, right: next)

next: $bttn_next,

// selector for element to use as click

// trigger for next page

prev: $bttn_prev,

// selector for element to use as click

// trigger for previous page

menu: null,

// selector for element to use as the menu area,

// required for 'pageSelector'

pageSelector: false,

// enables navigation with a dropdown menu of pages,

// requires 'menu'

chapterSelector: false,

// enables navigation with a dropdown menu of chapters,

// determined by the "rel" attribute, requires 'menu'

shadows: true,

// display shadows on page animations

shadowTopFwdWidth: 166,

// shadow width for top forward anim

shadowTopBackWidth: 166,

// shadow width for top back anim

shadowBtmWidth: 50,

// shadow width for bottom shadow

before: function(){},

// callback invoked before each page turn animation

after: function(){}

// callback invoked after each page turn animation

});

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

}

}).attr('src',source);

});

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

Cufon.replace('h1,p,.b-counter');

Cufon.replace('.book_wrapper a', {hover:true});

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

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

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

</script>

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

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

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

1
2
3
4
5

Категория: CSS//HTML//JS | Просмотров: 937 | Добавил: Admin | Рейтинг: 0.0/0

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость

Вход

Регистрация

Читаемое

Категории

CSS//HTML//JS [70]

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

Всегда в теме

Статистика

Свежий софт

Рекомендуем

Поиск

Вход

Читаемое

Категории

Заходи не жди