web-dev-qa-db-fra.com

Chargement du contenu d'un post dans FancyBox

J'ai une question délicate. J'ai créé un type d'article personnalisé dont je souhaite afficher les articles dans un carrousel à défilement. Le carrousel n'affichera que le titre, l'extrait et un bouton "lire plus". Le bouton "lire plus" affiche le message complet dans une FancyBox.

Voici mon code jusqu'à présent:

<ul id="slider2">
<?php
    $args = array( 'post_type' => 'jobs', 'posts_per_page' => 15 , 'order' => 'ASC' );
    $loop = new WP_Query( $args ); ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <li>
            <h4><?php the_title(); ?></h4>
            <?php echo excerpt( '30' ); ?>
            <a class="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Read more &rarr;</a>
            <div style="display: none;">
                <div id="inline1" style="width:400px;height:100px;overflow:auto;"><?php the_content(); ?></div>
            </div>
        </li>
    <?php endwhile; wp_reset_query(); ?>
</ul>

Tout fonctionne bien. Les scripts Carousel et FancyBox se chargent correctement, mais FancyBox affiche un contenu incorrect.

Toute aide/conseil serait génial.

custom-post-typespostsquery-posts
1
jmysona

Espérons que cela aidera

<ul id="slider2">  
<?php
$args = array( 'post_type' => 'jobs', 'posts_per_page' => 15 , 'order' => 'ASC' );
$loop = new WP_Query( $args ); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); global $post; ?>
    <li>
        <h4><?php the_title(); ?></h4>
        <?php echo excerpt( '30' ); ?>
        <a class="various1 fancybox" href="#inline<?php echo $post->ID; ?>" title="Lorem ipsum dolor sit amet">Read more &rarr;</a>
        <div style="display: none;">
            <div id="inline<?php echo $post->ID;  ?>" style="width:400px;height:100px;overflow:auto;"><?php the_content(); ?></div>
        </div>
    </li>
<?php endwhile; wp_reset_query(); ?>
1
Dhanuka Nuwan

Le problème est que vous déclarez un même identifiant pour chaque DIV de la boucle. Ce dont vous avez besoin est de faire quelque chose comme ceci:

    <ul id="slider2">
<?php
    $args = array( 'post_type' => 'jobs', 'posts_per_page' => 15 , 'order' => 'ASC' );
    $loop = new WP_Query( $args ); $i = 0; ?>
    <?php while ( $loop->have_posts() ) : $loop->the_post(); $i++; ?>
        <li>
            <h4><?php the_title(); ?></h4>
            <?php echo excerpt( '30' ); ?>
            <a class="various1" href="#inline<?php echo $i; ?>" title="Lorem ipsum dolor sit amet">Read more &rarr;</a>
            <div style="display: none;">
                <div id="inline<?php echo $i; ?>" style="width:400px;height:100px;overflow:auto;"><?php the_content(); ?></div>
            </div>
        </li>
    <?php endwhile; wp_reset_query(); ?>
</ul>

J'ai changé le inline1 avec inline[?php echo $i; ?].

J'espère que cela résoudra votre problème.

1
Viktor Hugo Morales

Si le contenu de votre fancybox ne vous convient pas, le problème provient probablement de votre utilisation de jquery ou de votre plugin.

Si vous utilisez le plugin "fancybox for wordpress", je sais par expérience qu'il ne gère pas bien le contenu en ligne par défaut. Vous devrez peut-être définir un appel supplémentaire dans le plug-in.

Il semble que vous reflétiez l'utilisation en ligne sur le site fancybox.net.
Vous devriez essayer de mettre en place un appel similaire à fancybox utilisé ici:

$("#various1").fancybox({
    'titlePosition'     : 'inside',
    'transitionIn'      : 'none',
    'transitionOut'     : 'none'
});`

c'est l'appel pour cet exemple html:

<a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline - auto detect width / height</a>

Où various1 est l'id du lien et fancybox affiche le contenu de l'élément qui correspond à l'id de l'attribut href du lien (dans ce cas, href="#inline1").

0
Evan Mattson