Discussion :

[clickandgo]

Bonjour à tous

J'ai créé grâce à un tutoriel cette galerie photos simple qui marche parfaitement, cependant il faudrait maintenant qu'au click sur une miniature celle-ci s'affiche dans la DIV "BigImage" or je ne sais pas comment faire... Un petit script JS est il obligatoire ?

Merci d'avance pour votre réponse

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
@{
    ViewBag.Title = "Telecharger des images";
}
 
<h3>Télecharger des images</h3>
<p></p>
<p>
    @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="file" name="image" />
        <input type="submit" value="Télecharger" />
    }
 
</p>
 
<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
        <td width="150px" valign="top" align="center" style="border-right:3px solid #EEEEEE">
            <div id="ImageGallery" style="overflow:auto; height:500px; width:130px; display:inline-block;">
                <asp:Repeater id="Repeater1" runat="server">
                    <ItemTemplate>
                        @foreach (var item in Model)
                        {
                            <img src="@item" alt="Image" width="100" height="100" style="cursor:pointer" />
                            <a id="@item" href="#" onclick="DeleteImage('@item');">X</a>
                        }
                    </ItemTemplate>
                </asp:Repeater>
            </div>
        </td>
        <td valign="top" align="center">
            <img  id="bigImage" alt="bigImage" width="500" height="500" />
        </td>
    </tr>
</table>
 
<script src="Scripts/jquery-1.7.1.js"></script>
 
<script>
    function DeleteImage(item) {
        var url = "/Home/DeleteImage";
        $.post(url, { Name: item }, function (data) {
            window.location.href = "/Home/Upload";
        });
 
    }
</script>

[Dokho1000]

Oui, tu n'aurais pas le choix...ou bien tu pourrais mettre ton image dans un hyperlien dans lequel tu précises la "target" avec la valeur "_blank" ceci ouvrirait alors ton image dans une nouvelle fenêtre mais ce ne serait pas très beau...
Par contre ton repeater ne sert a rien et surtout pas en MVC...

[clickandgo]

Merci pour votre réponse

Pour quelle raison le repeater ne servirait il a rien ?
Dans ma page il me permet de voir en colonne les miniatures et j'utilise l'overflow de la DIV pour avoir l'ascenseur disponible...

Une idée du script à coder pour que la grande image apparaisse au click dans sa DIV ?
Je ne sais pas encore coder ce genre de chose, toute aide me serait utile

Merci beaucoup d'avance

[Dokho1000]

Merci pour votre réponse

Pour quelle raison le repeater ne servirait il a rien ?
Dans ma page il me permet de voir en colonne les miniatures et j'utilise l'overflow de la DIV pour avoir l'ascenseur disponible...

Une idée du script à coder pour que la grande image apparaisse au click dans sa DIV ?
Je ne sais pas encore coder ce genre de chose, toute aide me serait utile

Merci beaucoup d'avance

Sans le repeater ca devrait faire la même chose...
Pour la div, c'est plus sur le forum javascript qu'il faudrait aller.
Mais une idée simplement serait de mettre un div caché avec la grande image dedans (donc la balise img dans le div) et au click tu l'afficherais en modal...tu trouveras plein de tuto pour faire une modal en js.