ForumDesign TechSupport - Дизайн для форумов и техническая поддержка

Объявление

Акция! Дизайн «MyBB Technical Support»

Дизайн для форума MyBB в тематике компьютерных сообществ или технической поддержки
Стоимость при покупке эксклюзивно: 2000р 1200р
Скидка 40%. В стоимость входит настройка и корректировка дизайна.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Дизайн для MyBB форума гильдии WoW Exodar

Детализированный rpg-дизайн для mybb форума гильдии в тематике Экзодара.
Стоимость: 2150р*
В стоимость входит настройка и корректировка дизайна.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Фонд форумаРеклама на сайте
Стать модераторомОтзывыДонат

Предложения

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог скриптов » Буклет - имитация книги с перелистыванием страниц


Буклет - имитация книги с перелистыванием страниц

Сообщений 1 страница 10 из 71

1

Долгие поиски закончились. Вниманию всех-всех и еще раз всех. Скрипт, позволяющий воссоздать книгу с эффектом перелистывания страниц. Молескин. Буклет. Книгу таинств, не знаю, что еще. Я сразу скажу, он сложно настраиваемый, но ради такого я готов помогать с настройкой внешнего вида каждому. Потому что это безумно красиво. Итак.

[html]<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<style>
.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(http://ruseller.com/lessons/les809/demo … eft_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(http://ruseller.com/lessons/les809/demo … ght_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:80%;
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;
}
.book_wrapper{
margin:0 auto;
padding-top:50px;
width:860px;
height:540px;
position:relative;
background:transparent url(http://forumstatic.ru/files/000d/19/7b/55725.png) no-repeat 28px 29px;
}
.book_wrapper h1{
color:#13386a;
margin:5px 5px 5px 15px;
font-size:26px;
background:transparent url(http://ruseller.com/lessons/les809/demo/images/h1.png) no-repeat bottom left;
padding-bottom:7px;
}
.book_wrapper p{
font-size:14px;
margin:5px 5px 5px 15px;
}
.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:36px;
height:40px;
cursor:pointer;
margin-top:-20px;
top:50%;
background:transparent url(http://ruseller.com/lessons/les809/demo … uttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
left:-8px;
}
a#next_page_button{
right:-6px;
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:12px;
background: #000 url(http://ruseller.com/lessons/les809/demo … loader.gif) no-repeat 10px 50%;
opacity: 0.7;
z-index:9999;
-moz-border-radius:20px;
-webkit-border-radius:20px;
border-radius:20px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>
<div class="book_wrapper">

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

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

    <div id="loading" class="loading">Загружаем страницы...</div>

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

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

            <img src="ссылка_на_картинку" alt=""/>
            <h1>Заголовок страницы 1</h1>
            <p>Наполнение страницы 1 </p>

        </div>

        <div>

            <img src=" ссылка_на_картинку " alt="" />

            <h1>Заголовок страницы два</h1>
<p>Контент второй страницы </p>

        </div>        <div>
        </div>
    </div>
    </div>

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

    $(function() {

        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;

        //Предварительно загружаем все страницы в книжке,

        //а затем вызываем плагин Booklet

        $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,                            // Имя буклета, которое выводится в заголовке документа

                width:              725,                             // Ширина контейнера

                height:             450,                             // Высота контейнера

                speed:              600,                             // Скорость перехода между страницами

                direction:          'LTR',                           // Направление организации контента, по умолчанию LTR (left to right - слева направо), может быть RTL  (справа налево)

                startingPage:       0,                               // Индекс страницы, которая будет выводиться первой

                easing:             'easeInOutQuad',                 // Метод сглаживания для завершения трансформации

                easeIn:             'easeInQuad',                    // Метод сглаживания для первой половины трансформации

                easeOut:            'easeOutQuad',                   // Метод сглаживания для второй половины трансформации

                closed:             true,                            // Запускаем книгу "закрытой", будут добавлены пустые страницы в начало и конец

                closedFrontTitle:   null,                            // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой начальной старницы

                closedFrontChapter: null,                            // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой начальной страницы

                closedBackTitle:    null,                            // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой последней страницы

                closedBackChapter:  null,                            // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой конечной страницы

                covers:             false,                           // Используется с опцией "closed", делает первую и последнюю страницу обложками, без нумерации страниц (если возможно)

                pagePadding:        10,                              // Отступ для обертки каждой страницы

                pageNumbers:        true,                            // Выводит номер на каждой странице

                hovers:             false,                           // Разрешает анимацию предварительного просмотра страниц при наведени курсора мыши, выводятся маленькие изображения предыдущей и следующей страницы

                overlays:           false,                           // Разрешает навигацию с использованием слоя перекрытия, когда разрешено - ссылки в контексте не будут реагировать на нажатия кнопки мыши

                tabs:               false,                           // Добавляет закладки вдоль верха страницы

                tabWidth:           60,                              // Определяем ширину закладок

                tabHeight:          20,                              // Определяем высоту закладок

                arrows:             false,                           // Добавляем стрелки поверх кромок книжки

                cursor:             'pointer',                       // Установка css для курсора для боковой области книжки

                hash:               false,                           // Разрешает навигацию с использованием хэш строки, например: #/page/1 для страницы 1, будет действовать на все книжки с разрешенной опцией 'hash'

                keyboard:           true,                            // Разрешает навигацию с использованием клавиш стрелок(влево: предыдущая страница, вправо: следующая)

                next:               $bttn_next,              // Селектор для элемента, который используется как выключатель перехода к следующей странице

                prev:               $bttn_prev,              // Селектор для элемента, который используется как выключатель перехода к предыдущей странице

                menu:               null,                            // Селектор элемента, который используется как область меню, требуется для 'pageSelector'

                pageSelector:       false,                           // Разрешает навигацию с помощью выпадающего меню для страниц, требует опции 'menu'

                chapterSelector:    false,                           // Разрешает навигацию с помощью выпадающего меню глав, определяется атрибутом "rel", требует опции 'menu'

                shadows:            true,                            // Выводить тени при анимации страниц

                shadowTopFwdWidth:  166,                             // Ширина тени для верха анимации вперед

                shadowTopBackWidth: 166,                             // Ширина тени для верха анимации назад

                shadowBtmWidth:     50,                              // Ширина тени для низа анимации

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

        </script>
[/html]

Подключаемые скрипты и стили (html верх или низ, если скрипт размещен на странице, то в контейнер страницы)

Код:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="http://ruseller.com/lessons/les809/demo/booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />

Стиль. С ним – отдельные сложности, рассказать их все сразу невозможно, поэтому по мере возникновения вопросов я буду на них отвечать. Сразу скажу: чтобы организовать такой красивый скрипт, используется картинка-подложка, имитирующая книгу. Перелистывание как таковое можно размещать и без нее.

Код:
<style> 
.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(http://ruseller.com/lessons/les809/demo/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(http://ruseller.com/lessons/les809/demo/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:80%;
	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;
}
.book_wrapper{
	margin:0 auto;
	padding-top:50px;
	width:860px;
	height:540px;
	position:relative;
	background:transparent url(http://forumstatic.ru/files/000d/19/7b/55725.png) no-repeat 28px 29px;
}
.book_wrapper h1{
	color:#13386a;
	margin:5px 5px 5px 15px;
	font-size:26px;
	background:transparent url(http://ruseller.com/lessons/les809/demo/images/h1.png) no-repeat bottom left;
	padding-bottom:7px;
}
.book_wrapper p{
	font-size:14px;
	margin:5px 5px 5px 15px;
}
.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:36px;
	height:40px;
	cursor:pointer;
	margin-top:-20px;
	top:50%;
	background:transparent url(http://ruseller.com/lessons/les809/demo/images/buttons.png) no-repeat 0px -40px;
}
a#prev_page_button{
	left:-8px;
}
a#next_page_button{
	right:-6px;
	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:12px;
	background: #000 url(http://ruseller.com/lessons/les809/demo/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;
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
</style>

Размещение страниц:

<div class="book_wrapper">

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

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

    <div id="loading" class="loading">Загружаем страницы...</div>

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

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

            <img src="ссылка_на_картинку" alt=""/>
            <h1>Заголовок страницы 1</h1>
            <p>Наполнение страницы 1 </p>

        </div>

        <div>

            <img src=" ссылка_на_картинку " alt="" />

            <h1>Заголовок страницы два</h1>
<p>Контент второй страницы </p>

        </div>        <div>
        </div>
    </div>
    </div>

        <div>
    </div>

И на последок – сам скрипт. Настраиваемый. Все опции описаны.

Код:
   <script type="text/javascript">

    	$(function() {

        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;

        //Предварительно загружаем все страницы в книжке,

        //а затем вызываем плагин Booklet



        $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,                            // Имя буклета, которое выводится в заголовке документа

                width:              725,                             // Ширина контейнера

                height:             450,                             // Высота контейнера

                speed:              600,                             // Скорость перехода между страницами

                direction:          'LTR',                           // Направление организации контента, по умолчанию LTR (left to right - слева направо), может быть RTL  (справа налево)

                startingPage:       0,                               // Индекс страницы, которая будет выводиться первой

                easing:             'easeInOutQuad',                 // Метод сглаживания для завершения трансформации

                easeIn:             'easeInQuad',                    // Метод сглаживания для первой половины трансформации

                easeOut:            'easeOutQuad',                   // Метод сглаживания для второй половины трансформации



                closed:             true,                            // Запускаем книгу "закрытой", будут добавлены пустые страницы в начало и конец

                closedFrontTitle:   null,                            // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой начальной старницы

                closedFrontChapter: null,                            // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой начальной страницы

                closedBackTitle:    null,                            // Используется с опциями "closed", "menu" и "pageSelector", определяет заголовок пустой последней страницы

                closedBackChapter:  null,                            // Используется с опциями "closed", "menu" и "chapterSelector", определяет имя главы пустой конечной страницы

                covers:             false,                           // Используется с опцией "closed", делает первую и последнюю страницу обложками, без нумерации страниц (если возможно)



                pagePadding:        10,                              // Отступ для обертки каждой страницы

                pageNumbers:        true,                            // Выводит номер на каждой странице



                hovers:             false,                           // Разрешает анимацию предварительного просмотра страниц при наведени курсора мыши, выводятся маленькие изображения предыдущей и следующей страницы

                overlays:           false,                           // Разрешает навигацию с использованием слоя перекрытия, когда разрешено - ссылки в контексте не будут реагировать на нажатия кнопки мыши

                tabs:               false,                           // Добавляет закладки вдоль верха страницы

                tabWidth:           60,                              // Определяем ширину закладок

                tabHeight:          20,                              // Определяем высоту закладок

                arrows:             false,                           // Добавляем стрелки поверх кромок книжки

                cursor:             'pointer',                       // Установка css для курсора для боковой области книжки



                hash:               false,                           // Разрешает навигацию с использованием хэш строки, например: #/page/1 для страницы 1, будет действовать на все книжки с разрешенной опцией 'hash'

                keyboard:           true,                            // Разрешает навигацию с использованием клавиш стрелок(влево: предыдущая страница, вправо: следующая)

                next:               $bttn_next,              	 // Селектор для элемента, который используется как выключатель перехода к следующей странице

                prev:               $bttn_prev,              	 // Селектор для элемента, который используется как выключатель перехода к предыдущей странице



                menu:               null,                            // Селектор элемента, который используется как область меню, требуется для 'pageSelector'

                pageSelector:       false,                           // Разрешает навигацию с помощью выпадающего меню для страниц, требует опции 'menu'

                chapterSelector:    false,                           // Разрешает навигацию с помощью выпадающего меню глав, определяется атрибутом "rel", требует опции 'menu'



                shadows:            true,                            // Выводить тени при анимации страниц

                shadowTopFwdWidth:  166,                             // Ширина тени для верха анимации вперед

                shadowTopBackWidth: 166,                             // Ширина тени для верха анимации назад

                shadowBtmWidth:     50,                              // Ширина тени для низа анимации



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

        </script>

+4

2

конечно круто, но все равно ничего не понятно)
какие возможны настройки (шрифты, цвет, размер) куда можно вставлять картинки, какие их можно вставлять
можно ли в эту книжку вставлять облако тегов, или галерею картинок
более того - скрипт очень тормозной
предполагается ли его оптимизация? можно ли его спрятать под кнопку? чтобы он не грузился каждый раз на каждой новой странице форума
хотелось бы знать какие вообще элементы можно менять
комментарий в скрипте все равно не дают полного понимания настройки
неплохо бы было объяснить изменение всех возможных элементов в скриншотах и какие значения каждого элемента возможны
сколько страниц можно вставить? можно ли создать оглавление на первой странице вставить ссылки и кликая переходить к примеру на 8 страницу сразу?

0

3

Nikodima написал(а):

какие возможны настройки (шрифты, цвет, размер) куда можно вставлять картинки, какие их можно вставлять

Настройки возможны любые, отдельно для заголовка, для текста, для ссылок. Картинки вставляются на страницы, какие - странные вопрос, любые, которые пройдут под тегом <img src="">

Nikodima написал(а):

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

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

Nikodima написал(а):

хотелось бы знать какие вообще элементы можно менять

Можно менять стиль нумерации, текста, заголовка, кнопки (об этом напишу позже) и "подложку", то есть вид самой раскрытой книги.

Nikodima написал(а):

комментарий в скрипте все равно не дают полного понимания настройки
неплохо бы было объяснить изменение всех возможных элементов в скриншотах и какие значения каждого элемента возможны

Будет сделано.

Nikodima написал(а):

сколько страниц можно вставить? можно ли создать оглавление на первой странице вставить ссылки и кликая переходить к примеру на 8 страницу сразу?

Количество страниц не ограничено, насчет оглавления еще вчитаюсь в исходники - скажу.

0

4

Ghоst
уже немного понятней:3

0

5

Ghоst
О, чудо! Я же только сегодня подумывала об этой идее, только сегодня сидела за партой с подругой и обсуждала подобный способ изложения информации.

Отредактировано Бархат ночи (25.11.2011 16:36:57)

0

6

А вот не видно ли на просторах буклета подобного фокуса, но с отдельными изображениями? Просто загляните в онлайн-каталог Орифлейм!

0

7

Бархат ночи
Дело в том, что онлайн-каталог Орифлейм сделан на основе flash-анимации. Хотя чем плоха идея просто вставлять изображения, подогнанные по ширине и высоте к параметрам странички? Подгоняете, разрезаете как на разворот и вставляете на одну страничку одно, на другую - вторую.

0

8

Nikodima написал(а):

можно ли создать оглавление на первой странице вставить ссылки и кликая переходить к примеру на 8 страницу сразу?

Итак, я проверил, это действительно возможно.
Оглавление составляется при помощи hash-ссылок вида "<a href="#/page/5 "></a>", где указывается номер нужной страницы. Важно, что номер страницы для корректности нужно указывать нечетный. То есть открытой считается правая страница. Если вам нужно открыть четвертую, которая находится на одном развороте именно с пятой, вы указываете 5, а не 4 в конце ссылки.

Чтобы оглавление работало, в скрипте нужно найти строку

hash:               false,

и поменять значение на true.

+1

9

Ghоst
спасибо) за всё))

0

10

(((( я не поняла что куда вставлять( можете помочь?

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»



Вы здесь » ForumDesign TechSupport - Дизайн для форумов и техническая поддержка » Каталог скриптов » Буклет - имитация книги с перелистыванием страниц