Скрыть объявление
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

Как задать определенное количество рецензий на страницу?

Тема в разделе "Вопросы- ответы", создана пользователем thirus, 1 апр 2016.

01.04.16 в 21:04
02.04.16 в 02:54
12
481
0
  1. TopicStarter Overlay
    thirus

    thirus Бывалый

    Регистрация:
    24 июн 2015
    Сообщения:
    373
    Лучших ответов:
    0
    Рейтинги:
    +28 / 0 / -0
    Всем привет, кто может помочь сделать так, что бы выводилось определенное количество рецензий на страницу? примерно как на киноконг
    _kinokong.net/15479-smotret-dedpul-2016-smotet-online.html
    что бы выводилось к примеру 2-3 рецензии максимум и они сжимались по высоте каждая до определенного размера
    вот как щас выглядит мой блок рецензий
    [​IMG]
    ток текст не читайте в рецензиях) это так пробные)
     
  2. TopicStarter Overlay
    thirus

    thirus Бывалый

    Регистрация:
    24 июн 2015
    Сообщения:
    373
    Лучших ответов:
    0
    Рейтинги:
    +28 / 0 / -0
    вот вроде код с kinokong который сжимает и разжимает рецензии
    Код:
    (function($) {
        $.fn.jCarouselLite = function(o) {
            o = $.extend({
                btnPrev: null,
                btnNext: null,
                btnGo: null,
                mouseWheel: false,
                auto: null,
                speed: 200,
                easing: null,
                vertical: true,
                circular: true,
                visible: 3,
                start: 0,
                scroll: 1,
                beforeStart: null,
                afterEnd: null
            }, o || {});
            return this.each(function() {
                var b = false,
                    animCss = o.vertical ? "top" : "left",
                    sizeCss = o.vertical ? "height" : "width";
                var c = $(this),
                    ul = $("ul", c),
                    tLi = $("li", ul),
                    tl = tLi.size(),
                    v = o.visible;
                if (o.circular) {
                    ul.prepend(tLi.slice(tl - v - 1 + 1).clone()).append(tLi.slice(0, v).clone());
                    o.start += v
                }
                var f = $("li", ul),
                    itemLength = f.size(),
                    curr = o.start;
                c.css("visibility", "visible");
                f.css({
                    overflow: "auto",
                    float: o.vertical ? "none" : "left"
                });
                ul.css({
                    margin: "0",
                    padding: "0",
                    position: "relative",
                    "list-style-type": "none",
                    "z-index": "1"
                });
                c.css({
                    overflow: "hidden",
                    position: "relative",
                    "z-index": "2",
                    left: "0px"
                });
                var g = o.vertical ? height(f) : width(f);
                var h = g * itemLength;
                var j = g * v;
                f.css({
                    width: f.width(),
                    height: f.height()
                });
                ul.css(sizeCss, h + "px").css(animCss, -(curr * g));
                c.css(sizeCss, j + "px");
                if (o.btnPrev) $(o.btnPrev).click(function() {
                    return go(curr - o.scroll)
                });
                if (o.btnNext) $(o.btnNext).click(function() {
                    return go(curr + o.scroll)
                });
                if (o.btnGo) $.each(o.btnGo, function(i, a) {
                    $(a).click(function() {
                        return go(o.circular ? o.visible + i : i)
                    })
                });
                if (o.mouseWheel && c.mousewheel) c.mousewheel(function(e, d) {
                    return d > 0 ? go(curr - o.scroll) : go(curr + o.scroll)
                });
                if (o.auto) setInterval(function() {
                    go(curr + o.scroll)
                }, o.auto + o.speed);
    
                function vis() {
                    return f.slice(curr).slice(0, v)
                };
    
                function go(a) {
                    if (!b) {
                        if (o.beforeStart) o.beforeStart.call(this, vis());
                        if (o.circular) {
                            if (a <= o.start - v - 1) {
                                ul.css(animCss, -((itemLength - (v * 2)) * g) + "px");
                                curr = a == o.start - v - 1 ? itemLength - (v * 2) - 1 : itemLength - (v * 2) - o.scroll
                            } else if (a >= itemLength - v + 1) {
                                ul.css(animCss, -((v) * g) + "px");
                                curr = a == itemLength - v + 1 ? v + 1 : v + o.scroll
                            } else curr = a
                        } else {
                            if (a < 0 || a > itemLength - v) return;
                            else curr = a
                        }
                        b = true;
                        ul.animate(animCss == "left" ? {
                            left: -(curr * g)
                        } : {
                            top: -(curr * g)
                        }, o.speed, o.easing, function() {
                            if (o.afterEnd) o.afterEnd.call(this, vis());
                            b = false
                        });
                        if (!o.circular) {
                            $(o.btnPrev + "," + o.btnNext).removeClass("disabled");
                            $((curr - o.scroll < 0 && o.btnPrev) || (curr + o.scroll > itemLength - v && o.btnNext) || []).addClass("disabled")
                        }
                    }
                    return false
                }
            })
        };
    
        function css(a, b) {
            return parseInt($.css(a[0], b)) || 0
        };
    
        function width(a) {
            return a[0].offsetWidth + css(a, 'marginLeft') + css(a, 'marginRight')
        };
    
        function height(a) {
            return a[0].offsetHeight + css(a, 'marginTop') + css(a, 'marginBottom')
        }
    })(jQuery);
    хотя может и не он)
     
  3. softerline

    softerline Посетитель

    Регистрация:
    21 июн 2015
    Сообщения:
    71
    Лучших ответов:
    0
    Рейтинги:
    +35 / 0 / -0
    точно не он, а вот он, если я правильно вас понял.

    Код:
    <script>
      $(document).ready(function(){
          $('.btn-more-review').click(function () {
            if ($(this).hasClass("hidden")) {
              $('.full-reviews').find(".full-review-hidden").animate({height: "100px"},500);
              $(this).removeClass("hidden").addClass("show").html("Смотреть полностью &darr;");
              return false;
            } else {
              $('.btn-more-review').removeClass("show").addClass("hidden").html("Свернуть все &uarr;");
              $('.full-reviews').find(".full-review-hidden").animate({height: "100%"},500);
              return false;
            }
          });
      });
    </script>
     
  4. TopicStarter Overlay
    thirus

    thirus Бывалый

    Регистрация:
    24 июн 2015
    Сообщения:
    373
    Лучших ответов:
    0
    Рейтинги:
    +28 / 0 / -0
    а да) щас попробую поковыряться)
     
  5. softerline

    softerline Посетитель

    Регистрация:
    21 июн 2015
    Сообщения:
    71
    Лучших ответов:
    0
    Рейтинги:
    +35 / 0 / -0
  6. TopicStarter Overlay
    thirus

    thirus Бывалый

    Регистрация:
    24 июн 2015
    Сообщения:
    373
    Лучших ответов:
    0
    Рейтинги:
    +28 / 0 / -0
    а кто нибудь может подсказать как сделать что бы каждая рецензия отдельно открывалась? а то жмешь открыть одну, а открываются все
     
  7. TopicStarter Overlay
    thirus

    thirus Бывалый

    Регистрация:
    24 июн 2015
    Сообщения:
    373
    Лучших ответов:
    0
    Рейтинги:
    +28 / 0 / -0
  8. TopicStarter Overlay
    thirus

    thirus Бывалый

    Регистрация:
    24 июн 2015
    Сообщения:
    373
    Лучших ответов:
    0
    Рейтинги:
    +28 / 0 / -0
    не могу придумать как сделать что бы разные классы или id ставились что бы по отдельности открывались
     
  9. softerline

    softerline Посетитель

    Регистрация:
    21 июн 2015
    Сообщения:
    71
    Лучших ответов:
    0
    Рейтинги:
    +35 / 0 / -0
    Я выше давал ссылку на статью, вот скачай пример https://yadi.sk/d/d_NvgU7fqfyHT , тоже самое что у них в демо только я немного текста урезал и скопировал три одинаковых блока, они таких проблем как открываться всем вместе не имеют, посмотри код в архиве и прикрути к своим блокам, либо если надо помочь, ссылку на страницу в личку кидай к которой надо прикрутить это дело.
     
  10. TopicStarter Overlay
    thirus

    thirus Бывалый

    Регистрация:
    24 июн 2015
    Сообщения:
    373
    Лучших ответов:
    0
    Рейтинги:
    +28 / 0 / -0
    вся фишка в том что рецензии там по шаблону идут, то есть получается 1 блок и по нему все рецензии клепаются. а не 2+ вот в этом вся проблема то(
     
  11. softerline

    softerline Посетитель

    Регистрация:
    21 июн 2015
    Сообщения:
    71
    Лучших ответов:
    0
    Рейтинги:
    +35 / 0 / -0
    код блока скинь
     
  12. softerline

    softerline Посетитель

    Регистрация:
    21 июн 2015
    Сообщения:
    71
    Лучших ответов:
    0
    Рейтинги:
    +35 / 0 / -0
    и выше, я ж написал,в примере я скопировал 3 одинаковых блока и все нормально открывается, закрывается.
     
  13. softerline

    softerline Посетитель

    Регистрация:
    21 июн 2015
    Сообщения:
    71
    Лучших ответов:
    0
    Рейтинги:
    +35 / 0 / -0
    Вот минимум того что надо добавить:

    Код:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" media="all" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    </head>
    <body>
    <style>
    blockquote, q { quotes: none; }
    blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
    .bigtext {
      display: block;
      overflow: hidden;
      color: #787878;
    }
    .expand, .contract {
      cursor: pointer;
      font-weight: bold;
      padding: 15px 0;
      text-align: center;
      color: #555;
    }
    .expand:hover, .contract:hover {
      color: #121212;
    }
    
    .hide {
      display: none;
    }
    </style>
    
      <blockquote class="bigtext">
      <p>текст который выдно</p> <!--Текст обернуть в тегами blockquote -->
      <p>текст который видно</p> <!--Если пораграфов больше двух все последующие будут скрыты -->
      <p>текст который скрыт</p> <!--Если пораграфов два, второй будет скрыт -->
      <p>текст который скрыт</p> <!--Если пораграф один, то эта хуита схлопнется полностью -->
      </blockquote>
      <p class="expand"><i class="fa fa-arrow-down"></i> ЧИТАТЬ ПОЛНОСТЬЮ <i class="fa fa-arrow-down"></i></p>
      <p class="contract hide"><i class="fa fa-arrow-up"></i> ЗАКРЫТЬ <i class="fa fa-arrow-up"></i></p>
         
         
       
    
    <script type="text/javascript">
    $(function(){
      var animspeed = 950; // animation speed in milliseconds
     
      var $blockquote = $('.bigtext');
      var height = $blockquote.height();
      var mini = $('.bigtext p').eq(0).height() + $('.bigtext p').eq(1).height() + $('.bigtext p').eq(2).height() + $('.bigtext p').eq(2).height();
     
      $blockquote.attr('data-fullheight',height+'px');
      $blockquote.attr('data-miniheight',mini+'px');
      $blockquote.css('height',mini+'px');
     
    
      $('.expand').on('click', function(e){
        $text = $(this).prev();
       
        $text.animate({
          'height': $text.attr('data-fullheight')
        }, animspeed);
        $(this).next('.contract').removeClass('hide');
        $(this).addClass('hide');
      });
     
      $('.contract').on('click', function(e){
        $text = $(this).prev().prev();
       
        $text.animate({
          'height': $text.attr('data-miniheight')
        }, animspeed);
        $(this).prev('.expand').removeClass('hide');
        $(this).addClass('hide');
      });
    });
    </script>
    </body>
    </html>
     
Яндекс.Метрика