Используя fancybox, jquery-isotope и усеченный текст, все в одном! (О, и это тоже в Drupal)

Мы используем Drupal для одного из поддерживаемых нами сайтов (и JQuery в качестве библиотеки). Одна из наших страниц использует плагин jquery-isotope (особенно модуль views-isotope) для сортировки в представлениях и fancybox для полного отображения содержимого поля body. Это связано с тем, что в нынешнем виде большая часть содержимого тела скрыта высотой css и параметром overflow:hidden.

Как вы понимаете, такой грубый метод выглядит не очень красиво. Большая часть текста обрезана, оставлены лишние засечки и тому подобное, чтобы он выглядел особенно «грязным». Следующим шагом в этом было усечение текста и добавление «...», чтобы текст не обрезался.

Однако fancybox загружает содержимое в оверлей КАК ЕСТЬ. Поэтому, когда вы усекаете текст тела, он усекается и в оверлее.

По сути, мой вопрос: есть ли способ обрезать текст до тех пор, пока не произойдет щелчок, открывающий fancybox? Как мне отправить полный контент в fancybox, не теряя усечения при нажатии? Когда я запускал jsfiddle для работы над этим, я не включал в свои расчеты ни изотоп, ни fancybox: я просто создал его с помощью подстроки, клонировал исходное содержимое, а затем заменил подстроку по щелчку. Но это, как вы понимаете, ломает страницу, потому что нечего ей говорить ТОЛЬКО делать это по отношению к fancybox, а не просто наугад. Я также не знаю, как возобновить усечение текста при закрытии fancybox.

Вот мой jsfiddle.

Вот html:

<div class="element">
    <div class="item">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
            nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
            wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
            lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
            dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
            dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
            dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
            te feugait nulla facilisi. </p>
    </div>
</div>

Вот css:

.item {
width:300px !important;
height: 150px;
overflow: hidden; }

Вот сценарий:

var originalState = $(".element").clone().text();

$(".item").each(function () {
    if ($(this).text().length > 30) {
        $(this).text($(this).text().substr(0, 27));
        $(this).append('...');
    }
});

$(".element").click(function () {
    $(this).replaceWith(originalState);
});

Как мне связать это с fancybox, чтобы текст обрезался до тех пор, пока вы не щелкнете, fancybox получит полный текст, а затем при закрытии все вернется к обрезанному стилю раньше?

Примечание. Если я допустил какие-либо фатальные ошибки в своем коде, сообщите мне об этом. Я молод в JavaScript и JQuery, но очень стараюсь учиться.

Спасибо.


jquery truncate drupal fancybox jquery-isotope
person bathybic    schedule 26.02.2013    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ты был уже на полпути.

Поскольку вы уже клонировали исходный текст:

var originalState = $(".element").clone().text();

... единственное, что вам нужно сделать, это использовать его как содержимое fancybox, поэтому вместо этого:

$(".element").click(function () {
    $(this).replaceWith(originalState);
});

... сделай это :

$(".element").click(function () {
    $.fancybox(originalState);
});

См. форк JSFIDDLE

Это отобразит клонированный текст в fancybox и оставит нетронутым ваш обрезанный текст.

ИЗМЕНИТЬ (28 февраля 2013 г.):

Если вы клонируете более одного элемента, вы можете настроить свой код, чтобы расположить их в массиве и привязать fancybox к каждому элементу отдельно, например:

var originalState = new Array();
$(".item").each(function (i) {
    originalState[i] = $(this).clone().text();
    if ($(this).text().length > 30) {
        $(this).text($(this).text().substr(0, 27)).append('...');
    }
    $(this).click(function () {
        $.fancybox(originalState[i]);
    });
});

См. новый JSFIDDLE

person JFK    schedule 28.02.2013
comment
Это было прекрасно. Мы наткнулись на еще одну проблему с клонированием (т.е. клонирование не только первого экземпляра fancybox и их привязка к соответствующим div), но это в значительной степени ответило на мой первоначальный вопрос. Спасибо! - person bathybic; 28.02.2013
comment
@Kaylsbeth: см. мой отредактированный ответ для клонирования нескольких элементов. - person JFK; 28.02.2013
comment
Хотел бы я, чтобы у меня было достаточно представителей, чтобы проголосовать за тебя, @JFK. Серьезно. Это сработало как шарм. И я узнал что-то новое и фантастическое, что можно делать с массивами! Превосходно! - person bathybic; 01.03.2013