bonjour à tous.
Bon alors, j'ai encore un problème.
J'ai bien utilisé la ligne de code ci-dessus, l'image s'ouvre dans le popup sans problème.
Le problème est le suivant : j'ai une suite d'images (bouteilles) affichées. et quand on clique cela ouvre une autre image (détails de la bouteille). Bien sûr toutes les images qui s'ouvrent sont différentes.
Mais pour moi, ce n'est pas le cas. Quand je clique sur la bouteille n°1, cela ouvre une image A, puis sur une seconde bouteille cela ouvre la même image A (ce qui ne devrait pas arriver).
Si je reloade le site, et que je clique sur la bouteille n°2, cela ouvre bien l'image B, mais quand je clique sur la bouteille n°1, cela ouvre également l'image B.
En gros, cela ouvre seulement la première image chargée.
Je rappelle mon code là où j'ai mes images (de bouteilles) sur lesquelles je clique pour ouvrir un popup :
<div id="bouteilles-contentleft">
<?php
$args_champagne1= array(
'post_type' => 'champagne1',
'orderby' => 'meta_value_num',
'meta_key' => 'ordre_champagne1',
'posts_per_page' =>-1,
'order' => 'asc',
);
$the_champagne1 = new WP_Query($args_champagne1);
while ($the_champagne1->have_posts()) :
$the_champagne1->the_post();
$nom_champagne1 = get_post_meta($post->ID,'nom_champagne1',true);
$ordre_champagne1 = get_post_meta($post->ID,'ordre_champagne1',true);
$sousnom_champagne1 = get_post_meta($post->ID,'sousnom_champagne1',true);
$logo_champagne1 = get_post_meta( $post->ID, 'logo_champ1', true );
$pdf_champagne1 = get_post_meta( $post->ID, 'pdf_champ1', true );
?>
<div class="bouteille">
<a class="poplight" href="#" data-width="630" data-rel="fichesbouteilles" data-nom-image="<?php echo $pdf_champagne1; ?>" >
<img class="champagne" src="<?php echo $logo_champagne1; ?>" alt="Champagner Trichet-Didier" >
</a>
<div class="underline-bouteille"> </div>
<p class="bouteille-nom"><?php echo $nom_champagne1; ?> </p>
<p class="bouteille-sousnom"> <?php echo $sousnom_champagne1; ?></p>
</div>
<?php
endwhile;
wp_reset_postdata();
?>
</div> <!--fin bouteilles-contentleft -->
Le javascript qui fait passer le chemin vers l'image à ouvrir dans le popup:
<script type="text/javascript">
jQuery(function($){
//Lorsque vous cliquez sur un lien de la classe poplight
$('a.poplight').on('click', function() {
var popID = $(this).data('rel'); //Trouver la pop-up correspondante
var popWidth = $(this).data('width'); //Trouver la largeur
// passage de l'id de l'évènement dans le popup pour inscription en ligne
$("#inscriptionenligneform").append("<input type=\"hidden\" name=\"idEvenement\" value=\"" + $(this).data("idEvenement") + "\"/>");
$(".nomEvenementFormulaire").replaceWith("<div class=\"nomEvenementFormulaire\">" + $(this).data("nomEvenement") + "</div>");
$("#inscriptionenligneformmob").append("<input type=\"hidden\" name=\"idEvenement\" value=\"" + $(this).data("idEvenement") + "\"/>");
$(".nomEvenementFormulairemob").replaceWith("<div class=\"nomEvenementFormulairemob\">" + $(this).data("nomEvenement") + "</div>");
//$(".dataJpgPopup").replaceWith(" <img src=\" " + $(this).data("nomImage") + " \" >");
$(".dataJpgPopup").replaceWith("<img src="+$(this).data("nomImage")+" \ >");
//Faire apparaitre la pop-up et ajouter le bouton de fermeture
$('#' + popID).fadeIn().css({ 'width': popWidth}).prepend('<a href="#" class="close"><img src="http://champagner-pierre-trichet.de/wp-content/themes/pierretrichet/images/close-popup.png" class="btn_close" title="Close Window" alt="Close" /></a>');
//Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
var popMargTop = ($('#' + popID).height() + 80) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
//Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues d'anciennes versions de IE
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();
$('#content').css({'position' : 'fixed'}).fadeIn();
return false;
});
//Close Popups and Fade Layer
$('body').on('click', 'a.close, #fade', function() { //Au clic sur le body...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove();
$('#content').css({'position' : 'relative'}).fadeIn();
}); //...ils disparaissent ensemble
return false;
});
});
</script>
et le popup
<div id="fichesbouteilles" class="popup_block">
<div class="dataJpgPopup"></div>
</div>
au cas où, un lien vers le site :
http://champagner-pierre-trichet.de/
C'est bizarre car j'utilise la même technique dans ce site pour un formulaire d'inscription.
Et cela fonctionne bien.
Si quelqu'un à une remarque, un conseil merci beaucoup !
Timama (je cherche toujours et encore)
