[PHPBB2] Créer un effet de zoom sur une image au passage

Coucou Lydie,
je ne saisie pas ta demande, sur un message ?

Si c'est pour l'hébergeur Servimg avant d'insérer l'image, c'est purement impossible chère amie.

Hi Lydie

Sans ajouter de code CSS je ne vois pas comment agir sur une image en particulier.

Tu peux tenter avec ce code à la CSS :

Code:

.zoom{
 transition-duration:1s;
}
 
.zoom:hover{
 transform:scale(1.3);
 -ms-transform:scale(1.3);
 -webkit-transform:scale(1.3);
 transition-duration:1s;
}

Ensuite dans tes messages tu renseigne ce code pour l'image :

Code:

<img src="URL-de-l'image.png" alt="image" class="zoom">

Au passage de la souris sur l'image tu auras un effet zoom

Milouze14 a écrit:Coucou Lydie,
je ne saisie pas ta demande, sur un message ?

Si c'est pour l'hébergeur Servimg avant d'insérer l'image, c'est purement impossible chère amie.

bonsoir mon Phil, quand tu passes la souris tu vois l'image plus grande   je voulais juste un "truc" à rajouter aux balises [img]  mais je vais essayer le CSS de Splash

Splash a écrit:Hi Lydie

Sans ajouter de code CSS je ne vois pas comment agir sur une image en particulier.

Tu peux tenter avec ce code à la CSS :

Code:

.zoom{
 transition-duration:1s;
}
 
.zoom:hover{
 transform:scale(1.3);
 -ms-transform:scale(1.3);
 -webkit-transform:scale(1.3);
 transition-duration:1s;
}

Ensuite dans tes messages tu renseigne ce code pour l'image :

Code:

<img src="URL-de-l'image.png" alt="image" class="zoom">

Au passage de la souris sur l'image tu auras un effet zoom

bonsoir Splash, je vais essayer votre méthode

Splash ça fonction bien , merci mais, les membres je les vois mal mettre cet encodage

Code:

 <img src="URL-de-l'image.png" alt="image" class="zoom">

à défaut d'autre, je vais garder votre travail et merci à vous

Hello Fred,

il vaut attendre sa réponse car pour l'instant, on ne sait pas grand chose sur sa demande.

De plus il y a des erreurs dans le style donné:
Tu indiques une durée (doublon) sur le hover (ce qui n'a aucun effet car tout doit se trouver sur l'image en elle même).

Ensuite, tu indiques la durée sur les navigateurs récents, puis sur le hover
les autres sauf Opera!!


Le style correcte est le suivant:

Code:

.zoom
{
  -moz-transition-duration:1s;
-webkit-transition-duration: 1s;
-o-transition-duration: 1s;
-ms-transition-duration: 1s ;
 transition-duration:1s;
}
 
.zoom:hover
{
  -moz-transform:scale(1.3);
  -webkit-transform:scale(1.3);
  -o-transform:scale(1.3);
 -ms-transform:scale(1.3);
  transform:scale(1.3);
}

Pour le code html de l'image, restons dans le html5:

Code:

<img src="URL-de-l'image.png" alt="image" class="zoom"/>

Lydie, il suffit d'ajouter un bouton à l'éditeur, regarde ce tuto : https://www.milouze14.com/t32326-resoluphpbb2-bouton-dans-l-editeur-de-texte?highlight=ajouter+un+menu+à+l+éditeur

Hi Phil,
Ce code CSS serait même suffisant pour un zoom au survol :

Code:

.zoom {transition-duration : 1s;}
.zoom:hover {transform : scale(1.3);}

@petitefeuille,

tu peux utiliser ce script en complément de la c.s.s, cela t'évitera d’ajouter une class, le script s'en occupera (sauf pour les smileys créés dans le P.A).


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Déposer ceci:

Code:


$(function(){
  $('.postbody').find('div:not(.signature_div)').find('img:not([longdesc])').addClass('zoom');
});


Penser a cliquer sur le bouton

Splash a écrit:
Hi Phil,
Ce code CSS serait même suffisant pour un zoom au survol :

Code:

.zoom {transition-duration : 1s;}
.zoom:hover {transform : scale(1.3);}

Oui, mais pour tous les navigateurs récents

Splash a écrit:Lydie, il suffit d'ajouter un bouton à l'éditeur, regarde ce tuto : https://www.milouze14.com/t32326-resoluphpbb2-bouton-dans-l-editeur-de-texte?highlight=ajouter+un+menu+à+l+éditeur

re :) bé c'est pas trop ça ... ça serait un bouton qui insère le code pour mettre l'image ... après je demandais si c'était possible hein ?

Milouze14 a écrit:@petitefeuille,

tu peux utiliser ce script en complément de la c.s.s, cela t'évitera d’ajouter une class, le script s'en occupera (sauf pour les smileys créés dans le P.A).


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Mettre un titre explicite.

Déposer ceci:

Code:


$(function(){
  $('.postbody').find('div:not(.signature_div)').find('img:not([longdesc])').addClass('zoom');
});


Penser a cliquer sur le bouton

Oh c'est parfait mon phil !!  je t'adoreeeeeeeee 


vous êtes tout deux gentils et je vous remercie de m'avoir comprise déjà   et de m'aider !

je vous souhaite une excellente soirée  dans le confinement ... 

De rien Lydie,