Как изменить цикл для jQuery-слайдера (слайды)

Question

Как изменить цикл для jQuery-слайдера (слайды)

7 мар. 2012 г., 10:30:12

Просмотры: 2.15K

Голосов: 2

Я пытаюсь сделать слайдер, который берет миниатюры из определенного типа записей и отображает по четыре из них на каждом "слайде". Сам слайдер и миниатюры работают как надо, но я не уверен, как изменить цикл, чтобы он отображал 4 поста в одном контейнере, затем следующие 4 поста и так далее.

Мой цикл выглядит так:

<div id="slides">
    <div class="slides_container">

        <?php $loop = new WP_Query(array('post_type' => 'fastighet', 'posts_per_page' => -1, 'orderby'=> 'ASC')); ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

            <div class="slide">
                <?php $url = get_post_meta($post->ID, "url", true);
                if($url!='') {
                    echo '<a href="'.$url.'">';
                    echo the_post_thumbnail('admin-list-thumb');
                    echo '</a>';
                } else {
                    echo the_post_thumbnail('admin-list-thumb');
                } ?>
                <div class="caption">
                    <h5><?php the_title(); ?></h5>
                </div>
            </div>

        <?php endwhile; ?>
        <?php wp_reset_query(); ?>

    </div> <!-- конец .slides_container -->

    <a href="#" class="prev">пред</a>
    <a href="#" class="next">след</a>

</div> <!-- конец .slides -->

Каждый div с классом slide становится слайдом, как видно. Но как сделать так, чтобы в каждый такой слайд помещалось 4 поста, затем следующие 4 поста в другой слайд и так далее.

Любая помощь или советы будут очень appreciated!

Johan Dahl

1.34K

jquery цикл слайд шоу

Комментарии

Поскольку вы уже знаете, как запрашивать свои записи и как возвращать их миниатюры, остаётся лишь вопрос PHP, а не WordPress.

Chip Bennett

7 мар. 2012 г. 14:38:52

Все ответы на вопрос

Комментарии

Кажется, я по-прежнему получаю только одно изображение на слайд по какой-то причине. Также миниатюры никуда не ведут, хотя должны ссылаться на каждый пост.

Johan Dahl

7 мар. 2012 г. 11:07:51

@JohanDahl: в моем коде была ошибка. Исправил. Попробуй теперь.

Sisir

7 мар. 2012 г. 11:15:28

Да, я заметил пропущенный <?php и добавил его. Но ничего не изменилось. По-прежнему только один слайд на изображение :/

Johan Dahl

7 мар. 2012 г. 11:20:18

@JohanDahl Типа как сейчас?

kaiser

7 мар. 2012 г. 11:22:39

Я обновил свой код, чтобы некоторые другие вещи заработали. Но по-прежнему получаю только одно миниатюрное изображение на слайд.

http://pastebin.com/WbERsyUH

Johan Dahl

7 мар. 2012 г. 11:33:01

Показать остальные 12 комментариев

Почти правильно. Единственная проблема заключалась в том, что на самом деле не нужно выводить и открывающий, и закрывающий тег на одном и том же индексе. Следующий код работает у меня в похожей ситуации. Единственное реальное изменение — $i начинается с 1, и теги открытия и закрытия слайдов выводятся на разных счетах.

Также позволил себе немного очистить код.

<div id="slides">
    <div class="slides_container">

        <?php 
        $loop = new WP_Query( array( 
            'post_type' => 'fastighet', // Тип записи - недвижимость
            'posts_per_page' => -1 // Получить все записи
        ) ); 
        $i = 1; // Начинаем счет с 1
        while ( $loop->have_posts() ) : 
            $loop->the_post(); 
            if( $i % 4 == 1 ) : // Если остаток от деления на 4 равен 1 (1,5,9...)
                ?>
                <div class="slide"> // Открываем новый слайд
                <?php 
            endif; 
            ?>
            <div class="fastighet-slider-entry">
                <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail(); ?></a>
                <div class="caption">
                    <h5><?php the_title(); ?></h5>
                </div>
            </div> <!-- конец .fastighet-slider-entry -->
            <?php 
            if( $i % 4 == 0 ) : // Если остаток от деления на 4 равен 0 (4,8,12...)
                ?>
                </div> // Закрываем слайд
                <?php 
            endif; 
            ++$i; // Увеличиваем счетчик
        endwhile; 
        wp_reset_query(); // Сбрасываем запрос
        ?>

    </div> <!-- конец .slides_container -->

    <a href="#" class="prev">назад</a>
    <a href="#" class="next">вперед</a>

</div> <!-- конец .slides -->

Kokarn

1

7 мар. 2012 г. 16:07:09

Sisir 7.82K · Accepted Answer · 2012-03-07T10:45:39Z

Попробовал очень простую математику. <div class="slide"> будет выводиться после каждых 4 постов. Так что условие с классической логикой $i%4 == 0

<div class="slides_container">

                        <?php 
                            $args = array(
                                                        'post_type' => 'fastighet',
                                                        'numberposts' => -1,
                                                        'orderby' => 'ASC'
                                                    );
                            $posts = get_posts($args);
                            ?>
                        <?php $i = 0; foreach($posts as $post): ?>
                            <?php if($i%4 == 0): ?>
                                <div class="slide">
                            <?php endif; 
                                        $url = get_post_meta($post->ID, "url", true);
                                        if($url) {
                                                echo '<a href="'.$url.'">';
                                                echo the_post_thumbnail('admin-list-thumb');
                                                echo '</a>';
                                        } else {
                                                echo the_post_thumbnail('admin-list-thumb');
                                        } ?>
                                        <div class="caption">
                                                <h5><?php the_title(); ?></h5>
                                        </div>
                              <?php if($i%4 == 3): ?></div> <!--конец .slide--><?php endif; ?> 

                        <?php $i++; endforeach; ?>

                </div> <!-- конец .slides_container -->

Дайте знать, как получилось. Спасибо!