Trucsweb.com

Trucsweb 1997-2017

Le site des Trucsweb a maintenant 20 ans! 20 ans de gratuit mur-à-mur, peu importe que vous soyez à Montréal, Paris ou Ouagadougou, que vous soyez riche, pauvre ou éducateur ; -). « C’est un endroit que chacun peut visiter pour apprendre et partager ses connaissances » pour paraphraser Wikipédia. C’est aussi des milliers de dollars déboursés pour les couts d’un serveur Web. La publicité c’est bien, mais trop peu pour payer les frais d’hébergement toujours plus cher.

Il va sans dire que je m'adresse beaucoup aux institutions d'enseignement et aux corporations, particulièrement les géants de ce monde qui bénéficie de PROMOTION GRATUITE sur les sites des webmestres comme celui des Trucsweb! Les Google et Microsoft de ce monde. Le fournisseur d'hébergement des Trucsweb qui a bénéficié d'une grande visibilité certainement pas étrangère a son succès. Mais aussi l'Organisation internationale de la Francophonie par exemple. Car la majorité des visiteurs des Trucsweb proviennent de l'ensemble des pays de la francophonie. Pays pour la plupart, outre L'Europe (80%), berceau de l'humanité et surtout des plus pauvres de notre brillante civilisation.

jours restants pour la campagne de financement 2017-2037 ;- )
Objectif : 5000 €

Je vous remercie d’envisager de faire un don afin de perpétuer cette longue tradition francophone qui a maintenant 20 ans.

Merci,
Django Blais, L’Isle-Verte (Québec)


CSS

Pure CSS3

RDFFav

Zoom sur image avec fenêtre « modal responsive » en pure CSS3

La visualisation d’image grand format dans une fenêtre modale communément appelée le « Magic zoom » !fenêtre, popup, magic zoom, image, vignette, modal, pur css, css3, sélecteur, animation

La visualisation d’image grand format dans une fenêtre modale communément appelée le « Magic zoom » ou « Image Zoom Magnification » ne date pas d’hier. Autrefois en pure Javascript, il y a une bonne douzaine de Tutoriels dans la collection « Les fenêtres ou l’objet WINDOW - Le premier objet du Javascript » ou encore combiné au Flash « Ouvrir une fenêtre ou Pop-up en Flash Partie 1 ».

Puis jQuery a changé le visage du Web et donc il existe des dizaines de variations, il suffit d’une requête sur Google pour s’en rendre compte. Deux bon exemple : fancyBox 2 ou Magnific Popup par Dmitry Semenov.

Mais il existe aussi excellente solution Javascript sans jQuery :

TinyBox2
JavaScript Modal Windows - TinyBox2 par Michael Leigeber
Le plus léger des exemple Javascript
SimpleModal
SimpleModal par Plasm
Excellent exemple Javascript sans jQuery. Léger en CSS mais lourd en javascript et non-adaptative (non-responsive).

On retrouve souvent une variation intéressante dans les sites de vente en ligne pour voir les détails d’une image avec Magic Zoom.

Pure CSS prêt pour le HTML5 et « responsive »

Mais depuis le CSS 3 et son sélecteur :target, la donne a changée ! Un renversement total de la situation. L’exemple Fenêtre « modal responsive » en pure CSS3 le démontre bien, quelques ligne de CSS au lieu d’une librairie. En 80 lignes de code.

L’idée est la simplicité. Donc la source, le code, les valeurs, le style, l’animation, l’événement, tout en HTML/CSS. 100% fonctionnel sans Javascript dans une page statique.

<style> .twAudessus { /* Le trame de fond */ width: 100%; height: 100%; position: fixed; z-index: 100000; top: 0; left: 0; display: none; background: rgba(0,0,0,0.7); } .twAudessus a { /* Le truc pour centrer l’image */ display: table-cell; vertical-align: middle; text-align: center; } .twAudessus img { /* Le contour de l’image */ max-width:1200px; padding: 10px; background: #ffffff; } /* Slecteur « target pour afficher l’image » */ .twAudessus:target { display: table; } </style> <figure> <a href="#id84"><img src="http://www.trucsweb.com/documents/images/2014/Untitled-10.png" alt="Image" width="200"></a> <div class="twAudessus" id="id84"> <a title="Description" href="#ferme"> <img alt="Image" src="http://www.trucsweb.com/documents/images/2014/Untitled-10.png"> </a> </div> </figure>

Un peu de Javascript pour automatiser le tout!
Image
Le Javascript n’est pas une bête noir, ni jQuery d’ailleurs, mais quand on peut reproduire un effet sans eux, c’est mieux!

Rien n’empêche d’utiliser une page dynamique! Avec un langage serveur pour récupérer l’information depuis une base de données. Du même ordre, rien n’empêche de manipuler dynamiquement en Javascript une page en pure CSS! Par exemple pour faire le tour des hyperliens du document (DOM), détecter ceux de class « twpop », pour leur ajouter le code du Pop-Up. Il suffit donc de déclarer les images comme ceci :

<figure"> <a href="http://www.trucsweb.com/documents/images/2014/Untitled-10.png" class="twpop"> <img src="http://www.trucsweb.com/documents/images/2014/Untitled-10.png" alt="Image"> </a> </figure>

Le script suivant ajoute donc automatiquement le code HTML nécessaire pour créer le Pop-Up. C’est à dire la capture des liens de class « twpop » de la page. La capture de l’adresse (href) et sa transformation en ID. La création du calque (DIV) avec le même ID et le lien pour fermer le Pop-Up (#fermer) et l’image avec l’adresse capturée plus haut.

function twPopConstructeur2(){ var anchors = document.getElementsByTagName("a"); for (var i=0; i<anchors.length; i++){ var anchor = anchors[i]; var relAttribute = String(anchor.getAttribute("class")); if (anchor.getAttribute("href") && (relAttribute.toLowerCase().match("twpop"))){ var oParent = anchor.parentNode; var oImage=document.createElement("img"); oImage.src = anchor.getAttribute("href"); oImage.alt = anchor.getAttribute("title") var oLien=document.createElement("a"); oLien.href = "#ferme"; oLien.title = anchor.getAttribute("title"); oLien.onclick = "return false;"; oLien.appendChild(oImage); var sNumero = "id"+i; var node=document.createElement("div"); node.id = sNumero; node.className = "twAudessus"; node.appendChild(oLien); anchor.setAttribute("href","#"+sNumero); oParent.appendChild(node); } } }

Ce qui transformera le code, et tout les hyperliens de classe « twpop » en :

<figure> <a href="#id84" class="twpop"> <img src="[url-petite-image]" alt="Image"> </a> <figcaption>Description</figcaption> <div class="twAudessus" id="id84"> <a title="Description" href="#ferme"> <img alt="Image" src="[url-grosse-image]"> </a> </div> </figure>

Code complet

Peut importe le nombre d’image dans le document HTML, il suffit d’une hyperlien avec la class « twpop » pour générer un Pop-up.

// Le code est activé après le chargement de la page : <script> document.onLoad = twPopConstructeur(); </script>

<style> 
/* ------------- ------------- */
/* Zoom image avec fenêtre     */
/* modale « responsive ».      */
/* Trucsweb.com : Django Blais */
/* ------------- ------------- */
.img-sensible { max-width:250px; }
.twAudessus { 
  /* Le trame de fond */
  width: 100%; 
  height: 100%;
  position: fixed; 
  z-index: 100000; 
  top: 0; 
  left: 0; 
  display: none; 
  background: rgba(0,0,0,0.7); 
  /*-webkit-transition: opacity 200ms ease-in; 
  -moz-transition: opacity 200ms ease-in; 
  transition: opacity 200ms ease-in; */
}
.twAudessus a {
  /* Le truc pour centrer l’image */
  display: table-cell;
  vertical-align: middle;
  text-align: center;
 }
.twAudessus img {
  /* Le contour de l’image */
  max-width:1200px;
  padding: 10px;
 /* -webkit-border-radius: 10px;
  -moz-border-radius: 10px;*/
  background: #ffffff;
}
.twAudessus:target { 
  /* Affichage de l’image */
  display: table;
   -webkit-transition: width 2s;
    transition: width 2s; 
}
@media screen and (max-width: 1600px){.twAudessus img { max-width:1000px; }} 
@media screen and (max-width: 1024px){.twAudessus img { max-width:700px; }} 
@media screen and (max-width: 800px){.twAudessus img { max-width:500px; }} 
@media screen and (max-width: 600px){.twAudessus img { max-width:400px; }} 
@media screen and (max-width: 500px){.twAudessus img { max-width:250px; }}
</style>

<script>
function twPopConstructeur(){
	var anchors = document.getElementsByTagName("a");
	for (var i=0; i<anchors.length; i++){
		var anchor = anchors[i];
		var relAttribute = String(anchor.getAttribute("class"));
		if (anchor.getAttribute("href") && (relAttribute.toLowerCase().match("twpop"))){
			var oParent = anchor.parentNode;
			var oImage=document.createElement("img");
			oImage.src = anchor.getAttribute("href");
			oImage.alt = anchor.getAttribute("title")
			
			var oLien=document.createElement("a");
			oLien.href = "#ferme";
			oLien.title = anchor.getAttribute("title");
			oLien.onclick = "return false;";
			oLien.appendChild(oImage);
			
			var sNumero = "id"+i; 
			
			var node=document.createElement("div");
			node.id = sNumero;
			node.className = "twAudessus";
			node.appendChild(oLien);
			anchor.setAttribute("href","#"+sNumero);
      oParent.appendChild(node);
		}
	}
}
</script>


<figure>
  <a href="http://www.trucsweb.com/documents/images/2014/responsive-screen-mockup-pack.jpg" class="twpop"><img src="http://www.trucsweb.com/documents/images/2014/responsive-screen-mockup-pack.jpg" alt="Image" class="img-sensible"></a>
  <figcaption>Description</figcaption>
</figure>


Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

  • merci beaucoup pour cette article
    64x64
    cartoon network arabic
    http:/cartoon-network-arabic.com
    2015-06-05 14:13:35

    • Merci, excellent article
      64x64
      ano037

      2016-07-25 10:39:24

      • merci beaucoup pour votre code cela ma vraiment aidé
        64x64
        steve

        2016-08-17 16:20:15

        9/10 sur 1 revues.
               Visites : 10137 - Pages vues : 10486
        X

        Trucsweb.com Connexion

        Connexion

        X

        Trucsweb.com Mot de passe perdu

        Connexion

        X

        Trucsweb.com Conditions générales

        Conditions

        Responsabilité

        La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

        Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

        Droit applicable et juridiction compétente

        Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Glossaire

        X

        Trucsweb.com Trucsweb

        X

        Trucsweb.com Trucsweb

        Conditions

        Aucun message!

        Merci.

        X
        Aucun message!
        X

        Trucsweb.com Créer un compte

        Créer un compte

        .
        @