galerie simple avec image grossissante au survol et replacement auto

Question

Bonjour à tous. peut être que ce topic existe déjà (cela ne m'étonnerai pas :) mais je ne lai pas trouvé. Voilà j'ai ce script avec ses variable que je ne maitrise pas pour vous dire à quel point je suis mauvais. Mais je voudrai avoir ça pour plusieurs images de tailles différentes alignées par défaut de gauche à droite sur ma page comme quand on colle des images à la suite dans la page et qu'elles passent à la ligne automatiquement en fonction de la taille de la fenêtre. or avec ça je peux le faire qu'avec une seule... Quelqu'un pourrait il me montrer? Document sans nom #img Voilà!

PetoleTeam · Answer

Bonjour,
l'analyse rapide du code mis montre que tu n'es pas sorti de l'auberge, bien que certaine fois il soit très agréable d'y rester.

Ce code est mono image à preuve la référence faite à document.image un peu partout dans le code.

Je rajoute que de faire grossir l'image du document va engendrer un décalage de tous les autres éléments de la page, le résultat peut être surprenant.

;O)

The Pooh · Answer

oui! c'est ça que je voudrai faire
mais je trouve pas un code qui marche...
comment fait on pour le rendre pluriimage?


NO LIMIT

PetoleTeam · Answer

pour le rendre compatible, il faut mettre les mains dans le clavier et la tête dans les mains, ceci ne va pas être simple!

1/ faire passer en paramètre l'élément qui subit l'événement mouseover et mouseout
2/ supprimer toutes références à document.image pour faire référence à l'élément image contenu dans la balise A, donc l'élément passé en paramètre.
3/ ne plus utiliser de variables globales mais affecter à chaque élément ses propres propriétés afin d'éviter les collisions avec d'autres éléments.
4/...d'autres bricoles surement...


;O)

The Pooh · Answer

Ok merci!

je sais bien que c'est facile de débarquer ici
et de demander comment faire mais j'aime trop le javascript
et c'est du chinois et je connais personne dans mon entourage
qui saurait faire ça pour moi. 

sinon ça en restera a mon code que j'ai trouvé et qui
marche pas pour une galerie.

mon envie c'est de pouvoir appliquer à des images diverses  
en enfilade par défaut de gauche à droite avec retour à la ligne automatique
le même effet de zoom en survol que je présente en haut.
pour que les images se repoussent systématiquement et fassent un truc bizare.

Je me demande dailleurs si on pourrait les faire soit zoomer vers le haut, soit
vers le bas pour avoir un truc qui semble encore plus bizare.

Donc si un ptit geek d'amour peut me rediger ce truc pour une image (je ferai le reste)
ce serai vraiment génial.

Sinon je trouverai une autre solution mais j'aimerai vraiment voir ce que ça peut faire.

Avis aux amateurs!

merci

PetoleTeam · Answer

Bonjour,
le principe pour que les fonctions soient adaptables reste somme tout simple voir trivial
Reprenons le code suivant



Deux fonction sans parametre

p {
  font-family : Verdana;
  font-size : 13px;
  width : 300px;
  border : 1px solid #e0e0e0;
  padding : 5px;
}
.p_over {
  color : #f00;
  font-size : 15px;
  font-weight : bold;
}
.p_out {
  color : #00f;
}


//---------------
function fnOver(){
  var oEncours = document.getElementById('P_1');
  oEncours.className = "p_over";
}
//--------------
function fnOut(){
  var oEncours = document.getElementById('P_1');
  oEncours.className = "p_out";
}



  
    Texte du paragraphe #1
  


  
    Texte du paragraphe #2
  



c'est en substance l'équivalent de ce que tu souhaites faire.

On observe que lorsque l'on passe la souris sur le 2nd P c'est le 1st qui est modifier et cela à cause des lignes
var oEncours document.getElementById('P_1'); // la contrainte est ICI id 'P_1'
L'idée est donc de s'affranchir de cette contrainte en passant en paramètre la référence à l'objet que l'on veux manipuler, donc récupérer directement l'objet en cours.

Illustration par un deuxième exemple



Deux fnction avec parametre

p {
  font-family : Verdana;
  font-size : 13px;
  width : 300px;
  border : 1px solid #e0e0e0;
  padding : 5px;
}
.p_over {
  color : #f00;
  font-size : 15px;
  font-weight : bold;
}
.p_out {
  color : #00f;
}


//---------------------
function fnOver( obj_){
  var oEncours = obj_;
  oEncours.className = "p_over";
}
//--------------------
function fnOut( obj_){
  var oEncours = obj_;
  oEncours.className = "p_out";
}



  
    Texte du paragraphe #1
  


  
    Texte du paragraphe #2
  



Observes bien le code pour voir ce qui change au niveau des fonctions ainsi que leur appel dans les balises P.

Le this en paramètre représente l'objet en cours donc c'est exactement ce qu'il faut.
On notera au passage que l'on n'a plus besoin de mettre d'ID aux balises.

Un stade complémentaire serait d'avoir une seule est même fonction en ajoutant encore un passage de paramètre, peut être pas obligatoire dans ton besoin, mais pour information voire formation.
l'exemple suivant illustre cette étape



Une seule fonction avec parametre

p {
  font-family : Verdana;
  font-size : 13px;
  width : 300px;
  border : 1px solid #e0e0e0;
  padding : 5px;
}
.p_over {
  color : #f00;
  font-size : 15px;
  font-weight : bold;
}
.p_out {
  color : #00f;
}


//-----------------------------
function fnClass( obj_, class_){
  var oEncours = obj_;
  oEncours.className = class_;
}



  
    Texte du paragraphe #1
  


  
    Texte du paragraphe #2
  




...comment faire mais j'aime trop le javascript ...
Normalement tu as toutes les billes pour y arriver et comme disait je ne sais plus qui aimes le et il t'aimera !!!!
;O)

The Pooh · Answer

Ouah merci Pétole je regarde des que possible
et je reviens vers toi
pour te dire si je réussi!

pour ta citation je pense plutot
à aide le ciel et le ciel t'aidera!

bye

The Pooh · Answer

Bon je ne sais quoi dire! Je sais pas si je suis idiot mais je vois pas du tout le rapport
entre des textes pour toi et des images pour moi. J'ai copié collé mélangé et rien. Dommage parce que mon petit code de départ est vraiment ce que je veux et il marche mais malgré toute ma bonne volonté je comprend pas ce que tu m'as gentillement expliqué Pétole. Je comprend ce qu'il faut faire en théorie
mais je vois pas comment ton code est applicable à ce que j'aimerai voir. Quand jessaye de placer des images en plus elle se retrouvent pas côte à côte à la suite de gauche à droite mais l'une par dessus l'autre verticalement.

et comme la syntaxe est pas du tout la même jy vois aucun lien.

J'en peu plus pere dodu!
:)

Je crois qu'une fois de plus je vai laisser tomber
jen ai marre de ces trucs de tordus.

PetoleTeam · Answer

Bonjour,[i]
...mais je vois pas du tout le rapport entre des textes pour toi et des images pour moi/i...
les exemples mis sont la pour te montrer la façon de procéder, et ce quelques soit le type d'élément que tu manipules. Le principe reste le même.

Je comprend ce qu'il faut faire en théorie 
la pratique est justement décrite dans l'exemple #2

Les bases restent celles ci...

1/ faire passer en paramètre l'élément qui subit l'événement mouseover et mouseout
2/ supprimer toutes références à document.image pour faire référence à l'élément image contenu dans la balise A, donc l'élément passé en paramètre.
3/ ne plus utiliser de variables globales mais affecter à chaque élément ses propres propriétés afin d'éviter les collisions avec d'autres éléments.
Quand jessaye de placer des images en plus elle se retrouvent pas côte à côte à la suite de gauche à droite mais l'une par dessus l'autre verticalement. 
ici ce n'est qu'un problème de conception de ton document.


;O)

Galerie simple avec image grossissante au survol et replacement auto

8 réponses

Votre réponse

Discussions similaires