Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Encadrement des image via js

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

Encadrement des image via js Empty Encadrement des image via js

Message par demeter1 le Sam 21 Sep 2019 - 17:50

Bonjour à tous,
j'ai ce js qui me permet l'affichage des images lorsque le membre ne poste que le lien sans utiliser les  balises img:
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:800px;height:auto;" alt="' + l.href + '" src="' + l.href + '">';
    if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/'));
  }
});

Avec le système conventionnel, j'ai un autre js qui applique un encadrement aux images via css en leur apposant une id automatiquement en plus du système de redimensionnement qui est activé sur le forum .

Code:
<img src="https://i.servimg.com/u/f44/19/96/26/45/2d5d1210.jpg" border="0" alt="Mes débuts dans l’Allier  - Page 2 2d5d1210" class="resize_img encadrement" id="M14_img_0" width="600">

Serait-il possible que le js donné plus haut répercute la class et l'id de façon à ce que le système de redimensionnement fonctionne et que le css affilié à M14_img soit appliqué ?.

Merci par avance pour votre aide.
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par Milouze14 le Dim 22 Sep 2019 - 11:58

Coucou Stéphane,

il suffit d'ajouter une class (M14_not_tag) ici:
Code:
<img style="max-width:800px;height:auto;" alt="' + l.href + '" src="' + l.href + '">


Code:
<img class="M14_not_tag"style="max-width:800px;height:auto;" alt="' + l.href + '" src="' + l.href + '">

Et hop le tour est joué:

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 class="M14_not_tag"style="max-width:800px;height:auto;" alt="' + l.href + '" src="' + l.href + '">';
    if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/'));
  }
  $('.postbody').each(function(){$(this).find('.M14_not_tag').attr('id', function(img) {
    return 'M14_img_' +img;
  })
    });
});


a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 5759
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Dim 22 Sep 2019 - 14:33

Bonjour Philippe,
merci pour cette aide  ok .
l'encadrement est bien appliqué mais le système de redimensionnement n'est pas appliqué.

Voici une capture d'écran d'une même photo, la première apposée normalement en appuyant sur insérer via Servimg
Encadrement des image via js Captur13

avec pour lien d'insertion
Code:
[url=https://servimg.com/view/11938524/11824][img]https://i.servimg.com/u/f74/11/93/85/24/hpim1991.jpg[/img][/url]

son analyse via les outils du navigateur
Code:
<a href="https://i.servimg.com/u/f74/11/93/85/24/hpim1991.jpg"><br><span class="resizebox gensmall clearfix" style="width:600px"><span class="resize_border clearfix"><span class="resize_content clearfix"><a href="#" class="enlarge">Agrandir cette image</a><a href="#" class="resize">Réduire cette image</a><span class="resize_filler"> </span><a href="#" class="fullsize">Cliquez ici pour la voir à sa taille originale.</a></span></span></span><br><img src="https://i.servimg.com/u/f74/11/93/85/24/hpim1991.jpg" border="0" alt="la vue dy che Hpim1991" class="resize_img encadrement" id="M14_img_0" width="600"></a>

et cette même photo dont seul le lien à été apposé dans l'éditeur
Encadrement des image via js Captur14

avec pour lien d'insertion
Code:
https://i.servimg.com/u/f74/11/93/85/24/hpim1991.jpg

son analyse via les outils du navigateur
Code:
<a href="https://i.servimg.com/u/f74/11/93/85/24/hpim1991.jpg" target="_blank" rel="nofollow"><img class="M14_not_tag encadrement" style="max-width:800px;height:auto;" alt="https://i.servimg.com/u/f74/11/93/85/24/hpim1991.jpg" src="https://i.servimg.com/u/f74/11/93/85/24/hpim1991.jpg" id="M14_img_0"></a>

Le but de l'opération serait que les deux photos aient le même visuel et, si possible le même fonctionnement (j'ai des doutes sur ce dernier point). Techniquement avoir un visuel identique serait déjà plus que satisfaisant.

j'ai bien essayé via css en simulant la partie du système de redimensionnement par une simple image mais je n'arrive pas à faire apparaître le before
pour le centrage de l'image
Code:
img#M14_img_0.M14_not_tag.encadrement {
    display: block!important;
    margin: auto;
}

pour le simulacre du système de redimensionnement via cette image
Encadrement des image via js Captur15
Code:
img#M14_img_0.M14_not_tag.encadrement:before {
    content: "";
    width: 619px;
    background-color: #fff;
    padding: 55px 7px 7px 7px;
    box-shadow: 2px 2px 5px 0 #000;
    display: block;
    margin: auto;
    background-image: url(https://i.servimg.com/u/f74/11/93/85/24/captur15.png);
    background-position: top;
    background-repeat: no-repeat;
    margin-top: 10px;
}

Autre solution qui me semble plus pratique
Rajouter dan le js cette séquence juste avant l'ouverture de la balise a
Code:
<span class="resizebox gensmall clearfix" style="width:600px"><span class="resize_border clearfix"><span class="resize_content clearfix"><a href="#" class="">Le système de redimensionnement n'est pas disponible pour les images apposées sans les balises img.</a></span></span></span><br>

ce qui donnerait en résultat final (du moins en visuel  avec les outils du navigateur)
Encadrement des image via js Captur16

avec ce rajout via js un target blank serait il envisageable pour permettre un affichage en taille réelle sur un autre onglet du navigateur ?


Dernière édition par demeter1 le Lun 23 Sep 2019 - 0:18, édité 1 fois
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par Milouze14 le Dim 22 Sep 2019 - 19:36

Re Stéphane,




Pour ta demande cela me parait bien bien compliqué.
Il est assez judicieux d'avoir ajouter le pseudo-élément before
afin de renseigner sur l'image qu'elle ne peut être redimensionnée .

Pour le reste, je doute fortement de pouvoir faire mieux.

Désolé.

a++
Milouze14

Milouze14
Membre actif

Masculin
Messages : 5759
Inscrit(e) le : 18/04/2005

https://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.
  • 0

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Dim 22 Sep 2019 - 20:04

re Philippe,
merci en tout cas pour cette aide. Je vais laisser ouvert le sujet pour voir si quelqu'un à une idée.



edit 00:25:36 :
en tournant le soucis dans tous les sens , j'ai trouvé une alternative viable.

Code:
img[id^="M14_img_"].M14_not_tag.encadrement {
    width: 600px;
    background-color: #fff;
    padding: 55px 7px 7px 7px!important;
    box-shadow: 2px 2px 5px 0 #000;
    display: block;
    margin: auto;
    background-image: url(https://i.servimg.com/u/f74/11/93/85/24/captur15.png);
    background-position: top;
    background-repeat: no-repeat;
    margin-top: 10px;
}

le résultat
Encadrement des image via js Captur17

je laisse le sujet ouvert si jamais quelqu'un à une idée pour intégrer la séquence html au js.
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Lun 23 Sep 2019 - 13:40

bon, j'avance.

ce js permet d'intégrer le html à la séquence :

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 = '<span class="resizebox gensmall clearfix" style="width:600px"><span class="resize_border clearfix"><span class="resize_content clearfix"><a href="#" class="xaxim">Le système de redimensionnement n'est pas disponible pour les images apposées sans les balises img.<br><i class="fas fa-arrows-alt" style="color: #5d7f27;padding-right: 13px;padding-left: 23px;font-family: FontAwesome!important;"></i>Cliquez sur l'image pour la voir en taille réelle sur une autre page.</a></span></span></span><br><img class="M14_not_tag"style="max-width:600px;height:auto;" alt="' + l.href + '" src="' + l.href + '">';
    if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/'));
  }
  $('.postbody').each(function(){$(this).find('.M14_not_tag').attr('id', function(img) {
    return 'M14_img_' +img;
  })
    });
});
avec pour css
Code:
img[id^=M14_img_].M14_not_tag.encadrement{width:600px;background-color:#fff;box-shadow:2px 2px 5px 0 #000;display:block;margin:auto}

le résultat
Encadrement des image via js Captur19


Je suis en train de tester pour voir si j'arrive à intégrer le système de redimensionnement

ce js est valide mais le résultat est peu concluant (l'image s'agrandit mais le resizebox part se réfugier sous l'image.

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 = '<span class="resizebox gensmall clearfix" style="width:600px"><span class="resize_border clearfix"><span class="resize_content clearfix"><a href="#" class="enlarge">Agrandir cette image</a><a href="#" class="resize">Réduire cette image</a><span class="resize_filler"> </span><a href="#" class="fullsize">Cliquez ici pour la voir à sa taille originale.</a><img class="M14_not_tag"style="max-width:600px;height:auto;" alt="' + l.href + '" src="' + l.href + '"></span></span></span>';
    if(l.href.indexOf(local) === 0) l.innerHTML = l.href.substring(l.href.lastIndexOf('/'));
  }
  $('.postbody').each(function(){$(this).find('.M14_not_tag').attr('id', function(img) {
    return 'M14_img_' +img;
  })
    });
});


Dernière édition par demeter1 le Mer 25 Sep 2019 - 20:49, édité 1 fois
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Mer 25 Sep 2019 - 17:11

up si jamais quelqu'un a une idée pour intégrer le système de redimensionnement. Angel
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Jeu 26 Sep 2019 - 18:47

up
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Ven 27 Sep 2019 - 20:10

up
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Sam 28 Sep 2019 - 20:10

up
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Jeu 3 Oct 2019 - 19:08

up
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Sam 5 Oct 2019 - 23:13

up
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Lun 7 Oct 2019 - 19:55

up
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Mer 9 Oct 2019 - 19:33

up
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Ven 11 Oct 2019 - 15:11

up
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 le Lun 14 Oct 2019 - 10:14

up
demeter1

demeter1
Membre actif

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

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

Encadrement des image via js Empty Re: Encadrement des image via js

Message par demeter1 Hier à 13:52

up
demeter1

demeter1
Membre actif

Masculin
Messages : 8834
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


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