Centrage de l'image et compatibilité avec le système de redimensionnement

[demeter1]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Opera
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://altitudetropicale.forums-actifs.com/index.forum

Description du problème

Bonjour à tous,
j'ai ce js qui permet à mes membres de déposer le lien d'une image sans avoir à l'encadrer avec les balises img.

Auriez vous une idée :
1/Pour le rendre compatible avec le système de redimensionnement (affichage du "agrandir" et "réduire")

2/Pour centrer l'image. j'ai tenté de rajouter un vertical-align: middle, des margin en auto et du texte-align en center mais sans résultat

Code:


/*Mettre les balises img automatiquement*/
$(function() {
  var links = $('.post a'), local = document.URL.replace(location.hash, '').replace(location.pathname, ''), reg = /\.(png|jpg|jpeg|gif)$/i;
  for(var i = 0, l; (l = links[i++]); ) {
    if(l.innerHTML !== l.href) continue;
    if(reg.test(l.href)) l.innerHTML = '<img style="width:600px;height:auto;" alt="' + l.href + '" src="' + l.href + '">';
    if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/'));
  }
});

Merci par avance pour votre aide

[demeter1]

up

[FANCH 56]

Bonjour

J'ai çà pour le CSS, mais comme tu es en phpbb2, j'ai un doute

Code:


/*  CENTRAGE DES PHOTOS EN AGRANDISSEMENT AUTO  */

.resizebox {
display: block;
margin: auto;
margin-bottom: -19px;}
.resize_img {
display: block;
margin: auto;}

[demeter1]

Bonjour Fanch,
J'ai un css similaire qui fonctionne avec les images prises en compte par le système de redimensionement.
Pour ce js par contre c'est une autre histoire.

[FANCH 56]

Juste une question :

Pourquoi un JS pour les balises Img, alors qu'elles se mettent automatiquement en cliquant sur "Insérer une image" ?

[demeter1]

Re Fanch,
En fait , j'ai bidouillé un muti-upload en me servant du codage de la fenêtre de servimg (celle qui est dans le pa). Ce multi-upload permet d'héberger une trentaine d'images à la fois.

Cette fenêtre ne donne que l'adresse de l'image et oblige les membres à l'insérer entre les balises img.

Le js simplifie la manip .

[demeter1]

up

[demeter1]

up

[[Nihil]]

Pour l'alignement vertical, ça fonctionne bien pour moi avec un vertical-align: middle

En remplaçant cette partie là :

Code:

if(reg.test(l.href)) l.innerHTML = '<img style="width:600px;height:auto;" alt="' + l.href + '" src="' + l.href + '">';

Par ceci :

Code:

if(reg.test(l.href)) l.innerHTML = '<img style="width:600px;height:auto;vertcial-align:middle;" alt="' + l.href + '" src="' + l.href + '">';

Si tu as peur de t'embrouiller avec le style, tu peux aussi mettre une classe CSS, ça sera plus simple je pense

Petit conseil, ça serait peut-être bien de remplacer width:600px; par max-width:600px; pour les personnes qui mettent des petites images (sinon l'image est agrandie et va donc pixeliser).

[demeter1]

Bonjour Nihi,
Merci pour ton aide.

Suite à ta réponse, j'ai trouvé d'où provient le soucis.

La fenêtre des topics est entouré par un encadrement. La div qui gère cet encadrement positionne les textes à gauche par défaut.

Code:

.altitude_encadrement {
background-color: black;
border: 2px solid #4E4E4E;
border-radius: 5px;
color: #FFFFFF;
font: 14px "Arial", sans-serif;
margin-bottom: 59px;
min-height: 70px;
padding: 5px;
text-align: left;
}

Pour les images par contre, je ne sais trop s'il est possible de contrecarrer ce text-align: left; ?

Si je supprime la div , le positionnement signalé fonctionne dansle script.

J'ai tenté de rajouter un !important dans le js mais sans effet

Voici le js modifié

Code:

/*Mettre les balises img automatiquement*/
$(function() {
  var links = $('.post a'), local = document.URL.replace(location.hash, '').replace(location.pathname, ''), reg = /\.(png|jpg|jpeg|gif)$/i;
  for(var i = 0, l; (l = links[i++]); ) {
    if(l.innerHTML !== l.href) continue;
    if(reg.test(l.href)) l.innerHTML = '<img style="max-width:600px;height:auto;vertical-align:middle ;" alt="' + l.href + '" src="' + l.href + '">';
    if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/'));
  }
});

[[Nihil]]

Je n'ai pas compris, tu cherches à centrer l'image verticalement ou bien horizontalement ?

Image centrée horizontalement :

Image centrée verticalement (j'ai pris une capture d'écran) :

[demeter1]

Re Nihi,
Horizontalement pour le centrage de l'image.

[[Nihil]]

Aaaah, je n'avais pas compris

Si je reprends la même ligne que tout à l'heure, comme ça cela devrait être bon :

Code:

if(reg.test(l.href)) l.innerHTML = '<img style="max-width:600px;height:auto;display:block;margin:auto;" alt="' + l.href + '" src="' + l.href + '">';

[demeter1]

Nihi, que dire si ce n'est que c'est parfait :youopi: :youopi: Un grand merci pour cette aide :thanks: