Parcourir un ensemble d'images avec un bouton

Version imprimable

Bonjour, j'ai un repeater dans ma page asp :

Code:

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
<div>
    <asp:Repeater runat="server" ID="repeatPhotos">
    <ItemTemplate>
        <span style="float: left; width: 130px;">
            <asp:ImageButton ImageUrl='<%# Eval("Chemin") %>' ID="imgPhoto" runat="server" alt=""
        Style="width: 100px; height: 100px; cursor: pointer" OnClientClick="return LoadDiv(this.src);" /></span>
    </ItemTemplate>
    </asp:Repeater>
    <div id="divBackground" class="modal"></div>
    <div id="divImage">
        <table style="height: 100%; width: 100%">
            <tr>
                <td valign="middle" align="center">
                    <img id="imgLoader" alt="" src="images/loader.gif" />
                    <img id="imgFull" alt="" src="" style="display: none; height: 500px; width: 590px" />
                </td>
            </tr>
            <tr>
                <td align="center" valign="bottom">
                    <input id="btnClose" type="button" value="Fermer" onclick="HideDiv()" class="button" />
                </td>
            </tr>
        </table>
    </div>
</div>

Code:

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
function LoadDiv(url) {
    var img = new Image();
    var bcgDiv = document.getElementById("divBackground");
    var imgDiv = document.getElementById("divImage");
    var imgFull = document.getElementById("imgFull");
    var imgLoader = document.getElementById("imgLoader");
    imgLoader.style.display = "block";
    img.onload = function () {
        imgFull.src = img.src;
        imgFull.style.display = "block";
        imgLoader.style.display = "none";
    };
    img.src = url;
    var width = document.body.clientWidth;
    if (document.body.clientHeight > document.body.scrollHeight) {
        bcgDiv.style.height = document.body.clientHeight + "px";
    }
    else {
        bcgDiv.style.height = document.body.scrollHeight + "px";
    }
    imgDiv.style.left = (width - 650) / 2 + "px";
    imgDiv.style.top = "20px";
    bcgDiv.style.width = "100%";
 
    bcgDiv.style.display = "block";
    imgDiv.style.display = "block";
    return false;
}
function HideDiv() {
    var bcgDiv = document.getElementById("divBackground");
    var imgDiv = document.getElementById("divImage");
    var imgFull = document.getElementById("imgFull");
    if (bcgDiv != null) {
        bcgDiv.style.display = "none";
        imgDiv.style.display = "none";
        imgFull.style.display = "none";
    }
}

j'ai reussi a agrandir chaque image avec un bouton close, mais ce que je souhaite faire c'est d'avoir un bouton suivant precedent pour parcourir toutes les images,

comment puis je faire /

29/01/2015, 08h45
SpaceFrog

Le code ASP ne nous est pas d'un grande utilité
il serait plus intéressant de voir le code html généré

Code:

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
<div id="ctl00_ContentHolder_TabContainer_TabPhotos" class="ajax__tab_panel" style="display:none;visibility:hidden;">
 
                    <h3 class="blocksubhead">
                        Télecharger une photo :
                        <span id="ctl00_ContentHolder_TabContainer_TabPhotos_lblPhotos" style="color:Red;font-weight:bold;"></span></h3>
                    <div>
                        <table id="tablePhotos" class="formulaire">
                            <tr>
                                <td>
                                    Nom de l'image :
                                </td>
                                <td>
                                    <input name="ctl00$ContentHolder$TabContainer$TabPhotos$txtNameImg" type="text" maxlength="50" id="ctl00_ContentHolder_TabContainer_TabPhotos_txtNameImg" class="txt" />
                                </td>
                                <td>
                                    Uploader l'image :
                                </td>
                                <td>
                                    <input type="file" name="ctl00$ContentHolder$TabContainer$TabPhotos$ImageUpload" id="ctl00_ContentHolder_TabContainer_TabPhotos_ImageUpload" class="txt" />
                                </td>
                                <td>
                                    <input type="submit" name="ctl00$ContentHolder$TabContainer$TabPhotos$btnTelecharger" value="Télecharger" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentHolder$TabContainer$TabPhotos$btnTelecharger&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_ContentHolder_TabContainer_TabPhotos_btnTelecharger" class="button" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5">
 
                                </td>
                            </tr>
                        </table>
                    </div>
                    <h3 class="blocksubhead">
                        Photos attribuées :</h3>
                    <div>
 
                        <div id="divBackground" class="modal">
                        </div>
                        <div id="divImage">
                            <table style="height: 100%; width: 100%">
                                <tr>
                                    <td valign="middle" align="center">
                                        <img id="imgLoader" alt="" src="images/loader.gif" />
                                        <img id="imgFull" alt="" src="" style="display: none; height: 500px; width: 590px" />
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" valign="bottom">
                                        <input id="btnClose" type="button" value="Fermer" onclick="HideDiv()" class="button" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>

29/01/2015, 14h33
SpaceFrog

la coloration syntaxique ne te choque pas ?

Code:

onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentHolder$T

hormis le fais qu'un évènement n'attende pas autre chose que du javascript ( autrement dit "javacript:" est inutile ) tu as un souci de priorité des quotes ...
29/01/2015, 14h50
Msysteme

effectivement j'ai déjà posté ca mais je n'ai pas eu de reponse.

je veux quand je clique sur un lien j'active le deuxieme tabpanel
29/01/2015, 15h02
SpaceFrog

Heu ... ben commence par corriger la syntaxe

MAIS C'est pas moi qui a ecrit ca c'est html qui l'a interprete comme ca

voila ma ligne :

Code:

1
2
3
4
5
6
<asp:TemplateField HeaderText="ID_station" SortExpression="ID_station">
                                            <ItemTemplate>
                                                <asp:LinkButton ID="Consulter" CausesValidation="true" ValidationGroup="Groupe1"
                                                    CommandName="Consulter" CommandArgument='<%# Bind("ID_station") %>' runat="server">Consulter</asp:LinkButton>
                                            </ItemTemplate>
                                        </asp:TemplateField>

29/01/2015, 15h37
SpaceFrog

Alors juste pour ton info ... les langages serveur sont comme des machines à écrire du code html js ...
en gros ils écrivent ce que tu leur demandes d'écrire ...
Si tu dis à ASP de mettre les bonne quotes ... il les mettra
29/01/2015, 15h44
Msysteme

donc que dois je faire dans mon cas ?
29/01/2015, 15h52
SpaceFrog

Demander à asp de rediger correctement le onlick en respectant la priorité des quotes ...
reflféchis d'abord à comment syntaxer en le onclick en html js avec " '.. ' "
29/01/2015, 16h18
Msysteme

je n'ai pas compris
29/01/2015, 16h19
SpaceFrog

Comment devrait être rédigé le code html de ton onclick ?
29/01/2015, 16h25
Msysteme

le onclick du bouton lien 'Consulter' doit rendre visible d'autre tabpanel et activer le @eme et les charger avec les bonnes donnees, mais les tous les tabpanels sont sur la meme page
29/01/2015, 16h34
SpaceFrog

certes....

La question est à quoi doit ressembler un code bien syntaxé avec la priorité des quote respectée ...
29/01/2015, 16h39
Msysteme

quand vous commencer a parler des quotes je ne comprend plus rien.y a t il des quotes qui manquent ?
29/01/2015, 16h43
SpaceFrog

Etudie la coloration syntaxique de ce bout de code ...

Code:

<input type="submit" name="ctl00$ContentHolder$TabContainer$TabPhotos$btnTelecharger" value="Télecharger" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentHolder$TabContainer$TabPhotos$btnTelecharger", "", true, "", "", false, false))" id="ctl00_ContentHolder_TabContainer_TabPhotos_btnTelecharger" class="button" />

et en particulier

Code:

onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentHolder$TabContainer$TabPhotos$btnTelecharger", "", true, "", "", false, false))"

TU ne vois vraiment pas de souci avec les quotes => "
29/01/2015, 17h31
Msysteme

DONC IL faut virer les quotes de ca : "ctl00$ContentHolder$TabContainer$TabPhotos$btnTelecharger" mais comment puis je le faire ?

aussi comment puis je rectifier les fonction javascript de telle sorte a ajouter un lien suivant precedent et parcourir mes image dans le repeater
29/01/2015, 23h49
NoSmoking

Bonjour,

Citation:

...mais comment puis je le faire ?

en soignant ton code ASP et faire alterner les simples quotes et les doubles quotes.

Au final il faut que tu obtiennes

Code:

onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions('ctl00$ContentHolder$TabContainer$TabPhotos$btnTelecharger', '', true, '', '', false, false))"

ou encore

Code:

onclick='javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentHolder$TabContainer$TabPhotos$btnTelecharger", "", true, "", "", false, false))'
30/01/2015, 08h40
Bovino

Citation:

Au final il faut que tu obtiennes

Bof bof... je pense qu'on peut assez avantageusement se passer de javascript:. :toutcasse:
30/01/2015, 13h22
NoSmoking

Citation:

(...) se passer de javascript:. :toutcasse:

j'ai l'impression que c'est l'ASP (je ne connais que l'ASPTT pas l'ASP) qui lui génère.
30/01/2015, 13h36
Msysteme

effectivement nosmoking c'est asp qui genere cette chaine pas moi:?

le control c un control ajax tabcontainer et a l'interieur il y a un gridview

j'ai déjà posé le probleme au niveau asp mais aucune solution et maintenant je pose un autre probleme (suivant/precedent) et on est entrain de resoudre l'autre probleme:lol:
02/02/2015, 17h24
Msysteme

Comment puis je ajouter des bouton suivant/precedent a mon repeater pour parcourir les image si je les agrandit a l'aide de javascript (premier message du post)