Récupérer une variable PHP dans une shadowbox JS

Récupérer une variable PHP dans une shadowbox JS - Javascript/Node.js - Programmation

Marsh Posté le 11-09-2014 à 14:41:37    

Bonjour,
 
J'ai un petit soucis pour passer une variable PHP dans un script JS qui me permet d'ouvrir une shadowbox.
 
Mon script JS :
<script type="text/javascript">
 
jQuery.noConflict();
 
jQuery(document).ready(function() {
//Evénement lié au clic du bouton de la page
jQuery(".shadowbox" ).click(function() {
//Récupération des dimensions de la page
var xHeight = jQuery(document).height();
var xWidth = jQuery(window).width();
//Dimensionnement du masque recouvrant la page
jQuery("#page" ).css({"width":xWidth,"height":xHeight});
//Apparition du masque
jQuery("#page" ).fadeIn();
//Attribution à celui-ci d’une transparence de
//façon à laisser la page légèrement visible  
jQuery("#page" ).fadeTo("fast",0.6);  
var xH = jQuery(window).height();
var xW = jQuery(window).width();
//Centrage de la shadow box
jQuery("#dialog" ).css("top", xH/2-jQuery("#dialog" ).height()/2);
jQuery("#dialog" ).css("left", xW/2-jQuery("#dialog" ).width()/2);
//Apparition de la shadow box
jQuery("#dialog" ).fadeIn();  
 
});
//Fermeture de la shadow box via le bouton qu’elle contient
jQuery(".window .close" ).click(function () {
jQuery("#page" ).hide();
jQuery(".window" ).hide();  
});  
});  
 
 
</script>
 
 
J'appelle ce script par :  
<input type="image" src="images/'.$row['sku'].'-1.jpg" class="shadowbox"  />
Le nom de mon image est donc généré en PHP, et j'ai plein d'images affichées sur la même page.
   
 
Au clic sur une image, ma shadowbox s'ouvre, mais je souhaiterais qu'elle affiche l'image sur laquelle j'ai cliqué. En gros je souhaiterais passer dans mon script la variable PHP $row['sku'], mais je ne sais pas comment faire !
J''ai essayé avec des input type hidden,etc mais je n'arrive jamais à récupérer ma variable.
 
 
 
 
Si qqn peut m'aider !
 
Merci
Nico

Reply

Marsh Posté le 11-09-2014 à 14:41:37   

Reply

Marsh Posté le 11-09-2014 à 15:21:50    

Il existe une fonction Jquery pour lire les attributs : http://api.jquery.com/attr/
 
Tu pourrais t'en servir dans ton code JS soit pour extraire ce que tu veux depuis l'attribut src, soit carrément ajouter un autre attribut à ton image
 

Code :
  1. <input type="image" src="images/'.$row['sku'].'-1.jpg" class="shadowbox" nomimage="'.$row['sku'].'"  />


---------------
Origin / PSN / Steam / Uplay : x1fr - bnet : Fab#2717
Reply

Marsh Posté le 11-09-2014 à 16:54:50    

merci pour la piste
 
par contre, mes compétences étant limitées en JS, je n'arrive pas a récupérer l'attribut correspondant
 
mon code est une bouche PHP, qui donne donc  :*

Code :
  1. <input type="image" src="images/XXXX-1.jpg" class="shadowbox" nomimage="XXXX.'"  />
  2. <input type="image" src="images/'YYYY-1.jpg" class="shadowbox" nomimage="YYYY'"  />
  3. <input type="image" src="images/ZZZZ-1.jpg" class="shadowbox" nomimage="'ZZZZ'"  />


 
sauf que quand je récupère l'attribut nomimage avec la fonction jQuerry, il me récupère tjs la valeur du premier attribut...

Reply

Marsh Posté le 11-09-2014 à 17:06:21    

Je ne suis pas un expert non plus je te dirais :p
 
jQuery(".shadowbox" ) récupère tous les éléments de la class shadowbox. En l'occurence tes 3 input.
 
Donc quand tu fais:

Code :
  1. jQuery(".shadowbox" ).click(function() {


 
Ca ne s'applique pas à un input, mais à une collection.
 
Il faudrait peut être changer ça en :

Code :
  1. jQuery(".shadowbox" ).each().click(function() {


 
(ça fait longtemps que je n'ai pas fait de jquery, je dis peut être une grosse connerie).


---------------
Origin / PSN / Steam / Uplay : x1fr - bnet : Fab#2717
Reply

Marsh Posté le 11-09-2014 à 17:24:06    

je ne sais pas si c'est une connerie, mais ca ne passe pas. La shadowbox ne s'ouvre plus du coup...
 
si plutôt que de mettre mon lien en input je met (ce qui ouvre bien la shadowbox)

Code :
  1. <a href="#" class="shadowbox" ><img src="images/'.$row['sku'].'-1.jpg"  /></a>


 
n'y a t'il pas moyen de passer une variable ?
j'ai bien essayé href="#?sku=$row['sku'].'-1.jpg" mais ca ne fonctionne pas

Reply

Marsh Posté le 11-09-2014 à 17:37:55    

Ben la piste de la fonction attr de jquery avait l'air bonne, par contre si elle t'affiche systématiquement le contenu de l'attribut de la première image, c'est qu'il y a un problème ailleurs

 

edit : tu accédais comment à la fonction attr? d'après ce message en mettant :

Code :
  1. $(this).attr("nomimage" )

ça fonctionne


Message édité par x1fr le 11-09-2014 à 17:42:05

---------------
Origin / PSN / Steam / Uplay : x1fr - bnet : Fab#2717
Reply

Marsh Posté le 11-09-2014 à 17:42:46    

yep, en fait je ne sais pas comment récupérer le bon attribut

Code :
  1. <input type="image" src="images/XXXX-1.jpg" class="shadowbox" nomimage="XXXX.'"  />


 
pour l'instant ils se nomment tous nomimage, donc forcément il ne sait pas lequel prendre.
 
je le récupère comme ca :
 

Code :
  1. var nomimage = $( "input" ).attr( "nomimage" );


 
il y aurait as un truc à faire avec un this ?
 
j'ai bien pensé à avoir des nom d'attributs uniques (ex : nomimage1, nomimage2 etc), mais bon pareil je ne sais pas comment le récupérer

Reply

Marsh Posté le 11-09-2014 à 18:52:30    

Non je pensais plus à un truc dans ce style
 

Code :
  1. <script type="text/javascript">
  2. jQuery.noConflict();
  3.  
  4. jQuery(document).ready(function() {
  5. //Evénement lié au clic du bouton de la page  
  6. jQuery(".shadowbox" ).click(function() {
  7.     alert($(this).attr("nomimage" ));
  8. //Récupération des dimensions de la page  
  9. var xHeight = jQuery(document).height();
  10. var xWidth = jQuery(window).width();
  11. //Dimensionnement du masque recouvrant la page  
  12. jQuery("#page" ).css({"width":xWidth,"height":xHeight});
  13. //Apparition du masque  
  14. jQuery("#page" ).fadeIn();
  15. //Attribution à celui-ci d’une transparence de  
  16. //façon à laisser la page légèrement visible   
  17. jQuery("#page" ).fadeTo("fast",0.6); 
  18. var xH = jQuery(window).height();
  19. var xW = jQuery(window).width();
  20. //Centrage de la shadow box  
  21. jQuery("#dialog" ).css("top", xH/2-jQuery("#dialog" ).height()/2);
  22. jQuery("#dialog" ).css("left", xW/2-jQuery("#dialog" ).width()/2);
  23. //Apparition de la shadow box  
  24. jQuery("#dialog" ).fadeIn(); 
  25.  
  26. });
  27. //Fermeture de la shadow box via le bouton qu’elle contient  
  28. jQuery(".window .close" ).click(function () {
  29. jQuery("#page" ).hide();
  30. jQuery(".window" ).hide(); 
  31. }); 
  32. }); 
  33. </script>


---------------
Origin / PSN / Steam / Uplay : x1fr - bnet : Fab#2717
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed