Connexion

Récupérer mon mot de passe

Derniers sujets
» [Edge] Astuces sur le forum
par msfeettoes Aujourd'hui à 9:34

» [PhpBB2] Interdire citation dernier message
par Milouze14 Hier à 14:27

» Règlement de l'entraide Forumactif
par -Tony- Sam 14 Déc 2019 - 23:53

» *RESOLU*[Invision] Alerte message reçu dans messagerie
par Milouze14 Sam 14 Déc 2019 - 7:18

» *RESOLU*[PhpBB2] Date d'entrée au forum
par Milouze14 Sam 14 Déc 2019 - 4:49

» *RESOLU*[Invision] Membres - 'cartes de visite'
par Milouze14 Sam 14 Déc 2019 - 4:46

» [PhpBB2] Problème d'affichage FA messenger
par Milouze14 Ven 13 Déc 2019 - 3:54

» *RESOLU*[PhpBB2] Largeur cadre messagerie privé
par Milouze14 Jeu 12 Déc 2019 - 5:54

» *RESOLU*[PhpBB2] Supprimer zone commentaires des infos profil
par Milouze14 Mer 11 Déc 2019 - 17:06

» *RESOLU*[PhpBB3] Aide sur syntaxe JS
par Milouze14 Mar 10 Déc 2019 - 17:35

» *RESOLU*[ModernBB] Décoration !
par Milouze14 Mar 10 Déc 2019 - 16:55

» *RESOLU*[Invision] Vote négatif réservé aux modérateurs et administrateurs
par Milouze14 Mar 10 Déc 2019 - 16:12

» *RESOLU*[ModernBB] Cherche script participation et autres
par Milouze14 Lun 9 Déc 2019 - 17:59

» [Toutes versions]Ajouter un contenu visible que par les membres ayant répondu.
par oneandone Lun 9 Déc 2019 - 17:37

» *RESOLU*[PhpBB2] Supprimer champ de contact dans les infos de profil,
par Milouze14 Dim 8 Déc 2019 - 20:29

» *RESOLU*[Invision] Déplacement du bouton résolu (suite et fin?)
par Milouze14 Dim 8 Déc 2019 - 9:01

» *RESOLU*[PhpBB3] Outil modération
par Milouze14 Jeu 5 Déc 2019 - 19:30

» *CORBEILLE*[Edge] Pub intrusive
par Milouze14 Mer 4 Déc 2019 - 3:55

» *RESOLU*[PhpBB3] Compte à rebours hebdomadaire permanent
par Milouze14 Mar 3 Déc 2019 - 19:02

» *RESOLU*[PhpBB2] Selecteur de style | placement
par Milouze14 Mar 3 Déc 2019 - 16:32

*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody

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

fascicularia
fascicularia
Milouzien

Messagefascicularia le Lun 29 Juil 2019 - 19:44

  • Version du forum :
    PhpBB2
  • Templates modifiés :
    oui
  • Navigateur :
    Opera
Bonjour à tous, j'utilise cette astuce qui fonctionne très bien :
https://www.milouze14.com/t32134-toutes-versions-activer-la-previsualisation-directe

Ce script a été modifié par Arnaud pour répondre à une autre demande :
https://www.milouze14.com/t32219-resoluphpbb2-previsualisation-en-direct#613073


Afin d'avoir un rendu fidèle de ce qui est posté au niveau des images, je souhaite reproduire l' encadrement au niveau des photos.

Voici une simulation en apposant via les outils du navigateur la div intitulée video.

*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Opera_10

J'ai repris le script permettant d'y parvenir en modifiant les paramètres mais hélas en vain.

Code:
$(function(){
$('.preview .postbody').find('img[src*="servimg.com"] ').wrap('<div id="video"></div>');
});

Avec pour css
Code:
.preview .postbody img[src*="servimg.com"] {
    width:560px;
    background-color: #fff;
    padding: 7px!important;
    box-shadow: 2px 2px 15px 0 #000;
    display: block;
    margin: auto;
}

div#video:before {
    content: "";
    background-color: #fafafa;
    height: 30px;
    border: 8px solid #fff;
    display: block;
    Width: 550px;
    box-shadow: 2px 2px 15px 0 #000;
    margin: auto;
    padding-left: 4px;
    padding-right: 4px;
}

le premier css appose bien l'encadrement .
La div par contre n'est pas apposée sur les image de servimg; le div#video:before n'est donc naturellement fonctionnel.

J'ai tenté d'insérer le script sur sujets, toutes les pages et en l'insérant dans le posting preview mais sans succès.

Voyez vous ce qui coche au niveau de mon bidouillage ?

Merci par avance pour votre aide.


Dernière édition par fascicularia le Mer 31 Juil 2019 - 19:14, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 29 Juil 2019 - 19:49

Coucou Stéphane,
je suis sur ton fofo et je ne reproduis pas ce genre de soucis en prévisualisation,
l'image est bien centrée!!
fascicularia
fascicularia
Milouzien

Messagefascicularia le Lun 29 Juil 2019 - 19:56

Bonjour Philippe  coucou ,
le soucis n'est effectif que lorsque l'on prévisualise.

Le script initial qui appose l'encadrement fonctionne bien par contre lorsque le message est envoyé.

Je souhaite juste que le rendu soit identique entre la prévisualisation et le résultat lors de l'envoi.

Voici une image
Code:
[url=https://servimg.com/view/11938524/11778][img]https://i.servimg.com/u/f74/11/93/85/24/hpim1612.jpg[/img][/url]

Le script donné dans le premier message est actuellement sur toutes les pages (à la fin)
https://altitudetropicale.forums-actifs.com/51891.js

Le centrage est effectif. Le premier css agit.

C'est la partie before qui ne fonctionne pas. Le js devrait apposer une div intitulée vidéo qui permet d'apposer le haut de l'encadremenT cad :

*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Sans_t60


Dernière édition par fascicularia le Lun 29 Juil 2019 - 20:02, édité 1 fois
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Lun 29 Juil 2019 - 20:01

le soucis n'est effectif que lorsque l'on prévisualise.

Justement, je n'ai que prévisualisé et l'image se positionne bien au centre.

Ce script:
Code:
$(function(){
$('.preview .postbody').find('img[src*="servimg.com"] ').wrap('<div id="video"></div>');
});

Est fonctionnel seulement si le message est publié, il faut donc rechercher la cause ailleurs.
fascicularia
fascicularia
Milouzien

Messagefascicularia le Lun 29 Juil 2019 - 20:09

re Philippe,

j'ai réédité mon dernier message.

Lors de la prévisualisation, c'est ce css qui ne fonctionne pas vu que le js n'appose pas la div video à l'image contenue dans le .preview .postbody.

Code:
div#video:before {
    content: "";
    background-color: #fafafa;
    height: 30px;
    border: 8px solid #fff;
    display: block;
    Width: 550px;
    box-shadow: 2px 2px 15px 0 #000;
    margin: auto;
    padding-left: 4px;
    padding-right: 4px;
}

Ce ccs permet de rajouter cette partie d'encadrement
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Sans_t60


En l'état, on obtient ceci
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Sans_t61

Le js fourni est le js modifié pour la prévisualisation.

Si tu analyses la prévisualisation, tu verras que la div video n'est pas apposée à l'image dans la prévisualisation.


edit :
je viens de tenter une autre approche avec le js qui aurait eu le mérite de fonctionner sur toutes les images (hormis les smileys)
Code:
 $(function(){
  $('.preview .postbody').find('img').each(function(){

if(img>=150)
{
$(this).addClass('video'); 

});
});

Hélas, pas plus de succès.
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mar 30 Juil 2019 - 4:26

Hello Stéphane,
effectivement,c'est assez étrange,juste une précision,je comprend bien que le before ajoute une la partie d'encadrement, mais comment sont interprétés les 2 points de couleur verte?

Cette css ne serait pas efficace?:
Code:
.postbody img[src*="servimg.com"]:before {
        content: "";
        background-color: #fafafa;
        height: 30px;
        border: 8px solid #fff;
        display: block;
        Width: 550px;
        box-shadow: 2px 2px 15px 0 #000;
        margin: auto;
        padding-left: 4px;padding-right: 4px;}
fascicularia
fascicularia
Milouzien

Messagefascicularia le Mar 30 Juil 2019 - 20:00

Bonjour Philippe ,


les deux points proviennent d'une partie du css dans le before que j'ai supprimé dans le css communiqué. C'était juste histoire de ne pas surcharger les infos .

Code:
background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;
    background-position: left top,right top !important;
    background-repeat: no-repeat !important;

Je teste ta solution de suite.

Edit : aucun effet sur le posting preview bien que le before s'affiche bien au niveau des outils du navigateur. Bizarrement le  css agit mais le contenu ne s'affiche pas  marreordi

J'ai retenté l'insertion des js en début et en fin du posting_preview mais sans effet. Les js semblent pourtant corrects.

Code:
   <script language=JavaScript>
$(function(){
$('.preview .postbody').find('img[src*="servimg.com"] ').wrap('<div id="video"></div>');
});
</script>
et par la suite
Code:
 <script language="JavaScript">
 $(function(){
  $('.preview .postbody').find('img').each(function(){

if(img>=150)
{
$(this).addClass('video');  
}  
});
});</script>

au pire, je peux toujours modifier le premier css en

Code:
.preview .postbody img[src*="servimg.com"] {
    width: 560px;
    background-color: #fff;
    padding: 37px 7px 7px 7px!important;
    box-shadow: 2px 2px 5px 0 #000;
    display: block;
    margin: auto;
    background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;
    background-position: left top,right top !important;
    background-repeat: no-repeat !important;
}

En modifiant le padding, ça s'en rapproche sans le box shadow contenu dans le before.
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 31 Juil 2019 - 4:22

Hello Stéphane,


J'ai retenté l'insertion des js en début et en fin du posting_preview mais sans effet. Les js semblent pourtant corrects.

Ne te fatigues pas avec les script car comme mentionné plus ça ne sert à rien.

le before n'a pas le temps de charger à mon avis, voilà pourquoi clin oeil .

Tu peux garder le style et imposer une marge en déposant un padding :

Code:
.preview .postbody {padding:30px 0px;}


Un autre truc me chagrine dans ton style ici:
Code:
   
background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;

Tu charges 4 images et tu ne t'en sers que de deux:
Code:
background-position: left top,right top !important;


Ceci suffit mon ami:
Code:

background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;
fascicularia
fascicularia
Milouzien

Messagefascicularia le Mer 31 Juil 2019 - 19:09

Bonjour Philippe,

Le dernier css ne fonctionne pas lui non plus ; c'est à n'y rien comprendre.

On va lâcher l'affaire ; je vais tout bonnement installer ce css

Code:
.preview .postbody img[src*="servimg.com"] {
    width: 560px;
    background-color: #fff;
    padding: 37px 7px 7px 7px!important;
    box-shadow: 2px 2px 5px 0 #000;
    display: block;
    margin: auto;
background-image: url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif),
url(https://i.servimg.com/u/f56/17/47/58/13/point_10.gif) !important;
    background-position: left top,right top !important;
    background-repeat: no-repeat !important;
}


Il n'y aura pas le box shadow sur la partie haute mais tant pis.

Merci pour ton aide et, pour le temps que tu as sacrifié pour cette demande tape la
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 31 Juil 2019 - 19:19

Re coucou Stéphane,
désolé de ne pas avoir trouvé d'autre solution, mais c'est une prévisualisation et forcément
on ne peut pas faire ce que l'on souhaite....
Milouze14
Milouze14
Fondateur

MessageMilouze14 le Mer 31 Juil 2019 - 19:19


Hello


Sujet résolu et déplacé dans le forum adéquate

A bientôt pour une prochaine demande clin oeil

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

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

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