Connexion

Récupérer mon mot de passe

Derniers sujets
» [AwesomeBB] Profils en onglets
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Aujourd'hui à 19:01 par Milouze14

» [PhpBB2] Changer le lien d'une image par une icone font awesone
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Aujourd'hui à 16:14 par fascicularia

» Test d'intelligence des politiciens-(e) histoire blagounette
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Aujourd'hui à 9:22 par Quad Daniel

» histoire du Jour sans fin
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Aujourd'hui à 9:11 par Quad Daniel

» Règlement de l'entraide Forumactif
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Hier à 11:42 par BADLANDS

» [AwesomeBB] Problème avec le tuto "AutoSuggestion" - Incompatible version AwesomeBB
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Mer 21 Aoû 2019 - 12:14 par MathisB

» *RESOLU*[AwesomeBB] Barre de progression sur la page - AwesomeBB
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Mar 20 Aoû 2019 - 21:17 par Milouze14

» *RESOLU*[PhpBB2] Insérer la valeur d'un champ personnalisé dans une page HTML
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Mar 20 Aoû 2019 - 19:11 par Milouze14

» *CORBEILLE*[PhpBB2] Récupérer la valeur d'un input
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Lun 19 Aoû 2019 - 18:42 par Milouze14

» *RESOLU*[PhpBB3] Prévisualisation directe
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Ven 16 Aoû 2019 - 11:06 par Milouze14

» *RESOLU*[PhpBB2] l'image s'éclairci dans le codage
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Lun 12 Aoû 2019 - 6:30 par Milouze14

» *RESOLU*[PhpBB2] Vérifier valeur dans InArray (Jquery)
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Sam 10 Aoû 2019 - 6:24 par Milouze14

» *RESOLU*[PhpBB2] Récupérer valeur checkbox
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Jeu 8 Aoû 2019 - 4:17 par Milouze14

» [Toutes versions] Utiliser les variables utilisateur/forum
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Mer 31 Juil 2019 - 19:36 par photoclic

» *RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Mer 31 Juil 2019 - 19:19 par Milouze14

» *RESOLU*[PhpBB3] Nombre de messages et membres su qeel
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Mer 31 Juil 2019 - 17:01 par no_way

» *RESOLU*[PhpBB2] Prévisualisation en direct
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Lun 29 Juil 2019 - 17:42 par Milouze14

» *RESOLU*[PhpBB2] La version web ne s'affiche pas sur "mon" IPAD.
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Ven 26 Juil 2019 - 19:51 par Milouze14

» [AwesomeBB] Problème avec le tuto "AutoSuggestion" - Incompatible version AwesomeBB
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Dim 21 Juil 2019 - 6:07 par Milouze14

» [Toutes versions]Remplacer les icônes de l'éditeur par des icônes FontAwesome
*RESOLU*[PhpBB2] Encadrement des photos dans le .preview .postbody Clock-10Sam 20 Juil 2019 - 11:23 par Morane

*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