Affichage galerie photo

[marion.bouilly]

Bonjour tout le monde !

J'ai une petite question à vous poser.
Je crée un site, et dans ce site nous avons des photos.

J'aimerais que les photos situées à droite de ma page dans une div, apparaissent dans une autre div à gauche.
Je suis pas très doué en JAVA. :s

En espérant avoir votre aide !
(Sinon, faire une page associé à chaque photo, mais le site deviendrait lourd !)

Merci de votre aide et du tps que vous prendrez pour répondre.

[rotrevrep]

la réponse se fera en javascript si tu le souhaite

[Atomya Rise]

je ne pense pas que tu sois dans le bon forum pour ton soucis

Attention, Java et Javascript sont deux langages différent, à ne pas confondre

Et comme le dis rotrevrep, javascript te viendras en aide

En gros : tu créer tes deux divs avec un class commune, et ensuite, tu les remplis à l'aide de Javascript....

exemple :

Code html :

1
2
 
<div class="photo"></div>

Code javascript :

1
2
3
4
5
 
var tab = document.getElementsByClassName('photo');
for(var i = 0; i< tab.length; i++) {
tab[i].innerHTML = '<img src="http://www.monsite.com/maphoto.jpg">';
}

Attention, cette fonction "getElementsByClassName" est native dans firefox 3 et IE9, mais tu trouveras des implémentations de cette fonction sur internet.
Exemple :

Code javascript :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
function getElementsByClassName(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
        oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];     
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }   
    }
    return (arrReturnElements)
}

Attention, je n'ai pas essayé ! (source : http://ejohn.org/blog/getelementsbyc...ed-comparison/ )

Au pire des cas, jQuery sera beaucoup plus simple et te faciliteras la tâche

[Torgar]

Bonjour,

Je pense que ce qu'elle veut c'est que lorsque l'on clique sur une des photos de la div de droite (miniatures ?), elle s'affiche en taille réelle dans la div de gauche. Ce qui correspondrais plus à une galerie photo à mon avis.

Parce que réafficher deux fois les mêmes images dans des div juxtaposées ne me parait pas pertinent et logique, mais je peux me tromper.

Merci de nous confirmer que nous avons bien compris la problématique posée.

[marion.bouilly]

Bonjour à tous,

Effectivement Tolgar tu as raison. Je veux que la miniature s'affiche en taille réelle dans un autre div.
Et puis, je comprends rien au code que vous me fournissez. J'ai du mal à comprendre la logique !!! :s

En espérant que vous pouvez m'aider ..
Merci à tous pour vos réponses !!

[Torgar]

Dans ce cas il faut partir sur quelque chose de ce type (à adapter à tes besoins, attention !)

Code :

1
2
3
4
5
6
7
8
9
10
11
<div id="gauche"></div>
 
    <div id="droite">
        <img src="01.png" alt="image_01" onclick="load_picture('02');" />
    </div>
 
    <script type="text/javascript">
        function load_picture(name) {
            document.getElementById('gauche').innerHTML = '<img src="' + name + '.png" alt="" />';
        }
    </script>