Interpréter une variable javascript dans php

**unix27** · 16/09/2016, 18h32

bonjour,
Je récupére bien une variable en javascript et je souhaite l'interpréter en php...
je ne souhaite pas utiliser Jquery mais juste une fonction javascript ci-dessous

gallery.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="col-xs-6 col-sm-4 col-md-3 portfolio" >
                    <a href="<?php echo $data['contenu_img'];?>" class="thumbnail" data-toggle="modal" data-target="#firstPics" onclick="clic(this.href);">
                      <img src="<?php echo $data['contenu_img'];?>" class="img-responsive" />
						
					</a>
				</div>

toujours dans gallery.php(partie header)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<script language="JavaScript">
function clic(param_img_select){
 
 var $image_select=param_img_select
 return($image_select);

 }
	</script>

Toujours dans gallery.php(dans une div)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9

<div class="modal fade" id="firstPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                          <img src="#"  class="img-responsive" />
						</div>
...

j'aimerai récupérer la variable ($image_select) dans javascript et la mettre dans src=...(php)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="#"  class="img-responsive" />

Merci d'avance

**ABCIWEB** · 16/09/2016, 19h01

Tu peux pas récupérer directement une variable javascript avec php car php s'exécute avant la création de la page et donc avant javascript. Il faut donc faire une requête ajax en javascript pour s'adresser de nouveau au serveur. Mais pas certain que tu en aies besoin... C'est quoi la finalité de ce script, faire afficher une image dans une fenêtre modale ? Si oui tu n'as pas besoin de php, faut tout faire en javascript.

**unix27** · 16/09/2016, 21h40

la finalité du script est :

1/ la page (gallery.php) se charge et affiche plusieur image-->traitement marche bien je l'ai fait

2/ ensuite l'utilisateur choisi une image (toujours dans la page gallery.php)--> aussi je récupéré l'url de chaque image sélectionnées en javascript

3/ en fonction du lien sélectionné une fenêtre modale affiche l'image avec une grande dimension(dans gallery.php toujours... une div) donc puisque j'ai l'url(le paramétre) en javascript j'ai besoin de l'utiliser dans ma requête php pour n'afficher que l'image sélectionner et c'est ce que je ne sais pas faire pour le moment

**unix27** · 16/09/2016, 21h59

pour plus de précision voici le code complet de ma page gallery.php statique... que je souhaite rendre dynamique

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!-- DOCTYPE html -->
<html>
    <head>
        <title>Gallery integration</title>
        <link href="vendor/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
 
        <link href="vendor/bootstrap-material-design/dist/css/ripples.min.css" rel="stylesheet">
        <link href="vendor/bootstrap-material-design/dist/css/material-wfont.min.css" rel="stylesheet">
 
        <link href="assets/gallery.css" rel="stylesheet" type="text/css">
        <meta charset="utf-8">
    </head>
    <body>
        <div class="container">
            <div class="row well">
                <div class="col-xs-12">
                    <span class="img-circle ju pull-left"></span>
                    <div class="pull-right userProgress">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success progress-bar-striped" style="width: 50%;">
                                <span class="sr-only">50%</span>
                            </div>
                        </div>
                    </div>
                    <span class="number pull-right">50%</span>
                </div>
            </div>
 
            <ol class="breadcrumb">
                <li><a href="galleries.html">Galleries</a></li>
                <li class="active">Graz, Autriche</li>
            </ol>
 
            <div class="row">
                <div class="col-xs-2 col-xs-offset-1">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#firstPics">
                        <img src="toto/01.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#secondPics">
                        <img src="toto/02.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#thirdPics">
                        <img src="toto/03.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#fourthPics">
                        <img src="toto/04.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#fifthPics">
                        <img src="toto/05.jpg" class="img-responsive" />
                    </a>
                </div>
            </div>
 
            <a href="javascript:void(0)" class="btn btn-info btn-fab btn-raised mdi-content-add pull-right"></a>
        </div>
 
        <div class="modal fade" id="firstPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="assets/img/galleries/01/01.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <div class="modal fade" id="secondPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="toto/02.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <div class="modal fade" id="thirdPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="toto/03.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <div class="modal fade" id="fourthPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="toto/04.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <div class="modal fade" id="fifthPics">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="toto/05.jpg" class="img-responsive" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-danger">Supprimer</button>
                        <button type="button" class="btn btn-info">Partager</button>
                        <button type="button" class="btn btn-success">Vendre</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
 
        <script type="text/javascript" src="vendor/jquery/dist/jquery.js"></script>
        <script type="text/javascript" src="vendor/bootstrap/dist/js/bootstrap.js"></script>
 
        <script src="vendor/bootstrap-material-design/dist/js/ripples.min.js"></script>
        <script src="vendor/bootstrap-material-design/dist/js/material.min.js"></script>
        <script>
            $(document).ready(function() {
                $.material.init();
            });
        </script>
    </body>
</html>

**ABCIWEB** · 17/09/2016, 03h30

Tout dépend si toutes les images à agrandir sont listées dans ta page, en d'autres termes si toutes tes vignettes sont dans cette page. Si oui tu n'as pas besoin de php puisque tu pourras faire afficher les images avec javascript pour peu que tu aies leur adresse, ce qui est apparemment le cas.

Par contre si tu as un système de pagination ajax, évidemment il faudra passer par ajax pour récupérer les adresses suivantes avec php pour les transmettre à javascript qui les fera afficher ensuite.

Mais remarque que dans les deux cas c'est javascript qui fait afficher l'image agrandie, pas php

Regardes des tutos javascript avec new Image().

**unix27** · 19/09/2016, 11h32

Merci pour ta réponse en fait pour récapituler mon souci(j'avoue que je ne suis pas un expert en javascriopt...

mais bon)
en gros j'ai une page qui s'appelle toto.php et dedans j'ai deux image

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<div class="col-xs-2 col-xs-offset-1">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#firstPics">
                        <img src="toto/01.jpg" class="img-responsive" />
                    </a>
                </div>
                <div class="col-xs-2">
                    <a href="#" class="thumbnail" data-toggle="modal" data-target="#secondPics">
                        <img src="toto/02.jpg" class="img-responsive" />
                    </a>
                </div>

et j'aimerai que quand je clique sur l'une de ces deux images... par exemple : (02.jpg) récupérer sa valeur en php avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php echo ... ?>

pour cela j'ai créé une petite fonction en javacript

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script language="JavaScript">
function clic(param_img_select){
 var $image_select=param_img_select
 return($image_select);
  }
	</script>

la valeur $image_select me retourne bien le nom de l'image qu'on je clique sur la première image j'ai 01.jpg et sur la deuxième j'ai bien 02.jpg
maintenant

mon souci et comment récupérer ces valeurs dans php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part