Единый форум поддержки |
Привет, Гость! Войдите или зарегистрируйтесь.
Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Буклет - имитация книги с перелистыванием страниц
Доброго времени суток)
Нашел код для слайдера под названием "Буклет - имитация книги с перелистыванием страниц".
И всё бы отлично, да вот там не работают почему-то баннеры, ссылки и ХТМЛ-таблички. Просто хотел заполнить странички контентом, который обычно работает в таблице.
Или слайдер предназначен только для картинок и голого текста?
Есть ли решение, чтобы работал ХТМЛ-контент там? Мне всего то нужны ссылки на подфорумы-авы туда вкинуть и пару баннеров.
Курама
Ссылки на Ваш форум и на все ресурсы, о которых Вы говорите.
У себя на форуме я пока не ставил эту книжку. Т.е. попробовал и убрал сразу т.к. почемуто еще тормозит оно сильно.(может не будет, если книгу уменьшить раза в полтора?)
А ссылка на ресурс вот - http://forumd.ru/viewtopic.php?id=2472
А ссылка на ресурс вот - http://forumd.ru/viewtopic.php?id=2472
Это форум Герды, надо там и спросить.)))
Спасибо) Написал.
Прошу прощения. Что-то там совсем тихо. Может все-таки здесь кто-то сможет помочь?
Люди, мне бы хотя бы узнать, возможно ли решение с работой ХТМЛ-контента в этой книжке или нет. Если нет, и этот слайдер предназначен только для картинок и простого текста, то я отстану и забуду про нее)
Курама
Поставьте контент, что вам нужен, дайте ссылку на страницу установленным буклетом... я гляну
Поставил. Только теперь вообще не открывается ни книга, ни форум.
http://testso.mybb.ru
Курама
Ну чот наврали с установкой...
Зайдите через аварийный вход http://testso.mybb.ru/restore.php?
Cнимите код, поставьте с исходным контентом, а свой контент: ниже в блоке код
Отредактировано Deff (Пн, 2 Июл 2018 19:07:09)
Запутался с контентом. Пока поставил чужой с форума.
В общем, хочется перенести контент из таблички-переключалки в буклет
В таблице контент вот такой:
<ul class="s-tabs">
<span>Приветствие</span><span>Навигация</span><span>В игре</span><span>АМС</span><span>Активисты</span><span>ЧАТ</span><li class="stab">
<br /><br /><div align="center"><strong><span style="font-size: 19px";><span style="font-family:Han Zi;">Добро пожаловать на "Наруто: Печать времени"</span></span></strong>
<br />
<br />
<strong><span style="font-size: 12px";>Сенен по мотивам аниме "Наруто: Ураганные хроники" и фильма "Затерянная башня".<br /> Игра начинается с момента возвращения Наруто в Коноху и набирает обороты в последующие месяцы. Измененная ранее реальность, ведет историю по иному пути.</span></strong>
<br />
<br /><br />
<div align="center"><strong><span style="font-size: 12px;">Голосуй - поддержи форум</span></strong>
<br />
<br /><div align="center"><a href="http://forum-top.ru/vote/5160" title="Рейтинг форумов Forum-top.ru" target="blank"><img src="http://forum-top.ru/uploads/buttons/forum-top_88x31_1.gif" alt="Рейтинг форумов Forum-top.ru" /></a> <!-- Top.Roleplay.Ru -->
<script type="text/javascript" language="javascript">
var topRPGc="<img src='http://s01.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=24847&rnd=" + Math.random();
topRPGc += "&r="+escape(document.referrer)+"' width='1' height='1' border='0'>• • • <a href='http://rpgtop.su/24847' title='Рейтинг Ролевых Ресурсов - RPG TOP' target='top_'>"+
"<img src='http://img.rpgtop.su/88x31x11x5.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a> ";
document.write(topRPGc);
</script>
<noscript>
<img src='http://s01.rpgtop.su/cgi-bin-mod/iv.cgi?a=ins&id=24847' width='1' height='1' border='0'><a href='http://rpgtop.su/24847' target='_top'><img src='http://img.rpgtop.su/88x31x11x5.gif' alt='Рейтинг Ролевых Ресурсов - RPG TOP' border='0' width='88' height='31'></a>
</noscript>
<!-- /Top.Roleplay.Ru --></div></li>
<li class="stab">
<div align="center">
<table style="width: 62%;">
<tbody>
<tr><td style="width: 31%">
<br />
<br />
<br /><strong><span style="font-size: 15px";>ДО НАЧАЛА ИГРЫ</span></strong>
<br />
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=181"><em><strong>Гостевая|бронь</span></strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=174#p10420"><em><strong>Правила </strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=168"><em><strong>Сюжет</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=183#p10446"><em><strong>Техники и способности</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=169"><em><strong>Список персонажей</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewforum.php?id=78"><em><strong>Акции</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=214"><em><strong>Система наград</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=182"><em><strong>Объявления</strong>
</em></a>
</td><td style="width: 31%">
<br />
<br />
<br /><strong><span style="font-size: 15px";>ИГРОКАМ</span></strong>
<br />
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=208"><em><strong>Шаблон листа персонажа</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=209"><em><strong>Заявка на эпизод</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=187"><em><strong>Заказ ГМ</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=444#p33391"><em><strong>Заявки по техникам</a></strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=188#p10451"><em><strong>Поиск соигроков</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=184"><em><strong>Обсуждения игры</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=186"><em><strong>Отсутствие|смена роли</strong></em></a>
<br /> • <a href="http://curama.mybb.ru/viewtopic.php?id=436#p31591"><em><strong>Поздравляем!)</strong></em></a>
</td>
</tr></tbody>
</table>
</li><li class="stab">
<br />
<br /><strong><span style="font-size: 15px";>Краткий обзор по скрытым деревням</span></strong>
<div align="left">
<p align="left"><br />
<strong> Коноха:</strong>
<div class="post-box">
<div class="post-content">
<p><img class="postimg" src="http://c.radikal.ru/c23/1806/47/790d8136d761.png" alt="float:left" title="float:left">После смерти Сарутоби Хирузена - Третьего Хокаге, Листом в первое время правит Совет старейшин, после чего правление переходит к Цунаде.
Наруто и Джирайя, после трехлетнего отсутствия, возвращаются в селение. Положение в селении спокойное. Жители ведут привычный образ жизни. "Корень" продолжает действовать в тайне ото всех, следуя собственным целям.</p>
</div>
</div><strong> Суна:</strong>
<div class="post-box">
<div class="post-content">
<p><img class="postimg" src="http://c.radikal.ru/c26/1806/fa/40f8ddd04df5.png" alt="float:left" title="float:left">Суной правит Сабаку но Гаара. Жители и совет разделились на два лагеря, ходят волнения, по поводу нового Каге с темным прошлым. Селение постепенно налаживает политические отношения с Листом.
Недавно, кто-то совершил диверсию на водонапорной станции, вывел ее из строя, дабы лишить деревню воды. С какой целью это было сделано, пока неизвестно. Оказавшиеся в селении и остановившиеся на ночлег, Наруто и Хината, не могут бросить друга в беде. Они подключаются к спасению Суны и расследованию произошедшего.</p>
</div>
</div><strong> Кири:</strong>
<div class="post-box">
<div class="post-content">
<p><img class="postimg" src="http://d.radikal.ru/d00/1806/04/fc2fa50211e7.png" alt="float:left" title="float:left">Туманом правит Мэй Теруми. Селение постепенно оживает после кровавого периода и старается очистить свое имя. Живы некоторые представители клана Мурамаса, в виду чего возможны изменения во внутренней и внешней политике Мизу но куни. Хатаке Какаши и Узумаки Наруто расследуют исчезновение научно-исследовательского судна страны Огня близ одного из островов Воды, но на начальном этапе сталкиваются в порту Кири с кланом Мурамаса, устроившем нападение на деревню.</p>
</div>
</div><strong> Кумо:</strong>
<div class="post-box">
<div class="post-content">
<p><img class="postimg" src="http://c.radikal.ru/c32/1806/b8/aa9db5dac974.png" alt="float:left" title="float:left">Облаком правит Эй Йотсукэ. Внутри селения жизнь идет своим чередом, однако враги окружают извне. Райкаге ведет борьбу с преступной организацией "Черное солнце", о которой узнал несколько недель назад, после того, как один из его подчиненных, предал его, убив одного из ценных шиноби Молнии по приказу "Черного солнца". </p>
</div>
</div>
<strong> Ива:</strong>
<div class="post-box">
<div class="post-content">
<p><img class="postimg" src="http://d.radikal.ru/d04/1806/d9/ccf132cc2198.png" alt="float:left" title="float:left">Камнем правит Рьётенбин но Оноки. Между Каге и советом наблюдаются разногласия. Группа радикалов хотела развязать войну между Ивой и Конохой. Дабы предотвратить это, команда Листа под руководством опытного бойца отправилась к штабу организации и выполнила миссию успешно.</p>
</div>
</div><strong> Аме:</strong>
<div class="post-box">
<div class="post-content">
<p><img class="postimg" src="http://d.radikal.ru/d20/1806/6a/f3d8321b74f7.png" alt="float:left" title="float:left">Дождем правят Пейн и Конан. Селение залечивает раны после гражданской войны. Экономика постепенно идет вверх. Каге продолжает стремиться к цели достижения мира с соседними странами.
</p>
</p>
</div></div></li>
<li class="stab">
<br />
<div align="center">
<table style="width: 90%;">
<tbody>
<tr>
<td style="width: 32%">
<a href="http://curama.mybb.ru/messages.php?action=new&uid=2" target="_blank"><img src="http://d.radikal.ru/d42/1806/d4/877e4c621603.png"</a></div>
</td>
<td style="width: 32%">
<a href="http://curama.mybb.ru/messages.php?action=new&uid=5" target="_blank"><img src="http://d.radikal.ru/d36/1806/87/771fbb9175a4.png"</a></div>
</td>
<td style="width: 24%;"> <br />Приветствуем Вас, дорогие гости и форумчане!)
<br /> <br /> Если есть вопросы, требующие индивидуального обсуждения - жмите на аватарку!
</td>
</tr>
</tbody>
</table></li>
<li class="stab">
<br />
<br /><strong><span style="font-size: 15px";>Активисты июня</span></strong>
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 20%">
<br /><div align="center"><a href="http://curama.mybb.ru/viewtopic.php?id=235" target="_blank"><img src="http://d.radikal.ru/d08/1806/2e/4540ff9f99be.png"</a><a href="http://curama.mybb.ru/viewtopic.php?id=424" target="_blank"><img src="http://d.radikal.ru/d38/1806/60/3d28b671a5ba.png"</a>
<a href="http://curama.mybb.ru/viewtopic.php?id=477" target="_blank"><img src="http://d.radikal.ru/d29/1806/74/f3928cb942da.png"</a><a href="http://curama.mybb.ru/viewtopic.php?id=215" target="_blank"><img src="http://c.radikal.ru/c38/1806/d3/df737d7bcfc5.png"</a><a href="http://curama.mybb.ru/viewtopic.php?id=264#p13705" target="_blank"><img src="http://b.radikal.ru/b18/1806/b6/e6af8574243e.png"</a></div>
</td>
</tr>
</tbody>
</table></li>
<li class="stab">
<div align="center">
<table style="width: 100%;">
<tbody>
<tr>
<br />
<br /><script type="text/javascript" charset="UTF-8" src="//curamamybbru.chatovod.ru/mini.js?width=215&popup=1"></script>
</td>
</tr>
</tbody>
</table>
</li></ul>
Курама
1-е - таблица у Вас кривая!!!
вставил чистую новую ( стиль чуть выше таблы)
Замените контент в Объявлении:
<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>
<!-- Таблица 00 -->
<style>
#menu span {
padding: 7px 15px 7px;
margin-right: 5px;
margin: 10px 0;
width: 100px;
text-decoration: none;
}
#menu .tabactive {
color: #2662DF;
background:#F9F1DD;
}
#submenu {
padding: 5px;
height: 200px; /*Высота таблички*/
text-align: center;
font-size: 12px;
width: 720px;/*Ширина таблички*/
}
.submenutext {
padding: 8px;
outline:red solid 1px;
color: #fff;
display: none;
height: 60px;
text-align:left;
}
#MenuTxT {
background:url(http://savepic.ru/2287761.png) no-repeat center;
text-shadow: #755a57 1px 1px 5px,#9C816C -1px -1px 5px,#91776b 1px 1px 1px;
}
</style>
<table style="width:350px;margin-left:-23px;">
<tbody>
<tr>
<td>
<div id="menu"> <b>
<span alt=#sm1 style="cursor: pointer;">Кнопка 1</span>
<span alt=#sm2 style="cursor: pointer;">Кнопка 2</span>
<span alt=#sm3 style="cursor: pointer;">Кнопка 3</span>
</b>
</div>
</td>
</tr>
<tr>
<td id="MenuTxT" align="center" valign="top">
<div id="submenu" align="center">
<div id="sm1" class="submenutext">
<br/><br/>
Контент 1-й кнопки
</div>
<div id="sm2" class="submenutext"><br /><br />
Контент 2-й кнопки
</div>
<div id="sm3" class="submenutext"><br /><br />
Контент 3-й кнопки
</div>
<div id="sm4" class="submenutext"><br /><br />
Контент 4-й кнопки
</div>
<div id="sm5" class="submenutext"><br /><br />
Контент 5-й кнопки
</div>
</div><!--конец контента кнопок-->
</td>
</tr>
</tbody>
</table></center><!-- End/Таблица 00 -->
</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>
<!-- К табличке: -->
<script type="text/javascript"><!--Cкрипт Добавки Инфо-блока перед первой категорией -->
$("td.#MenuTxT div.submenutext").hide();
/*$(".tabs span:first").addClass("active").show();
$("td.#MenuTxT div.submenutext:first").show();*/
$("div.#menu span").click(function() {
$("div.#menu span").removeClass("tabactive");
$(this).addClass("tabactive");
$("td.#MenuTxT div.submenutext").hide();
var activeDiv = $(this).attr("alt");
$("div."+activeDiv).fadeIn();
return false; });
</script><!--End/Cкрипт Добавки Инфо -->Не вижу смысла вставлять таблицу, когда можно вместо кнопок тыкать слайдер! И контент Вкладок таблы вставлять на каждую страничку!
2-е Скрипты в слайдеры вставлять низзя!!!
Типо чат или каталог РПГ!
Вставка на каждую страницу между тегами <div></div> в дефолтной Вами вставленном коде в объяве
Вот выделил красным одну из страниц
<div>
<img src="http://ruseller.com/lessons/les809/demo/images/3.jpg" alt="" />
<h1>Улучшаем элемент select</h1>
<p>При работе над проектом каждый разработчик стремиться получить одинаковый
вид сайта в различных браузерах. К сожалению, большинство основных элементов
- стандартные органы управления браузера - почти всегда трудно стилизовать. </p>
</div>
В контенте красным не должно быть дополнительных тегов <div> </div> ! (иначе будет считать их как новые страницы
Отредактировано Deff (Пн, 2 Июл 2018 21:50:57)
Спасибо огромное,Deff)
Красота теперь, и книга не тормозит) Жаль что все-таки нельзя скрипты туда ставить(
А что если сделать эту книгу совсем маленькой (раза в 4 например) и туда аватарки с ссылками на анкеты например - такое можно ставить?
А что если сделать эту книгу совсем маленькой (раза в 4 например) и туда аватарки с ссылками на анкеты например - такое можно ставить?
Запросто, главное чоб между div(ами) не было иных div и скриптов
скрипты можно ставить ниже слайдера, которые будут менять контент после прогрузки слайдера ( пример для той таблицы, что вставил)
Спасибо) буду пробовать 
Уменьшить-уменьшил, а выровнять теперь не получается(
Курама
Лучше вставьте Код, как я Вам давал и выложите тут контент вставки для пары - тройки страниц
А, все, прошу прощения. Удалось выровнять).
Вы здесь » Единый форум поддержки » Вопросы по оформлению форума » Буклет - имитация книги с перелистыванием страниц