Всем привет. Озадачился вот таким вопросом. Предположим, есть у нас тип контента. На странице списка постов (новостей) данного типа контента есть маленькое неудобство — текст, оформленный в визуальном редакторе показывается весь, строго от начала до конца. А хотелось бы какой-то спойлер, который часть текста скрывает, а при нажатии раскрывает полную новость. По типу вот этого:
Штатными средствами "обрезки" не получается то, что нужно, да и форматирование при этом удаляется. Хотелось бы, чтобы оно сохранялось.
Уважаемые, специалисты, кто готов взяться за реализацию данного хака? Сумму можем обговорить посредством ЛС
#1
15 декабря 2015 в 13:41
#2
15 декабря 2015 в 13:52
На странице списка постов или самого поста? Что то я не могу найти это
маленькое неудобство
HostelB наверно хочет, что-бы при просмотре списка постов, текст обрезался, но при необходимости разворачивался, не переходя в сам пост. Примерно как реализованно вконтакте.
Сегодня в 16:06
#4
15 декабря 2015 в 14:02
Понятно.
#5
15 декабря 2015 в 14:29
Усё верно. На странице списка постов. У меня что то мозг никак не может понять, как же это реализовать…
#6
16 декабря 2015 в 23:59
Усё верно. На странице списка постов. У меня что то мозг никак не может понять, как же это реализовать...
Нашел такое решение, может подойдет.
Делал так, берем дефолтный шаблон. \templates\default\content\default_list.tpl.php
добавляем в самый низ
<script src="readmore.js"></script> <script> $('.ft_html').readmore({ maxHeight: 100, moreLink: '<a href="#">Подробнее</a>', lessLink: '<a href="#">Скрыть</a>' }); </script>
Файлик readmore.min.js кидаем templates\default\js
соответственно в файле main.tpl.php в заголовке подключаем этот скрипт
<?php $this->addMainJS("templates/{$this->name}/js/readmore.min.js"); ?>
Прикрепленный файл
more_mobup.zip
6 Кб
#7
17 декабря 2015 в 01:28
Akziaplus, Вы заголовок читали?
#8
17 декабря 2015 в 10:00
zeffs, нет, это немного не то что нужно… Ваш скрипт просто сворачивает посты, а мне нужно чтобы скрипт обрезал часть текста и прятал в спойлер
#9
15 января 2016 в 14:34
HostelB, Можно попробовать взять это с того же пикабу, надо найти файл который это исполняет… и… а дальше не знаю)
#10
15 января 2016 в 15:22
хотя че не знаю, в файл вывода записи, прописать, если пост выше например 500 пикселей, то пост сворачивается… пойду пилитьа дальше не знаю
#11
15 января 2016 в 15:48
#12
15 января 2016 в 17:19
но знаний не хватаетОсталось прикррутить
Надо сделать так, что бы у каждой записи был уникальный ИД, а то работает только для первой записи…
#13
15 января 2016 в 20:18
Jestik, что-то я совсем запутался. вот знающие люди мне подсказывают, что нужно в js делать перебор массивов…
#14
15 января 2016 в 23:11
HostelB, создайте виджет "HTML блок" ближе к концу страницы (в подвале) и пропишите в нём код
<script> $(document).ready(function(){ var max_height = 80; var text_more = 'Читать далее'; var text_hide = 'Скрыть'; var div_shadow = '<div class="shadow" style="background: linear-gradient(rgba(255,255,255,0),#fff); height: 20px; margin: -20px 0 0 0; position: relative;"></div>'; $('.content_list').find('.field.ft_html.f_teaser').append('<a href="#" class="read_more">' + text_more + '</a>').children('.read_more').hide(); $('.content_list').find('.field.ft_html.f_teaser .value').height(function(){ var this_height; if ($(this).height() > max_height){ $(this).css({overflow:'hidden', valign:'top'}); $(this).after(div_shadow); this_height = max_height; } else { this_height = $(this).height(); } return this_height; }); $('.read_more').on('click', function(event){ event.preventDefault(); if ($(this).html() === text_more){ $(this).html(text_hide); } else { $(this).html(text_more); $(this).before(div_shadow); } }); }); </script>