MgazProffi

Скрытие текста под Hide аналог [spoiler]

Рекомендуемые сообщения

MgazProffi    7

https://opencartforum.com/index.php?app=downloads&module=display&section=screenshot&id=1827

Название: Скрытие текста под Hide аналог

Добавил: MgazProffi

Добавлен: 30 мая 2014

Категория: Прочее

 

Автор скрипта readmore.js JED FOSTER (http://jedfoster.com/)

Если у Вас шаблон лежит не в папку catalog/view/theme/default/, то в файле vqmod/xml/readmorejs.xml заменить default в пути к файлам на название папки с Вашим шаблоном

 

Решение проблемы с недооткрытием спойлера(ссылка на сообщение комментатора arvaal) или скачайте ReadmoreJs-fix1.zip 

Для плавного раскрытия скачивайте оригинальный ReadmoreJs.zip

Как работает?

В catalog/view/theme/default/template/common/header.tpl
после

<script type="text/javascript" src="catalog/view/javascript/common.js"></script>

добавляются 2 строчки

<script src="catalog/view/javascript/jquery/readmorejs/readmore.min.js"></script><link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/readmorejs/readmorejs.css"></script>

В файле catalog/view/theme/default/template/common/footer.tpl перед <div id="powered"> добавляется

$('.readmore').readmore({ speed: 700, maxHeight: 500, moreLink: '<a href="#"><span class="text">Развернуть</span></a>', lessLink: '<a href="#"><span class="text">Свернуть</span></a>'});

Внимание: файл footer.tpl должен быть в кодировке UTF-8 ез BOOM

Как использовать?

Внимание: требует vqmod не ниже 2.4.0

I. Подключение
Закачать все файлы из папки upload в корень Вашего сайта
II. В режиме исходного кода в Вашем редакторе при редактировании материала:
То, что хотим сократить заключаем между
<div class="readmore">
и
</div>
Пример:
<div class="readmore"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus diam non velit tristique tristique. Aenean id bibendum ante. Praesent sit amet porta elit. In eget venenatis turpis. Quisque feugiat mauris vel ornare sodales. Nam pellentesque sagittis dui a blandit. Proin ac convallis erat. Vestibulum rutrum id velit vel pellentesque.

Pellentesque mollis, nisi sit amet faucibus pulvinar, orci orci venenatis eros, at convallis lacus nunc id lectus. Quisque luctus sapien nec dolor rutrum tincidunt. Aliquam erat volutpat. Morbi cursus rhoncus elit eu blandit. Curabitur tempus non mi et placerat. Donec eu congue arcu. Vivamus eros odio, aliquam eget auctor vel, viverra et mauris. Maecenas at est nisl. Suspendisse potenti. Suspendisse vestibulum nulla quis metus molestie varius. Suspendisse mollis non tellus a molestie. Nulla facilisi.

Morbi tempor adipiscing nibh, in aliquet dui tempus nec. Nulla facilisi. Sed cursus aliquet ligula, ut faucibus enim tincidunt quis. Nam tempor eget magna vel sodales. Vestibulum quis vulputate elit. In vitae purus vulputate, faucibus diam nec, eleifend magna. Nulla iaculis fringilla quam ac vehicula. Fusce nec tristique nunc. Curabitur vitae elit non libero tincidunt tempus. Praesent a nisi pretium, luctus tortor at, consectetur nisl. Nullam vel mollis diam. Vivamus placerat sed nisi ac dapibus.

Nam eget sagittis orci. Mauris lobortis porta justo sit amet sagittis. In eleifend convallis risus interdum dictum. Phasellus faucibus tortor massa, et eleifend erat sagittis sagittis. Sed convallis nulla sit amet ornare lobortis. Ut tempor, erat ut facilisis porttitor, tellus purus vestibulum nibh, non vehicula dolor velit at lorem. Quisque vitae libero volutpat, pretium augue eget, fermentum purus. Morbi ultricies nibh neque, vitae porttitor elit faucibus ut. Integer sit amet lorem et purus luctus dictum. Mauris turpis ipsum, facilisis ac adipiscing eget, ultrices quis sapien. Suspendisse eget magna a arcu ultricies ullamcorper. Quisque semper ac lorem at scelerisque. Suspendisse cursus ante vitae velit lacinia dictum. In faucibus dui eu elit lacinia rhoncus.

Etiam augue neque, euismod sed arcu et, dignissim consequat ligula. In ut ipsum vitae lectus venenatis fermentum. Cras sit amet orci lacinia, gravida dui viverra, imperdiet elit. Vestibulum feugiat urna id nisl suscipit blandit. Donec nec sem nec magna porta aliquet. Suspendisse in mattis diam, quis laoreet erat. Etiam ac orci id orci elementum vehicula. Nulla faucibus a libero sit amet placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus, velit a tempus pulvinar, velit nulla gravida justo, non congue tellus magna non sem.
</div>
III.
Кастомизация:
speed - на сколько замедлять открытие скрытого текста
maxHeight - сколько в пикселях должна быть высота текста перед тем, как остальную часть скрывать
moreLink - менять можно <span class="text">Развернуть</span> на свой текст и класс
essLink: 'менять можно <span class="text">Свернуть</span> на свой текст и класс
Все изменения производить в
catalog/view/javascript/jquery/readmorejs/readmorejs.css
и
vqmod/xml/readmorejs.xml

По сути это даже не модуль, а просто готовое решение интеграции readmore.js и opencart

 

 

Нажмите здесь, чтобы скачать файл

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Bustard    4

а можно прикрутить автоматическое скрытие текста, если он больше определённой (заданной) длины?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
MgazProffi    7

Да, в общем так и происходит)

А для того, что-бы не вставлять див в ручную нужно только немного изменить xml файл, точнее добавить вставку контейнера(div) с классом readmore в начале контейнера <div class="category-info"> и закрывающего </div> вконце. Это для категорий(что-бы их описание скрывалось после задания максимальной высоты текста)

Если для описания товаров, то тоже самое для контейнера <div id="tab-description">

А размеры блока( максимальная высота в px) задаются в файле catalog/view/javascript/jquery/readmorejs/readmorejs.css

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Kapust    0

Добрый день - помогите пожалуйста со следующим вопросом - http://elegant-mobile.com/index.php?route=product/category&path=20_26 ссылка тут на форуме так и не работает elegant-mobile.com/index.php?route=product/category&path=20_26  попробуйте так .... подрубрики третьего колена выводятся все в странице .... можно как то сделать что бы выводилось только восемь подрубрик и была кнопка - Показать все. примерно как тут, но тут без картинок, но смысл тот же http://itsellopt.com.ua/phones/htc тут кнопка Другие модели.
Можно ли использовать ваш плагин? https://opencartforu...аналог-spoiler/ и если да то как его настроить
Спасибо.

размеры отображаемого экрана приведены на картинке

size.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
MgazProffi    7

Добрый день - помогите пожалуйста со следующим вопросом - http://elegant-mobile.com/index.php?route=product/category&path=20_26 ссылка тут на форуме так и не работает elegant-mobile.com/index.php?route=product/category&path=20_26  попробуйте так .... подрубрики третьего колена выводятся все в странице .... можно как то сделать что бы выводилось только восемь подрубрик и была кнопка - Показать все. примерно как тут, но тут без картинок, но смысл тот же http://itsellopt.com.ua/phones/htc тут кнопка Другие модели.

Можно ли использовать ваш плагин? https://opencartforu...аналог-spoiler/ и если да то как его настроить

Спасибо.

размеры отображаемого экрана приведены на картинке

size.jpg

Всё, что делает скрипт это проверяет свой контейнер и если он выше, чем заданное кол-во пикселей скрывает содержимое. Всё возможно, но я бы не рекомендовал использовать его.

В примере, который вы скинули используется динамическая подгрузка товаров, так что поищите на форуме в дополнениях.

В общем readmore.js подходит для текста, пару фоток, но большие контейнеры с обилием графики и html кода не рекомендую в него запихивать, т.к. пострадает производительность и не факт, что сам скрипт будет работать корректно.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
arvaal    11

Здравствуйте, подскажите пожалуйста как поправить неполное раскрытие контейнера?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
MgazProffi    7

Здравствуйте, подскажите пожалуйста как поправить неполное раскрытие контейнера?

В этом вся проблема, долго гуглил, но ничего не нашёл, причина скорее всего в самом скрипте

Возможные причины появления бага:

Но проявляется это либо когда слишком много html кода внутри, либо когда картинки внутри(больше 1-й), либо если вы указываете в условии сокрытия контейнера большое число (больше 1000px).

Как-то так. Если кто найдёт решение - будет здорово. Обязательно отпишитесь, перезалью с исправлением

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
arvaal    11

В этом вся проблема, долго гуглил, но ничего не нашёл, причина скорее всего в самом скрипте

Возможные причины появления бага:

Но проявляется это либо когда слишком много html кода внутри, либо когда картинки внутри(больше 1-й), либо если вы указываете в условии сокрытия контейнера большое число (больше 1000px).

Как-то так. Если кто найдёт решение - будет здорово. Обязательно отпишитесь, перезалью с исправлением

 

Я нашел решение этой проблемы на просторах англоязычного интернета, в скрипте находим newHeight = $(element).data('expandedHeight') + 'px';  и меняем px на %

Правда пришлось пожертвовать плавным раскрытием, зато все работает без багов.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
pro5year    0

Здравствуйте уважаемый автор! Я не могу поставить ваш скрипт на свой шаблон(у меня не дефолт), не прописывает ничего в файлах, не могли бы вы помочь?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
MgazProffi    7

Здравствуйте уважаемый автор! Я не могу поставить ваш скрипт на свой шаблон(у меня не дефолт), не прописывает ничего в файлах, не могли бы вы помочь?

Да, можете, если работать не будет, то механизм работы полностью описан в шапке и на странице модуля.

Если не получится, то скиньте сюда ваш сайт

 

Я нашел решение этой проблемы на просторах англоязычного интернета, в скрипте находим newHeight = $(element).data('expandedHeight') + 'px';  и меняем px на %

Правда пришлось пожертвовать плавным раскрытием, зато все работает без багов.

Здорово, только вот не знаю, т.к. получается ничем не отличается от обычного спойлера(

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
Michael5    0

как этот скрипт подогнать под opencart 2.0 ? к примеру в файлах я не нашел строчки нужные, после которых надо вставить код

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти


  • Похожий контент

    • От bowandtie
      Добрый день, уважаемые форумчане!
       
      Заинтересовал блок с текстом на главной странице сайта wildberries (см. чуть выше footer).
       

       
      Получается, что текст скрывается градиентом и при желании раскрывается по кнопке "Читать далее". Если css стили можно вытащить через просмотр кода, то скрипт кнопки достать не удалось.
       
      Как думаете, как заставить кнопку переключать свойства css, чтобы убирался градиент и открывался полный текст?
    • От MgazProffi
      Автор скрипта readmore.js JED FOSTER (http://jedfoster.com/)
      Если у Вас шаблон лежит не в папку catalog/view/theme/default/, то в файле vqmod/xml/readmorejs.xml заменить default в пути к файлам на название папки с Вашим шаблоном

      Как работает?


      В catalog/view/theme/default/template/common/header.tpl
      после
      <script type="text/javascript" src="catalog/view/javascript/common.js"></script>
      добавляются 2 строчки
      <script src="catalog/view/javascript/jquery/readmorejs/readmore.min.js"></script><link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/readmorejs/readmorejs.css"></script>
      В файле catalog/view/theme/default/template/common/footer.tpl перед <div id="powered"> добавляется
      $('.readmore').readmore({ speed: 700, maxHeight: 500, moreLink: '<a href="#"><span class="text">Развернуть</span></a>', lessLink: '<a href="#"><span class="text">Свернуть</span></a>'});
      Внимание: файл footer.tpl должен быть в кодировке UTF-8 ез BOOM

      Как использовать?


      Внимание: требует vqmod не ниже 2.4.0
      I. Подключение
      Закачать все файлы из папки upload в корень Вашего сайта
      II. В режиме исходного кода в Вашем редакторе при редактировании материала:
      То, что хотим сократить заключаем между
      <div class="readmore">
      и
      </div>
      Пример:
      <div class="readmore"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus diam non velit tristique tristique. Aenean id bibendum ante. Praesent sit amet porta elit. In eget venenatis turpis. Quisque feugiat mauris vel ornare sodales. Nam pellentesque sagittis dui a blandit. Proin ac convallis erat. Vestibulum rutrum id velit vel pellentesque.
      Pellentesque mollis, nisi sit amet faucibus pulvinar, orci orci venenatis eros, at convallis lacus nunc id lectus. Quisque luctus sapien nec dolor rutrum tincidunt. Aliquam erat volutpat. Morbi cursus rhoncus elit eu blandit. Curabitur tempus non mi et placerat. Donec eu congue arcu. Vivamus eros odio, aliquam eget auctor vel, viverra et mauris. Maecenas at est nisl. Suspendisse potenti. Suspendisse vestibulum nulla quis metus molestie varius. Suspendisse mollis non tellus a molestie. Nulla facilisi.
      Morbi tempor adipiscing nibh, in aliquet dui tempus nec. Nulla facilisi. Sed cursus aliquet ligula, ut faucibus enim tincidunt quis. Nam tempor eget magna vel sodales. Vestibulum quis vulputate elit. In vitae purus vulputate, faucibus diam nec, eleifend magna. Nulla iaculis fringilla quam ac vehicula. Fusce nec tristique nunc. Curabitur vitae elit non libero tincidunt tempus. Praesent a nisi pretium, luctus tortor at, consectetur nisl. Nullam vel mollis diam. Vivamus placerat sed nisi ac dapibus.
      Nam eget sagittis orci. Mauris lobortis porta justo sit amet sagittis. In eleifend convallis risus interdum dictum. Phasellus faucibus tortor massa, et eleifend erat sagittis sagittis. Sed convallis nulla sit amet ornare lobortis. Ut tempor, erat ut facilisis porttitor, tellus purus vestibulum nibh, non vehicula dolor velit at lorem. Quisque vitae libero volutpat, pretium augue eget, fermentum purus. Morbi ultricies nibh neque, vitae porttitor elit faucibus ut. Integer sit amet lorem et purus luctus dictum. Mauris turpis ipsum, facilisis ac adipiscing eget, ultrices quis sapien. Suspendisse eget magna a arcu ultricies ullamcorper. Quisque semper ac lorem at scelerisque. Suspendisse cursus ante vitae velit lacinia dictum. In faucibus dui eu elit lacinia rhoncus.
      Etiam augue neque, euismod sed arcu et, dignissim consequat ligula. In ut ipsum vitae lectus venenatis fermentum. Cras sit amet orci lacinia, gravida dui viverra, imperdiet elit. Vestibulum feugiat urna id nisl suscipit blandit. Donec nec sem nec magna porta aliquet. Suspendisse in mattis diam, quis laoreet erat. Etiam ac orci id orci elementum vehicula. Nulla faucibus a libero sit amet placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam cursus, velit a tempus pulvinar, velit nulla gravida justo, non congue tellus magna non sem.
      </div>
      III.
      Кастомизация:
      speed - на сколько замедлять открытие скрытого текста
      maxHeight - сколько в пикселях должна быть высота текста перед тем, как остальную часть скрывать
      moreLink - менять можно <span class="text">Развернуть</span> на свой текст и класс
      essLink: 'менять можно <span class="text">Свернуть</span> на свой текст и класс
      Все изменения производить в
      catalog/view/javascript/jquery/readmorejs/readmorejs.css
      и
      vqmod/xml/readmorejs.xml
      По сути это даже не модуль, а просто готовое решение интеграции readmore.js и opencart
    • От CODEONETEAM
      Предлагаю добавить новый пункт в правила форума относительно обязательного заключения объёмного контента (код, текст, изображения) в спойлер и вынести соответствующую кнопку на панель редактора.
      Ситуация дошла уже до маразма, правила - нет, кнопки - нет, портянки - есть.
    • От pro1d
      Уважаемые поделитесь решением.
      Как добавить функцию спойлера в ocstore.
      Находил разве что решение в виде однократного применения спойлера на странице. Но требуется полноценный вариант с возможностью использовать много спойлеров на одной странице.
      Например для реализации faq на сайте.
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу