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

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par demeter1 Lun 9 Mar 2015 - 11:53

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


Dernière édition par demeter1 le Dim 15 Mar 2015 - 0:44, édité 1 fois
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par demeter1 Mer 11 Mar 2015 - 12:07

up
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par FANCH 56 Mer 11 Mar 2015 - 13:10

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;}
FANCH 56

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par demeter1 Mer 11 Mar 2015 - 16:16

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.
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par FANCH 56 Mer 11 Mar 2015 - 17:57

Juste une question :

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

FANCH 56
Membre actif

Masculin
Messages : 13259
Inscrit(e) le : 25/07/2005

https://www.anciens-cols-bleus.net/
FANCH 56 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par demeter1 Mer 11 Mar 2015 - 18:14

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

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par demeter1 Jeu 12 Mar 2015 - 18:55

up
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par demeter1 Sam 14 Mar 2015 - 14:08

up
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par [Nihil] Sam 14 Mar 2015 - 15:52

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

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 Smile

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).
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par demeter1 Sam 14 Mar 2015 - 17:05

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('/'));
  }
});
demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par [Nihil] Sam 14 Mar 2015 - 19:01

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

Image centrée horizontalement :
Centrage de l'image et compatibilité avec le système de redimensionnement Divers_39

Image centrée verticalement (j'ai pris une capture d'écran) :
Centrage de l'image et compatibilité avec le système de redimensionnement PtIVovc
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par demeter1 Sam 14 Mar 2015 - 20:22

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

demeter1

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par [Nihil] Sam 14 Mar 2015 - 20:27

Aaaah, je n'avais pas compris Smile

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 + '">';
[Nihil]

[Nihil]
Membre habitué

Messages : 1215
Inscrit(e) le : 10/12/2009

https://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Centrage de l'image et compatibilité avec le système de redimensionnement

Message par demeter1 Dim 15 Mar 2015 - 0:42

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

demeter1
Membre actif

Masculin
Messages : 8993
Inscrit(e) le : 23/01/2009

https://altitudetropicale.forums-actifs.com/
demeter1 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum