Как использовать эскизы в качестве триггеров для раскрытия и свертывания контента с помощью JQuery Masonry на сайте Wordpress - PullRequest
Новая
       24

Как использовать эскизы в качестве триггеров для раскрытия и свертывания контента с помощью JQuery Masonry на сайте Wordpress

1 голос
/ 24 февраля 2012

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

Я занимаюсь разработкой сайта WordPress и взламываю шаблон, который использует кладку с аннотациями и миниатюрами в сетке на странице индекса.Когда вы нажимаете на изображение, вы перенаправляетесь на содержание публикации.Это тема: http://jinsonathemes.com/fabs/?themedemo=Vasiliki

Я хотел бы реализовать следующее:

  1. Когда пользователь нажимает на миниатюру, содержимое раскрывается и расширяется на том жестр.Вот пример из Up Magazine: http://upmagazine -tap.com

Я посмотрел сценарий JQuery на этой очень крутой скрипке (# FS34t).Ящики расширяют и сворачивают содержимое при нажатии, но это не совсем то, что я имею в виду для этого сайта.Будем обязательно реализовывать по другому.

Я думал, что это будет простая функция показать / скрыть, но каждое изображение связано с определенным сообщением, используя один и тот же div "content".Как бы я использовал изображение в сетке кладки в качестве триггера для развёртывания / свертывания содержимого соответствующего поста - как в образце Up Magazine?

Спасибо за чтение.

Ответы [ 2 ]

1 голос
/ 29 февраля 2012

Я бы добавил the_content к элементу div в своем дочернем элементе div. Затем спрячь этот div в css.

Тогда я бы создал функцию, которая открывает этот div [я бы использовал jQuery slideDown ()]. В эту функцию также будет включен метод перезагрузки кладки [.masonry ('reload')].

Затем я бы привязал эту функцию к щелчку по элементу div или, возможно, к миниатюру записи.

Очень приблизительно:

HTML 

<div class="post">
<?php the_post_thumbnail() ?>
<div class="excerpt"><?php the_excerpt() ?></div>
<div class="post-content"><?php the_content() ?></div>
</div>

КСС 

div.post-content {
display: none;
}

JS 

$('.classofpostthumbnail').click(function() {
  $(this).siblings('.excerpt').slideUp();
  $(this).siblings('.post-content').slideDown();
  $('.masonrycontainer').masonry('reload');
});

Однако мой JS определенно может быть улучшен. [Для начала цепочки слайдов с их обратными вызовами, так что все анимации идут друг за другом. И, конечно, ваши HTML и CSS, вероятно, будут намного сложнее.

0 голосов
/ 21 марта 2012

Ну ... UpMagazine не имеет скрытого контента в div. Мы загружаем контент в контейнер с помощью AJAX, отправляя запросы в /wp-admin/admin-ajax.php (см .: http://core.trac.wordpress.org/browser/trunk/wp-admin/admin-ajax.php).

Рад, что вам понравился сайт.

...