Découverte du Javascript...

Publié le par AeMKa

Aaaaalors ben aujourd'hui gros boulot (si vous venez de mon site vous avez dû le voir): les galeries sont en travaux. Pourquoi?

Ca faisait un moment que je cherchais à montrer mes illus et images de manière à pas forcément ouvrir une nouvelle fenêtre.
donc de manière à ce qu'on clique dessus, elle s'affiche direct au moins dans un pop-up (une petite fenêtre par-dessus, qu'on peut refermer de suite). C'est plus rapide, plus pratique et ça fait mieux présenté.

Surtout pour les cartes, brochures et ce genre de travaux à plusieurs faces. En ouvrant une fenêtre, ensuite y a plus qu'à cliquer sur le bouton "1", "2", "3"... pour voir les autres pages ou visuels correspondant. e qui a demandé également de créer des nouvelles pages html.

Bref c'est du boulot.

Pour ceux qui voudraient savoir comment je fais ça:

Pour une image simple:
déjà je me connecte sur Edition Java Script
(on me dira que je triche un peu mais bon, avoir un éditeur automatique de javascript pour le même résultat, pourquoi pas ??).

Je suis toutes les instructions. C'est-à-dire:
Dans le premier champ, je laisse _blank (de toute façon ça change rien).
Dans le second champ, j'entre l'url de la page où apparaît mon image en grande taille.
En largeur et hauteur, j'entre les dimensions en pixel de l'image qui doit apparaître.
En position, je laisse blanc.
Pour les éléments, c'est au gout de chacun mais perso je met rien, le pop up doit etre le plus simple possible.
Enfin pour la balise html: sur mon site l'image cliquable est une vignette. Il me faut donc entrer le code html de cette vignette tel qu'il apparaît sur ma page, sans hyperlien ni rien.

Ensuite je fais "editer le script". Je sélectionne celui-ci et l'insère dans le code html de ma page A LA PLACE du code qui désignait ma vignette.

Ensuite, une fois que la page du site est réactualisée, en cliquant sur la vignette, ça ouvre un pop-up avec l'image agrandie.


Pour un visuel à plusieurs face (carte, brochure, etc) pour avoir une présentation d'une face à la fois, il faut créer une page HTML par face.
Par exemple, un visuel recto verso:
Créer une page html "recto" et une page html "verso" avec sur chacune l'image correspondante.
Ajouter sous chaque image deux boutons (un bouton "1" et un bouton "2"), sur les 2 pages.
Sur la page recto linker le bouton "2" vers la page verso; réciproquement sur la page verso linker le bouton "1" vers la page recto. Attention en faisant ces liens, la frame est _self (c'est à dire que le lien va s'ouvrir dans la même fenêtre).
Ensuite, on prend l'image petit format qui va mener vers ce groupe de pages (recto-verso) et on fait un lien uniquement vers la page recto, avec une frame _blank. On enregistre et on actualise son site.
Cette manip fait obtenir a partir de la petite image, un lien vers une page diférente ou l'on peut consulter toutes les faces du document.

On peut alors éditer le javascript pour obtenir cette nouvelle fenêtre en pop-up. pour ça, la manip de l'édition du javascript est la même que précédemment, simplement dans le fichier où entrer l'URL il faut simplement entrer l'url de la première page (le recto), et calculer les dimensions de la fenêtre pour que les boutons de navigation apparaissent aussi...

Bref c'est du boulot mais le résultat final vaut le coup...

Je vous laisse juger par exemple sur ma galerie communication, les visuels de faire-part de naissance notamment.

Et sur ce... je vous dis quand même @ plus, j'ai besoin de faire une pause ^^ tchô !
Publicité

Publié dans avancées du site

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article