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 - Дизайн для форумов и техническая поддержка » Каталог скриптов » Буклет - имитация книги с перелистыванием страниц


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

Сообщений 11 страница 20 из 71

11

Хорошо поняла!)))) спасибо отличный скриптик))))

0

12

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

0

13

Azarta

Уважаемые пользователи! Указывайте, пожалуйста, адрес форума при обращении!

Вы когда-нибудь видели, чтобы доктор со слов лечил пациента?

0

14

Ghоst
http://asgard.rolevaya.ru/
К слову: вебсайт в профиле. Иначе я бы сразу ссылку оставила.

0

15

Перенесла на тестовик: http://skazkirus.mybb.ru/

0

16

Azarta
http://uploads.ru/i/R/j/9/Rj9lU.gif
Вот такие дела -         

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

Оставлять ни в коем разе нельзя - скрипт пыхтит пока не загрузит - а ссылки не загружаемы!!!

можно просто закомментировать

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

Отредактировано Deff (15.01.2012 16:23:50)

0

17

Deff
Не работает) Только загрузка и крутится

0

18

Azarta
Интересный вопрос, почему так. На демо-странице все работает спокойно.
Хм, давайте я попробую дать вам код с нее, вы вставите и посмотрим - в вашем ли коде дело или в чем-то еще.
Попробуйте, кстати, скрипт убрать из html-низа, вставим его в само объявление.

Код:
    <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>

            <h1>Оглавление</h1>

            <p><a href="/#/page/5 ">Улучшаем элемент select</a></p>


        	</div>

        	<div>

            <img src="http://ruseller.com/lessons/les809/demo/images/1.jpg" alt=""/>

            <h1>Витаем в облаках - тема для сайта</h1>

            <p>В данном уроке с помощью jQuery мы сделаем макет сайта

            с горизонтальной прокруткой контента и параллаксом смещающихся облаков на фоне.</p>


        	</div>

        	<div>

            <img src="http://ruseller.com/lessons/les809/demo/images/2.jpg" alt="" />

        	
            <p>В качестве альтернативы для стандартных средств браузера

            в данном уроке мы построим крос-браузерное решение для организации

            диалога подтверждения  в форме простого в использовании плагина jQuery.

            Можно будет изменять текст, кнопки и действия, которые будут выполняться

            при нажатии на кнопки.</p>


        	</div>

        	<div>

            <img src="http://ruseller.com/lessons/les809/demo/images/3.jpg" alt="" />

            <h1>Улучшаем элемент select</h1>

            <p>При работе над проектом каждый разработчик стремиться получить одинаковый

            вид сайта в различных браузерах. К сожалению, большинство основных элементов

            - стандартные органы управления браузера - почти всегда трудно стилизовать. </p>

        	</div>

        	<div>

            <img src="http://ruseller.com/lessons/les809/demo/images/4.jpg" alt="" />

            <h1>Галерея с вращением изображений</h1>

            <p>В данном уроке с помощью jQuery и вращений CSS3, а также плагина jQuery Rotate

            мы создадим прекрасное слайдшоу. Его можно будет использовать на своем сайте для

            демонстрации портфолио или свойств продукта.</p>


        	</div>

        	<div>

            <img src="http://ruseller.com/lessons/les809/demo/images/5.jpg" alt="" />

        	

            <p>Вероятно, что вы уже слышали о новом элементе HTML5 canvas.

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

            графику. </p>


        	</div>

        	<div>

            <img src="http://ruseller.com/lessons/les809/demo/images/6.jpg" alt="" />

            <p>В данном уроке мы создадим пузырьковую навигацию с помощью jQuery. 

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

            которых при наведении курсора мыши "раскрывается" круглое подменю с 

            дополнительными пунктами. </p>

        	

        	</div>

        	<div>

            <img src="http://ruseller.com/lessons/les809/demo/images/7.jpg" alt="" />

            <h1>Коллапсирующая навигация по сайту</h1>

            <p>В данном уроке мы создадим коллапсирующее меню, которое 

            содержит вертикальные навигационные колонки и выскальзывающую 

            область с контентом. Когда курсор мыши проходит над пунктом меню 

            сверху выскальзывает изображение, а снизу - подменю. </p>

            
        	</div>

        	<div>

            <img src="http://ruseller.com/lessons/les809/demo/images/8.jpg" alt="" />

            <h1>Плавная вертикальная или горизонтальная прокрутка страницы</h1>

            <p>В данном уроке мы сделаем простую плавную прокрутку контента 

            страницы  помощью jQuery. Мы сделаем шаблон сайта для горизонтальной 

            и вертикальной прокруток, чтобы продемонстрировать эффект. </p>

            
        	</div>

        	<div>

        </div>

    	</div>

    </div>

        <div>

    </div>



        <!-- JavaScript -->



        <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:              true,                           // Разрешает навигацию с использованием хэш строки, например: #/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,                              // Ширина тени для низа анимации



                before:             function(){},                    // Возвратная функция, которая вызывается перед выполенением каждой анимации

                after:              function(){}                     // Возвратная функция, которая вызывается после выполнения каждой анимации

            	});


            }

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

        });

        

    	});

        </script>

0

19

Ghоst
Сейчас еще лучше) Всё работает, но с удивительно низкой скоростью, несмотря на то, что в демо версии всё в порядке. И это еще не всё. Если начать листать страницы назад, то после первого раза сайт полностью зависает, и не работает ни главная, ни админка, вообще ничего.

0

20

Код:
<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" />

А это вы не забыли, нэ? *рассматривает все это дело, почесывая репку*

0

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

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



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