Modificar este bucle para adaptarlo a mi slider de jQuery (diapositivas)

Question

Modificar este bucle para adaptarlo a mi slider de jQuery (diapositivas)

7 mar 2012, 10:30:12

Vistas: 2.15K

Votos: 2

Estoy intentando hacer un slider que tome miniaturas de un tipo de entrada personalizado y muestre cuatro de ellas por cada "diapositiva". Logré que el slider y las miniaturas funcionen correctamente, pero no estoy seguro de cómo modificar el bucle para que muestre 4 posts en un contenedor, luego repita con los siguientes 4 posts y así sucesivamente.

Mi bucle luce así:

<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> <!-- fin .slides_container -->

    <a href="#" class="prev">anterior</a>
    <a href="#" class="next">siguiente</a>

</div> <!-- fin .slides -->

Cada div con la clase slide se convierte en una diapositiva como puedes ver. Pero ¿cómo puedo hacer que coloque 4 posts en cada diapositiva, luego otros 4 posts en otra diapositiva, etc.?

¡Cualquier ayuda o consejo sería realmente apreciado!

Johan Dahl

1.34K

jquery loop slideshow

Comentarios

Como ya sabes cómo consultar tus publicaciones y cómo devolver la imagen destacada de esas publicaciones, lo que queda es realmente una pregunta de PHP, más que una pregunta de WordPress.

Chip Bennett

7 mar 2012 14:38:52

Todas las respuestas a la pregunta

Comentarios

Parece que por alguna razón solo obtengo una imagen por diapositiva. Además, las miniaturas no enlazan a nada, aunque deberían enlazar a cada publicación.

Johan Dahl

7 mar 2012 11:07:51

@JohanDahl: había un error en mi código. Lo corregí. Prueba ahora.

Sisir

7 mar 2012 11:15:28

Sí, noté que faltaba el <?php y lo agregué. Aún así, nada ha cambiado. Sigo obteniendo solo una diapositiva por imagen :/

Johan Dahl

7 mar 2012 11:20:18

@JohanDahl ¿Cómo es eso ahora?

kaiser

7 mar 2012 11:22:39

Actualicé mi código para que otras cosas funcionaran. Aún así, solo obtengo una miniatura de publicación por diapositiva.

http://pastebin.com/WbERsyUH

Johan Dahl

7 mar 2012 11:33:01

Mostrar los 12 comentarios restantes

Casi correcto. El único problema era que en realidad no quieres imprimir tanto el inicio como el final en el mismo índice. El siguiente código funciona para mí en una situación similar. El único cambio real es que $i comienza en 1 y imprime las etiquetas de apertura y cierre de las diapositivas en diferentes conteos.

También me tomé la libertad de limpiar un poco el código.

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

        <?php 
        $loop = new WP_Query( array( 
            'post_type' => 'fastighet', // Tipo de post: propiedad
            'posts_per_page' => -1 // Mostrar todas las propiedades
        ) ); 
        $i = 1; // Iniciar contador en 1
        while ( $loop->have_posts() ) : 
            $loop->the_post(); 
            if( $i % 4 == 1 ) : // Cada 4 propiedades
                ?>
                <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> <!-- fin .fastighet-slider-entry -->
            <?php 
            if( $i % 4 == 0 ) : // Cerrar div cada 4 propiedades
                ?>
                </div>
                <?php 
            endif; 
            ++$i; 
        endwhile; 
        wp_reset_query(); // Restablecer consulta
        ?>

    </div> <!-- fin .slides_container -->

    <a href="#" class="prev">anterior</a>
    <a href="#" class="next">siguiente</a>

</div> <!-- fin .slides -->

Kokarn

1

7 mar 2012 16:07:09

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

Probé matemáticas muy simples. <div class="slide"> se imprimirá después de cada 4 publicaciones. Entonces, una declaración if con lógica de la vieja escuela $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> <!--fin .slide--><?php endif; ?> 

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

                </div> <!-- fin .slides_container -->

Déjame saber cómo te va. ¡Gracias!