velomagus

Image cachée mais dévoilable par un clic

Messages recommandés

velomagus    4

Bonjour à tous,

 

Alors je récapitule, mon site www.velomagus.fr est dédié à raconter l'accident grave que j'ai eu en vélo. Dans la poursuite de mon récit je souhaiterai publier des photos de moi, particulièrement juste après l'accident. Seulement il y en a qui sont un peu gore alors je ne veux pas choquer les âmes sensibles. Je souhaiterai savoir comment faire pour que l'on voie un message d'avertissement qui cacherai l'image et qui, en cliquant dessus, laisserai apparaître l'image en question?

 

Je précise que j'ai des bases de code (DUT Info qui date un peu mais plus axé Java et un peu de PHP/HTML/CSS). J'ai vu des solutions ça et là (sur le site W3C par exemple https://www.w3schools.com/howto/howto_css_overlay.asp) mais je vous avoue que je ne sais pas comment l’intégrer à Zwii.

 

A bientôt

 

Nicolas

Partager ce message


Lien à poster
Partager sur d’autres sites
Rémi    151

J'ai plusieurs solutions simples :

 

Dans le cas ou tu veux afficher l'image dans une page : tu prends 2 images, une avec un avertissement écrit dessus, et l'autre plutôt gore, tu affiche sur ta page celle avec l’avertissent et tu fais en sorte que lorsque la personne clic sur l'image avec l'avertissement elle arrive sur ton autre image hébergé sur ton site (il suffit juste dans TinyMCE de mettre un lien sur ton image vers l'autre image).

 

Dans le cas ou tu veux créer une galerie photo, autant en faire une spéciale images choquantes, et créer une autre page avant d'arriver sur celle-ci qui précise que la galerie contient des images hards.

 

J'espère que j'ai été clair dans mes explications :D .

  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    371

@velomagus Sinon, j'étais en train d'essayer ça :

 

blob.png.82c1e7af2296378f6789f2931e0787d6.png

 

C'est la même solution que @Rémi avec des effets au choix : une "image texte" en fond et l'autre qui se superpose au survol. Rien qu'avec du css.  Et tu connais l'adresse...

Essais faits sur la 8.21 qui vient de sortir.

Je t'explique si tu veux. :)

 

Modifié par PeterRabbit
  • Like 1
  • Thanks 1

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    371

Il doit y avoir d'autres solutions, mais c'est la première qui m'est venue à l'esprit.

Imaginons : le désert, c'est ton avertissement qui s'affiche en même temps que la page, l'iceberg, c'est l'image insoutenable. Voici ce que ça donnerait au survol de la souris :

 

slide.jpg.4b1450d10489e38917e1eec950c9eb8d.jpg

 

Pour essayer, colle ce code au bas de "core/layout/common.css" :

.container {
  position: relative;
  width: 100%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /*background-color: #008CBA;*/
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

et ajoute celui-ci dans le code de ta page (menu "Outils" ou "Voir" en fonction de ta version de Zwii) :

<div class="container"><img class="image" src="/site/file/source/gallery/landscape/desert.jpg" alt="" width="1007" height="566" />
<div class="overlay">
<div class="text"><img src="/site/file/source/gallery/landscape/iceberg.jpg" alt="" width="1007" height="566" /></div>
</div>
</div>

Le tout brut de copier-coller ou presque (compare les codes), avec le premier effet venu et pour faire au plus simple et au plus rapide pour te proposer une première piste de réflexion. :|

 

Mais je vais chercher : la solution de l'image-texte ne me plaît qu'à moitié.

 

PS : Autres propositions (je ne les ai pas essayées)

 

 

 

 

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    371

Mais si : c'est le code que j'ai utilisé. Ne change rien.

Je t'envoie un MP. Convaincu ?

Je t'ai fait deux autres propositions ci-dessus.

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    371

Tu n'y es pour rien, ce sont mes explications qui ne passent pas. Parce que chez moi, ça marche et le lien que je lui ai envoyé a dû le lui prouver.

Modifié par PeterRabbit
  • Like 1

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    371

@velomagus J'ai également trouvé ce système, que je trouve très chouette !

Je ne résiste pas au plaisir de le présenter, même s'il ne convient pas très bien, a priori, à ton projet. :)

 

Mais avec quelques retouches — le chameau surtout —, qui sait ? ça pourrait le faire.

Modifié par PeterRabbit

Partager ce message


Lien à poster
Partager sur d’autres sites
PeterRabbit    371
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    371

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
  • 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

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