velomagus

Image cachée mais dévoilable par un clic

Messages recommandés

PeterRabbit    283
il y a une heure, Rémi a dit :

@PeterRabbit ah top ! Alors, tu as bien aimé ? :grin:

 

Ben voui ! Comme j'aime beaucoup tout ce que tu fais en ce moment. On te sent à l'écoute et c'est sympa. :)

 

PS : il a toujours le même problème ton gif animé...

  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
velomagus    4

Bon grâce à la précieuse aide de @PeterRabbit, on a pu trouver une solution à ma question. Donc voici le code (il y a certainement des améliorations à faire mais ça fonctionne et c'est déjà pas mal)

 

Rajouter au fichier CSS:

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 2;
    cursor: pointer;
}

Puis modifier dans le fichier core/vendor/tinymce/init.js pour éviter que TinyMCE supprime les onclick, id et style des div et du button.

extended_valid_elements: "script[language|type|src],div[onclick|id|style],button[onclick]",

Et enfin (après un petit rafraîchissement de cache)

Dans l'article avec TInyMCE en mode "Code source"

<div onclick="off()" id="overlay">
<div><img src="https://images.pexels.com/photos/35807/rose-red-rose-romantic-rose-bloom.jpg?w=940&amp;h=650&amp;auto=compress&amp;cs=tinysrgb" alt="Paris" /></div>
</div>
<div style="padding: 20px;">
<h2>Overlay with Text</h2>
<button onclick="on()">Turn on overlay effect</button></div>
<p>
<script>
function on() {
    document.getElementById("overlay").style.display = "block";
}

function off() {
    document.getElementById("overlay").style.display = "none";
}
</script>

Evidemment si vous avez des améliorations, je suis preneur.

 

Nicolas

  • Thanks 1

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283

Merci @velomagus ! :)

Mais tu devrais plutôt mettre le script au bas de "core/layout/main.php", juste avant la balise </body>.

 

Ce qu'il y a de formidable, avec Zwii, c'est que tout marche.

Je doute qu'il valide au W3C, mais j'avoue que si ce souci m'a préoccupé, c'était avant. :$

Modifié par PeterRabbit (Voir l’historique des modifications)
  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité

I existe aussi aune autre solution que je viens de tester avec succés dans une v 8.2.3...

En suivant le conseil d'un lien sur image mais pour économiser le temps chaque fois que nous devons mettre cette image qui est censée cacher une image plus crue et que l'on ne verra que si l'on cliques dessus ( c'est rébarbatif si l'on à beaucoup d'image à poster et chaque fois devoir copier le lien de l'image qui sera cliquable vers... )

 

Et bien Tinymce a ceci de génial c'est que l'on peut créer son propre bouton qui lorsque cliqué produira l'effet escompter:

 

le code pour afficher chaque fois la mme image qui servira pour être associée par lien vers une autre image ou page du site en question :

 

à mettre uniquement où l'on veut dans le toolbar du tiny

Citation

mybutton

à ajouter ensuite plus bas dans sa config:

  setup: function (editor) {
    editor.addButton('mybutton', {
      text: 'CHOC',
      icon: false,
      onclick: function () {
        editor.insertContent('<img src="http://lechti64.org/Xpr/ULTIMATE-Tinymce-2018-V8.2.3/site/file/source/Personnalisation/attention.gif" width="155" height="113">');
      }
    });
  }

et on obtient ainsi un zoli bouton qui cliqué met toujours la me image à la taille voulue, ensuite à vous de sélectionner cette image et de lui adjoindre le lien de redirection vers votre image choc...

choc.thumb.png.edd268719965f45736793ee133a5402b.png

 

choc2.thumb.png.7e2e464f3ec0c002a5f4298364a091ac.png

 

choc1.thumb.png.169f7d689885eb0529ef409f34ebd1f5.png

 C'est un gif animé ça rend mal sur les captures d'écran, donc pour en voir l'effet et le résultat, juste cliquer ci dessous.........

 

http://lechti64.org/Xpr/ULTIMATE-Tinymce-2018-V8.2.3/enfant

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité
Il y a 11 heures, velomagus a dit :

@Roger nounours Merci pour le tuyau. Du coup j'ai fais un mix des deux vu que je trouve que le script avec l'overlay ça fait plus beau. J'ai créé le bouton choc qui m'ajoute tout le code html et j'ai plus qu'à rajouter l'adresse de l'image direct sur l'éditeur de code.

:) et voilà au moins une chose qui fait le bonheur d'un utilisateur, oui pourquoi faire simple quand on peut faire compliqué...

Et si on peut faire encore plus compliqué en simplifiant la tache de celui qui utilisera une fonction plus souvent qu'à l'accoutumée dans un cms, c'est encore mieux de lui faire gagner du temps ainsi :P

Et si en plus tu y ajoute le fameux script ( overlay ) que t'as conseillé PeterRabbit et bien tu arrives à une résultat vraiment plaisant à voir et graphiquement plus à me de servir une belle vitrine d'images avec effet dessus...

Allier l'utile à l'agréable il n'y a pas mieux :)

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    283
il y a 3 minutes, Roger nounours a dit :

Et si en plus tu y ajoute le fameux script ( overlay ) que t'as conseillé PeterRabbit et bien tu arrives à une résultat vraiment plaisant à voir et graphiquement plus à me de servir une belle vitrine d'images avec effet dessus...

 

L'honnêteté m'oblige à corriger ton propos, @Roger nounours ! Non, non, c'est @velomagus qui a trouvé son script, je l'ai seulement aidé à l'intégrer. Mais c'est vrai qu'on ne prête qu'aux riches ! xD

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité   
Invité
il y a 4 minutes, PeterRabbit a dit :

L'honnêteté m'oblige à corriger ton propos, @Roger nounours ! Non, non, c'est @velomagus qui a trouvé son script,

 

Oups autant pour moi, j'étais moi parti de ceci pour " bosser " sur une partie du code pour velomagus ... et me suis dit que ce que tu avait mis dans ton exemple était la bonne base à suivre, puis tu donnes tellement de bons conseils judicieux que je me suis emmêlé les pinceaux pour une fois :$

 

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant