[скрипт] сокращаем полное описание фильма (больше / меньше).

Rockem · 15 Июн 2016

Всем привет!
Уже не впервой когда я на этом форуме виже такие вопросы "как сделать кнопку Больше / меньше"... Сегодня такая кнопка мне самому понадобилась, так что я решил с вами поделится.
Может кому-то пригодится.

CSS код:

CSS:

.full-desc{overflow:hidden;position:relative;transition:height .2s}
.text-less{margin-bottom:0!important}
.text-less:before{content:'';position:absolute;z-index:1;bottom:0;left:0;right:0;height:120px;pointer-events:none;background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,#fff 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 100%)}
.show-more{margin:0 0 20px;font-size:12px;font-weight:700}
.show-more span{display:inline-block;cursor:pointer;text-decoration:underline;color:#f0542e}

JS код:

Код:

$(document).ready(function() {
$('.full-desc').ShortText({
  height: '200',
  text: 'Больше'
});
});

jQuery.fn.ShortText = function(e) {
var e = jQuery.extend({
  height: "200",
  text: "Больше"
}, e);
return this.each(function() {
  var i = $(this),
  t = i.height();
  t > e.height && i.addClass("full-desc text-less").height(e.height).after('<div class="show-more"><span>' + e.text + "</span></div>"), $(".show-more span").click(function() {
  var i = $(this),
  s = $(this).parent().prev(".full-desc");
  ah = parseInt(s.css("height"), 10), ah == t ? s.css({
  height: e.height
  }) : s.css({
  height: t
  }), i.text(i.text() == e.text ? "Меньше" : e.text), s.toggleClass("text-less")
  })
})
};

В fullstory.tpl ставите там где хотите вывести описание.

HTML:

<div class="full-desc clearfix">{full-story}</div>

Демо: можно посмотреть тут.

Автор скрипта: @redissx.

PunPun · 15 Июн 2016

А как же указать автора @redissx ?

Rockem · 15 Июн 2016

Gameer написал(а):
А как же указать автора @redissx ?

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

PunPun · 15 Июн 2016

Rockem написал(а):
Я не знаю кто автор js скрипта, поскольку сам скрипт я вырез из найденного мной в интернете сайта.

Скрипт похож на тот что писал он, так что сори если преувеличиваю и т.п

redissx · 15 Июн 2016

Да, из filmax, просто в нем сжатый код, я выкладывал несжатый. И это wTextSlicer, патентую 😀 эту тему по поиску, наверное, проще найти будет.

redissx · 15 Июн 2016

Ну... ТС тут наменял, привязал только к full-desc, универсальность утеряна 😵

aeneas · 15 Июн 2016

текст под спойлером как понял не будет индексироваться...
если нет, то на**й такое ненужно совершенно

PunPun · 15 Июн 2016

aeneas написал(а):
текст под спойлером как понял не будет индексироваться...
если нет, то нахуй такое ненужно совершенно

лол. кек. хех. мда.

aeneas · 15 Июн 2016

Gameer написал(а):
лол. кек. хех. мда.

что ты кхекаешь как всегда чудик, это вопрос был

PunPun · 15 Июн 2016

aeneas написал(а):
что ты кхекаешь как всегда чудик, это вопрос был

индексирует все там

Skuchniy · 15 Июн 2016

aeneas написал(а):
текст под спойлером как понял не будет индексироваться...
если нет, то на**й такое ненужно совершенно

Так если код страницы открыть, там будет полный текст.🙂

aeneas · 15 Июн 2016

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

Skuchniy · 15 Июн 2016

aeneas написал(а):
гуд тогда, спс
я кстати искал и не раз, гуглил находил варианты, тут на форуме и на вебмастерсе спрашивал, так и ни один мухомор не ответил ничего как сделать нормально )

По сути это плагин Readmore.js, в поиске достаточно информации и примеров, устанавливается легко.

aeneas · 15 Июн 2016

Skuchniy написал(а):
По сути это плагин Readmore.js, в поиске достаточно информации и примеров, устанавливается легко.

в ДЛЕ не ставяться плагины ))

redissx · 15 Июн 2016

Обновил, добавил возможность сворачивать несколько блоков на одной странице (ну мало ли есть маньяки сворачивания 😀) и указание текста сворачивания.

1. В ваш css файл добавить

Код:

.slice {overflow:hidden; position:relative; transition:height .2s;}
.slice-masked:before {content:'';position:absolute;z-index:1;bottom:0px;left:0;right:0;height:120px;pointer-events:none;
background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 100%);
background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);}
.slice-btn {margin:20px 0;  font-weight:700;}
.slice-btn span {display:inline-block; cursor:pointer; text-decoration:underline; color:#f0542e;}

2. В ваш js файл в конец добавить

Код:

$(document).ready(function(){
   $('.movie-desc').wTextSlicer({
    height: '200',
    textExpand: 'Развернуть сюжет',
    textHide: 'Свернуть сюжет'
   });
});

/*!  wTextSlicer v 1.01 */

jQuery.fn.wTextSlicer = function(options){
   var options = jQuery.extend({
    height: '200',
    textExpand: 'expand text',
    textHide: 'hide text'
    },options);
   return this.each(function() {
     var a = $(this),
       h = a.outerHeight();
     if ( h > options.height ) {
       a.addClass('slice slice-masked').attr('data-height',h).height(options.height).after('<div class="slice-btn"><span>'+options.textExpand+'</span></div>');
     };
     var bt = $(this).next('.slice-btn').children('span');
     bt.click(function() {
       var ah = parseInt(a.css("height"), 10);
       ah == h ? a.css({'height':options.height}) : a.css({'height':h});
       bt.text(bt.text() == options.textExpand ? options.textHide : options.textExpand);
       a.toggleClass('slice-masked');
     });
   });
};

3. Как пользоваться.
Пусть у вас есть <div class="movie-desc">МЫ ХОТИМ ЭТО СВЕРНУТЬ</div>.
Тогда

Код:

$(document).ready(function(){
   $('.movie-desc').wTextSlicer({
    height: '200',
    textExpand: 'Развернуть сюжет',
    textHide: 'Свернуть сюжет'
   });
});

где 200 - высота, при которой свернется.

Пусть у нас два блока <div class="movie-desc">МЫ ХОТИМ ЭТО СВЕРНУТЬ</div> и <div class="movie-lines">МЫ ХОТИМ ЭТО СВЕРНУТЬ ТОЖЕ</div>.
Тогда

Код:

$(document).ready(function(){
   $('.movie-desc').wTextSlicer({
    height: '200',
    textExpand: 'Развернуть сюжет',
    textHide: 'Свернуть сюжет'
   });
   $('.movie-lines').wTextSlicer({
    height: '100',
    textExpand: 'Показать больше',
    textHide: 'Спрятать'
   });
});

Skuchniy · 15 Июн 2016

aeneas написал(а):
в ДЛЕ не ставяться плагины ))

Да js это, который работает на dle, сам лично ставил 😛

kinoliux · 10 Сен 2016

redissx написал(а):
Обновил, добавил возможность сворачивать несколько блоков на одной странице (ну мало ли есть маньяки сворачивания 😀) и указание текста сворачивания.

1. В ваш css файл добавить

Код:

.slice {overflow:hidden; position:relative; transition:height .2s;} .slice-masked:before {content:'';position:absolute;z-index:1;bottom:0px;left:0;right:0;height:120px;pointer-events:none; background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 100%); background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%);} .slice-btn {margin:20px 0; font-weight:700;} .slice-btn span {display:inline-block; cursor:pointer; text-decoration:underline; color:#f0542e;}

2. В ваш js файл в конец добавить

Код:

$(document).ready(function(){ $('.movie-desc').wTextSlicer({ height: '200', textExpand: 'Развернуть сюжет', textHide: 'Свернуть сюжет' }); }); /*! wTextSlicer v 1.01 */ jQuery.fn.wTextSlicer = function(options){ var options = jQuery.extend({ height: '200', textExpand: 'expand text', textHide: 'hide text' },options); return this.each(function() { var a = $(this), h = a.outerHeight(); if ( h > options.height ) { a.addClass('slice slice-masked').attr('data-height',h).height(options.height).after('<div class="slice-btn"><span>'+options.textExpand+'</span></div>'); }; var bt = $(this).next('.slice-btn').children('span'); bt.click(function() { var ah = parseInt(a.css("height"), 10); ah == h ? a.css({'height':options.height}) : a.css({'height':h}); bt.text(bt.text() == options.textExpand ? options.textHide : options.textExpand); a.toggleClass('slice-masked'); }); }); };

3. Как пользоваться.
Пусть у вас есть <div class="movie-desc">МЫ ХОТИМ ЭТО СВЕРНУТЬ</div>.
Тогда

Код:

$(document).ready(function(){ $('.movie-desc').wTextSlicer({ height: '200', textExpand: 'Развернуть сюжет', textHide: 'Свернуть сюжет' }); });

где 200 - высота, при которой свернется.

Пусть у нас два блока <div class="movie-desc">МЫ ХОТИМ ЭТО СВЕРНУТЬ</div> и <div class="movie-lines">МЫ ХОТИМ ЭТО СВЕРНУТЬ ТОЖЕ</div>.
Тогда

Код:

$(document).ready(function(){ $('.movie-desc').wTextSlicer({ height: '200', textExpand: 'Развернуть сюжет', textHide: 'Свернуть сюжет' }); $('.movie-lines').wTextSlicer({ height: '100', textExpand: 'Показать больше', textHide: 'Спрятать' }); });

У меня не работает. DLE 11.0 уже пол дня мучаюсь.

yuris · 10 Сен 2016

kinoliux написал(а):
У меня не работает. DLE 11.0 уже пол дня мучаюсь.

Дык всем давно известно, что, DLE 11.0 версии полный отстой, прокаженная! Делай откат на 8-ку и все моментально заработает!

kinoliux · 10 Сен 2016

yuris написал(а):
Дык всем давно известно, что, DLE 11.0 версии полный отстой, прокаженная! Делай откат на 8-ку и все моментально заработает!

11.0 мне уже мозг вынесла, чтоб что то поставить надо пол дня с бубном плясать

kinoliux · 10 Сен 2016

yuris написал(а):
Дык всем давно известно, что, DLE 11.0 версии полный отстой, прокаженная! Делай откат на 8-ку и все моментально заработает!

два часа провозился чтоб сделать поиск с выводом картинки

Редактор темы

Ширина страницы

Переключить ширину страницы

Выбор цвета

Палитра цветов

Типографика

Раскладка разделов

Сеточная раскладка

Языки

Вариант темы

Обсуждение [скрипт] сокращаем полное описание фильма (больше / меньше).

Бывалый

Бывалый

Бывалый

Бывалый

Бывалый

Бывалый

Местный

Бывалый

Бывалый

[скрипт] сокращаем полное описание фильма (больше / меньше).