web-dev-qa-db-fra.com

Comment faire pour que le contenu de chaque article soit affiché dans la même div

Essentiellement, ce que j'essaie de faire est d’afficher l’image sélectionnée de chacun de mes messages sur des rangées de 3 ne montrant que l’image présentée. Lorsque vous cliquez sur l'une des images présentées, un div au-dessus de la ligne contenant le contenu de la publication s'affiche.

Je ne suis pas sûr de savoir comment y parvenir. Si je place le contenu div dans la boucle, il générera un div séparé pour le contenu de chaque message.

Voici quelques images pour montrer ce que j'essaie d'accomplir:

Etat initial:  Initial State

État sélectionné:  enter image description here

Voici le code que j'ai actuellement:

<?php query_posts( array( 'post_status' => 'publish' , 'post_type' => array( 'stories' )  ) ); ?>
    <?php if ( have_posts() ) : ?>
        <?php while ( have_posts() ) :?>
            <?php the_post(); ?>
                <div id="story">
                    <div class="story-info">
                        <div class="story-author">
                            <h3 class="name"><?php echo get_the_title(); ?></h3>
                            <p class="location"><?php echo get_field('location'); ?></p>
                        </div>
                        <div class="story-content">
                            <?php echo get_the_content(); ?>
                        </div>
                    </div>
                    <div class="story-photo"><?php echo get_the_post_thumbnail($post_id, 'full'); ?></div>
                </div>
        <?php endwhile; ?>
    <?php endif; ?>
<?php wp_reset_query(); ?>

Et le Javascript:

$('.story-photo').click(function() {
    $(this).siblings(".story-info").slideToggle('fast', '');
});

Cependant, étant donné que le contenu de chaque article se trouve dans sa propre division distincte, le résultat obtenu est une cascade au lieu de déplacer toutes les images de la rangée d’un nombre égal. Des idées comment mieux résoudre ce problème?

Merci!

loopthe-content
1
APAD1

Avoir 3 divs pour le contenu du texte n'est pas un problème, mais ils ne devraient pas être contenus par le même div que les images ...

Vous pouvez avoir:

<div id="container">
    $count = 1;
    while loop
        <img id img$count..>
        <div id div$count...>
        $count++;
    Endwhile
</div>

Vous positionnez ensuite les divs absolument et les cachez. Cliquez sur img1 montre div1, etc. L'exemple de code est très simplifié, l'écriture à partir de mon téléphone, mais devrait être suffisante pour obtenir la logique ....

2
Gioia Fueter