Parcourir un ensemble d'images avec un bouton

**Msysteme** · 28/01/2015, 23h38

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

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
<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 :

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
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 /

**SpaceFrog** · 29/01/2015, 08h45

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

**Msysteme** · 29/01/2015, 14h26

Code :

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
<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>

**SpaceFrog** · 29/01/2015, 14h33

la coloration syntaxique ne te choque pas ?

Code :

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

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 ...