web-dev-qa-db-fra.com

Chargez des images post-attachées sur un seul site avec fancybox

J'essaie de créer un site d'une seule page qui affichera des messages sous forme de vignettes dans certaines parties. Ensuite, si vous cliquez sur une vignette, je souhaite que toutes les images contenues dans ce message soient chargées avec fancybox pendant que l’utilisateur reste à la maison.

Je charge la première image sur mon modèle avec cette
<a href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>.
Et les images de post sont simplement créées dans l'éditeur de cette façon
<a href="blabla/image.jpg"><img src="blabla/image.jpg" /></a>.

Lorsque je clique sur la vignette, le navigateur suit le lien permanent. Donc, je suis coincé avec 2 approches différentes maintenant.

  1. Chargement de the_content du message, puis masquage de toutes les images MAIS le premier ...

  2. Garder avec the_post_thumbnail(); et ensuite écrire quelque chose qui trouvera l'identifiant de la publication, puis affichera le reste des images jointes.

Je vise le deuxième, mais je suis très novice. WP dev. Je ne sais donc pas comment écrire la fonction "Rechercher un identifiant" ... Tout le monde peut aider? BTW Fancybox fonctionne bien, je peux ouvrir des images.

postsfunctionsattachmentswp-get-attachment-image
1
wyem

Je pense que je comprends ce que vous essayez de réaliser maintenant. Vous devrez modifier le single.php (ou single-post-type.php s'il s'agit d'un CPT) pour pouvoir exécuter, via ajax, votre galerie ou autre si le contenu est visualisé via ajax. Voici quelque chose (légèrement modifié) que j'ai utilisé dans le passé pour faire exactement cela.

C'est la boucle principale, à peu près comme vous l'avez indiqué ci-dessus. Nous supposons que Fancybox est chargé et prêt.

while($loop->have_posts()) : $loop->the_post();
    echo '<a href="'.get_permalink().'" class="fancybox fancybox.ajax">'.
    get_the_post_thumbnail($post->ID, 'some-size', array('class' => 'some-class')).'</a>';
endwhile;

Ajoutez cette fonction à functions.php. Il retournera la valeur true si le contenu est visualisé via une requête ajax.

// content loading in ajax? 
function is_ajax() {
    return (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && 
    $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest");
}

Ensuite, sur votre single, vous voudrez savoir si vous êtes en ajax ou non, pour créer quelque chose qui ressemble à ceci:

if(is_ajax()){ 
    echo '<div class="gallery-holder">';
} else {
    get_header(); 
    // put any other divs that need to happen in a normal page here
}

// do something with your images here, such as an attachment loop

if(is_ajax()){ 
    echo '</div>'; // close anything we opened
} else {
    get_footer(); 
    // put any other closing divs here
}
wp_reset_query();

Réalisez que beaucoup de personnes "parcourent les onglets" et que votre aperçu de vignette s'ouvrira dans un nouvel onglet, ce qui permettra à votre page d'être toujours affichée selon la méthode alternative.

C'est également à vous de choisir comment vous voulez parcourir toutes les images sur le single.php.

1
GhostToast