Bonjour à tous,

Je viens vers vous pour une question concernant le pluggin flippage de Marc Buils.

Pour afficher mes images voici mon code :

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
<div id="view">
        <div class="exemples">
            <div><img src="img/page1.png" style="margin-left: 0px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: 0px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page1.png" style="margin-left: -384px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: -384px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page2.png" style="margin-left: 0px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: 0px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page2.png" style="margin-left: -384px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: -384px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page3.png" style="margin-left: 0px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: 0px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page3.png" style="margin-left: -384px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: -384px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page4.png" style="margin-left: 0px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: 0px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page4.png" style="margin-left: -384px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: -384px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page5.png" style="margin-left: 0px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: 0px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page5.png" style="margin-left: -384px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: -384px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page6.png" style="margin-left: 0px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: 0px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page6.png" style="margin-left: -384px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: -384px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page7.png" style="margin-left: 0px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: 0px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page7.png" style="margin-left: -384px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: -384px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page8.png" style="margin-left: 0px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: 0px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
            <div><img src="img/page8.png" style="margin-left: -384px;" /><a href="#" class="buttonValidate" ><img src="param/img/button.png" style="position: absolute; margin-left: -384px; top: 925px; left: 250px; opacity: 0.5;" /></a></div>
        </div>
    </div>

Tout fonctionne très bien cependant j'aimerais y apporter une amélioration.

Ici le code est très crade et je ne me vois pas présenter ça à nos clients.

Est-ce possible d'afficher les images différemment ?



Je pensais à une variable contenant le nom de mon image que j'irais incrémenter pour raccourcir énormément le code.

Auriez vous une idée et/ou une démarche à appliquer pour simplifier ça au maximum ?

n fait mon objectif serait de demander à nos clients de nous envoyer la liste d'image dans une archive en leur spécifiant à l'avance la taille et le nom que devront prendre les images.



Par la suite nous n'aurions plus qu'à aller mettre le nombre d'images dans une variable et les images dans le bon dossier.



Je ne sais pas si j'arrive bien à me faire comprendre ?

tout est visible sur http://quentincloarec.com

Merci beaucoup