Краткое описание

Вообще нет особой разницы сколько краткое описание! Посмотри на hdrezka - все описания в кратких новостях загружаются на аяксе, чем значительно экономит трафик пользователям при загрузке главной и категорий. Поэтому лучше делать 0 символов краткой новости в коде и делать вывод описаний на аяксе

 

А как это реализовывать?

 

У меня так реализовано, но говорить как я сделал не буду

 

Webster Как же так( Поделись в ЛС

 

200 поставил

 

тоже интересует этот вопрос

 

Скопировать не составит труда

 

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

 

Не всегда получается js скопировать... Если умеешь это делать, скинь плз

 

Что именно не получается? можно на чистом css сделать даже

 

вывод описания при помощи AJAX на чистом css?

 

вот именно так как на hdrezka сделано, как сделать?

 

Щас выдерну

 

Что бы данная функция работала полноценно, у вас должен быть файл engine/ajax/quick_content.php

Код:

<div id="bubble-content-{id}" class="b-content__bubble left" style=""><div class="b-content__bubble_content">
<div class="b-content__catlabel films"><i class="entity"> Фильм</i><i class="icon"></i></div>
    <div class="b-content__bubble_title"><a href="/">name</a> </div>
        <div class="b-content__bubble_rating">
        <span class="label">Рейтинг фильма:</span> <b>10</b> (1)
            <span class="b-rating"><span class="current" style="width: 210px;"></span></span>
    </div>
        <div class="b-content__bubble_text">text</div>
        <div class="b-content__bubble_text">
        <span class="label">Возрастное ограничение:</span> <b style="color: #333;">12+</b> взрослые темы и понятия, но темы не раскрыты
    </div>
        <div class="b-content__bubble_text"><span class="label">Жанр:</span></div>
        <div class="b-content__bubble_str"><span class="label">Режиссер:</span> </div>
        <div class="b-content__bubble_str"> <span class="label">В ролях:</span></div>
        <div class="b-content__bubble_rates">
        <span class="imdb">IMDb: <b>-</b> <i>-</i></span>
        <span class="kp">Кинопоиск: <b>-</b> <i>-</i></span>
    </div></div><i class="arrow"><i></i></i></div>

html подгоняем под себя!

 

Код:

this.bindQuickContent = function() {
        thisObj = this;
        $(document).on('mouseenter mouseleave', '.b-content__inline_item-cover .cat', function(e) {
            var self = $(this).closest('.b-content__inline_item'),
                id = self.data('id');
            if (e.type === 'mouseenter' && !sof.is_touch) {
                thisObj.bubbleTimer = setTimeout(function() {
                    thisObj.showQC(self, id);
                }, 100);
            } else if (e.type === 'mouseleave') {
                setTimeout(function() {
                    if (!self.hasClass('active')) {
                        clearTimeout(thisObj.bubbleTimer);
                        thisObj.bubbleTimer = null;
                        thisObj.hideQC();
                    }
                }, 100);
            }
        });
    };
    this.startLoadingQC = function(container) {
        container.find('.cat').addClass('loading').find('.b-category-icon, .b-category-bestrating').hide();
    }
    this.stopLoadingQC = function(container) {
        container.find('.cat').removeClass('loading').find('.b-category-icon, .b-category-bestrating').show();
    }
    this.showQC = function(container, id, is_touch) {
        thisObj = this;
        var bubble = $('#bubble-content-' + id),
            data;
        if (bubble.length > 0) {
            data = thisObj.getPositionQC(bubble, container);
            bubble.css({
                top: data.top,
                left: data.left
            }).removeClass('left right').addClass(data.side).stop(true, true).fadeIn(200);
        } else {
            thisObj.startLoadingQC(container);
            is_touch = is_touch || 0;
            is_touch = 1;
            try {
                thisObj.hideQC();
                $.ajax({
                    url: dle_root + 'engine/ajax/quick_content.php',
                    data: {
                        id: id,
                        is_touch: is_touch
                    },
                    type: 'POST',
                    cache: false,
                    dataType: 'html'
                }).always(function(response) {
                    var html = $('<div id="bubble-content-' + id + '" class="b-content__bubble"><div class="b-content__bubble_content">' + response + '</div>' + '<i class="arrow"><i></i></i></div>');
                    $('body').append(html);
                    data = thisObj.getPositionQC(html, container);
                    html.css({
                        top: data.top,
                        left: data.left
                    }).addClass(data.side);
                    if (null !== thisObj.bubbleTimer) {
                        html.stop(true, true).fadeIn(200, function() {
                            thisObj.stopLoadingQC(container);
                        });
                    } else {
                        thisObj.stopLoadingQC(container);
                    }
                    html.off('mouseenter mouseleave').on('mouseenter', function() {
                        container.addClass('active');
                    }).on('mouseleave', function() {
                        container.removeClass('active');
                        clearTimeout(thisObj.bubbleTimer);
                        thisObj.bubbleTimer = null;
                        thisObj.hideQC();
                    });
                });
            } catch (e) {};
        }
    };
    this.hideQC = function(id) {
        if (undefined == id) {
            $('.b-content__bubble').fadeOut(100);
            return;
        }
        var bubble = $('#bubble-content-' + id);
        bubble.fadeOut(100);
    };
    this.getPositionQC = function(bubble, container) {
        var container_position = container.offset(),
            container_width = container.innerWidth(),
            bubble_width = bubble.innerWidth(),
            stylesheet = {
                top: container_position.top - 10,
                left: 0,
                side: 'left'
            };
        if (container_position.left + container_width + bubble_width > $(window).width()) {
            stylesheet['left'] = container_position.left + container_width - bubble_width - 42;
            stylesheet['side'] = 'right';
        } else {
            stylesheet['left'] = container_position.left + container_width;
        }
        return stylesheet;
    }
    return this;
}).call(sof.home || {}, jQuery);;
var sof = sof || {};
sof.gallery = (function() {
    var pub = {};
    pub.initEvents = function() {
        var gallery_group = 'a[data-imagelightbox="gallery"]';
        var instance_gallery = $(gallery_group).imageLightbox({
            onStart: function() {
                overlayOn();
                closeButtonOn(instance_gallery);
                arrowsOn(instance_gallery, gallery_group);
            },
            onEnd: function() {
                overlayOff();
                captionOff();
                closeButtonOff();
                arrowsOff();
                activityIndicatorOff();
            },
            onLoadStart: function() {
                captionOff();
                activityIndicatorOn();
            },
            onLoadEnd: function() {
                captionOn();
                activityIndicatorOff();
                $('.imagelightbox-arrow').css('display', 'block');
            }
        });
        var cover = 'a[data-imagelightbox="cover"]';
        var instance_cover = $(cover).imageLightbox({
            onStart: function() {
                overlayOn();
                closeButtonOn(instance_cover);
            },
            onEnd: function() {
                overlayOff();
                captionOff();
                closeButtonOff();
                activityIndicatorOff();
            },
            onLoadStart: function() {
                captionOff();
                activityIndicatorOn();
            },
            onLoadEnd: function() {
                captionOn();
                activityIndicatorOff();
                $('.imagelightbox-arrow').css('display', 'block');
            }
        });
    }

 

Frosty им нужна подгрузка на AJAX а не html код.

 

Я изменил.

 

где его взять если его нет?

 

Можно сделать проще, найти шаблон в котором это реализовано и выдернуть нормально, если есть такой, можно мне скинуть я выдерну. Либо загуглить и сделать на готовом варианте, либо написать PunPun и за пару соток я думаю он реализует этот файл