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

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 le 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
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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 le Mer 11 Mar 2015 - 12:07

up

demeter1
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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 le 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
+ Hyperactif +

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

http://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 le 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
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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 le 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
+ Hyperactif +

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

http://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 le 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
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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 le Jeu 12 Mar 2015 - 18:55

up

demeter1
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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 le Sam 14 Mar 2015 - 14:08

up

demeter1
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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] le 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]
# Tropactif #

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

http://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 le 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
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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] le Sam 14 Mar 2015 - 19:01

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) :

[Nihil]
# Tropactif #

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

http://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 le Sam 14 Mar 2015 - 20:22

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


demeter1
+ Hyperactif +

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

http://altitudetropicale.forums-actifs.com/index.forum
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] le 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]
# Tropactif #

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

http://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 le 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
+ Hyperactif +

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

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

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


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