leCHvideoM
Lecteur de vidéos (Javascript et CSS) pouvant être utilisé de façon plus ou moins complète et avancée.

Caractéristiques

• Lecture d’une vidéo ou d’une liste de vidéos aux formats “mp4” et “webm”.

• Précédente, lecture (et pause), suivante, arrêt.

• Commande de lecture et pause au clavier (touche “espace”).

• Barre de temps.

• Déplacement dans le temps avec la souris (roulette ou clic sur la barre de temps) et le clavier (flèches ← et →).

• Barre de volume.

• Réglage du volume sonore avec la souris (clics sur les boutons ou roulette sur la barre de volume) et le clavier (flèches ↑ et ↓).

• Passage automatique ou non à la vidéo suivante, au choix.
Si l’enchaînement est automatique, à la fin de la dernière vidéo, la lecture reprendra à la 1^ère.
S’il ne l’est pas et que la lecture en cours est celle de la dernière, tout s’arrêtera et l’action sur “Suivante” relancera la première de la liste.

• Fichier de personnalisation : liste des fichiers de vidéo ; volume initial ; suite automatique ou non ; démarrage de la lecture automatique ou manuel (si le démarrage est automatique, le volume audio sera forcé à zéro, c’est réglementaire).

• Le nombre de pistes audio est illimité, contrairement à l’endurance de la personne qui visite !

Télécharger le fichier compressé qui contient le “moteur” en JavaScript, les fichiers modèles HTML persos en JS et CSS plus des vidéos de test. Le décompresser dans le répertoire choisi.
Les personnalisations sont signalées par des commentaires dans les fichiers HTML. Aucune ligne du “moteur” (Javascript et CSS) n’est à modifier.
Faire apprécier à qui vous aimez !

leCHaudioM-BTRa
Lecteur de fichiers audio (Javascript et CSS) pouvant être utilisé de façon plus ou moins complète.

Caractéristiques maximales

• Lecture d’une liste de musiques ou tous fichiers audio aux formats “mp3” et “ogg”.

• Précédent, lecture (et pause), arrêt, suivant.

• Boucle possible sur la liste de lecture.

• Commande de lecture et pause au clavier (touche “espace”).

• Barre de volume.

• Réglage du volume sonore avec la souris (clics sur les boutons ou roulette sur la barre de volume) et le clavier (flèches ↑ et ↓).

• Barre de temps.

• Déplacement dans le temps avec la souris (roulette ou clic sur la barre de temps) et le clavier (flèches ← et →).

• Lecture en ordre aléatoire.

• Fichier de personnalisation : volume initial ; démarrage de la lecture automatique ou manuel ; état initial du bouclage ; liste des fichiers audio.

• Nombre illimité de pistes audio, contrairement à l’endurance de la personne en visite !

Télécharger le fichier compressé qui contient le “moteur” en JavaScript, les fichiers modèles HTML persos en JS et CSS plus des fichiers audio de test. Le décompresser dans le répertoire choisi.
Les personnalisations sont signalées par des commentaires dans les fichiers HTML. Aucune ligne du “moteur” (Javascript et CSS) n’est à modifier.
Faire apprécier à qui vous aimez !

leCHaudioC
Un moteur UNIQUE pour un lecteur audio en 4 versions : compacte et hyper compacte, chacune pouvant être présentée en position horizontale ou vertivale.
Remplace les lecteurs audio en Flash, technique bannie depuis le 1^er janvier 2021. Entièrement en HTML 5 et JavaScript, la compatibilité est assurée avec les navigateurs utilisés pour les tests (voir la liste en page “Mentions légales et techniques”).

Caractéristiques

• Démarrage automatique possible de la lecture. À personnaliser dans les fichiers HTML.

• Réglage du volume sonore à la souris et au clavier (flèches ↑ et ↓).
Version compacte : clics (pas à pas ou tout ou rien) plus roulette sur la barre de temps, plus clavier.
Version hyper-compacte : clics en pas à pas plus clavier.

• Commandes de lecture, pause et arrêt de la lecture.
L’hyper-compacte peut encore se réduire à 3 boutons en supprimant le bouton d’arrêt comme ICI.

Télécharger le fichier compressé qui contient le moteur et les modèles. Le décompresser dans le répertoire choisi.
Les personnalisations sont signalées par des commentaires dans les fichiers HTML et CSS. Aucune ligne du “moteur” leCHaudioC n’est à modifier.
Faire apprécier à qui vous aimez.

Moteur de diaporama basé sur l’ancien “Diarama” (voir plus bas).
Entièrement programmé en JavaScript, la compatibilité est assurée avec les navigateurs utilisés pour les tests (voir la liste en page “Mentions légales et techniques”).

Caractéristiques

• Affichage interne à la page et non plus dans une fenêtre ou onglet séparés.

• Centrage automatique en largeur et en hauteur :
- du cadre de diaporama dans la fenêtre du navigateur ;
- des images dans le cadre du diaporama.

• Défilements des images : manuel, automatique fixe (délai à choisir), programmé ou aléatoire.

• Accompagnement musical possible démarrant en même temps que le diaporama dans les modes automatiques.

• En manuel, possibilité d’enregistrer les temps de passage (par exemple pendant une musique ou des paroles enregistrées) puis de les récupérer afin de les stocker dans le fichier de personnalisation “tablodia[C ou L].js”.

Télécharger le fichier compressé. Le décompresser dans le répertoire choisi. Aucune instruction active de JavaScript n’est à modifier.
Ouvrir le manuel d’utilisation “DiaramaN-MU.pdf” et suivre les indications. Les personnalisations sont signalées aussi par des commentaires dans les fichiers de personnalisation et de HTML. Faire apprécier à qui vous aimez.

Moteur de diaporamas spécialisé dans la présentation d’images panoramiques.
► Un exemple opérationnel est visible dans la page “panoramadisiaque” de ce site.
Les images de grandes largeurs s’affichent dans une fenêtre aux dimensions par défaut de 760 par 400 pixels.
Elles débordent horizontalement de cet espace et pour être visionnées, elles défilent en panoramique horizontal vers la gauche ou la droite, automatiquement ou manuellement, à vitesse lente ou accélérée.
Une fenêtre montre les vignettes des panoramas que l’on fait défiler verticalement (comme dans “DynaramaH” ci-dessous) afin de choisir celui à afficher dans la fenêtre du panoramique.

Caractéristiques

• Produit SANS FLASH, programmé en HTML, CSS et JavaScript, pour piloter un diaporama d’un grand nombre de panoramas.

• Attente du chargement complet des images pour démarrer.

• Défilement vertical des vignettes dans leur fenêtre.

• Choix manuel de l’image en cliquant sur la vignette correspondante, y compris pendant le panoramique et le diaporama automatiques.

• Défilement automatique réalisant un diaporama des panoramas.

• En manuel, possibilité de défilement du panorama À LA SOURIS.

• Possibilité de faire défiler verticalement les vignettes à la ROULETTE de la souris.

• Possibilité de vignettes de hauteurs différentes (maxi 100px sans modifications complémentaires).

Personnalisations principales

• Le fichier de personnalisation “pnrmPerso.js” contient les informations suivantes :
◦ description des images : nom du fichier, légende et position initiale de l’image ;
◦ au démarrage, panoramique AUTO ou MANUEL ;
◦ au démarrage, diaporama AUTO ou MANUEL.

• Tous les fichiers fournis sont assortis de commentaires détaillés.

Télécharger
Contenu du fichier téléchargé
Version actuelle : 2.8

Les fichiers HTML, CSS et JavaScript plus les images fonctionnelles et de panoramas. Le tout fonctionnant totalement sert d’exemple.
Notes de versions.

Fichiers à personnaliser

• Nécessairement : index.html et pnrmPerso.js

• Optionnellement : pnrmStyle.css

Diaporama interne à la page HTML qui affiche les vignettes de l’index pour un maximum de place laissée aux grandes images (800 par 600 pixels dans l’exemple proposé) centrées automatiquement en largeur et en hauteur dans la boîte de défilement.
Défilements des images : manuel avec flèches de commande escamotables ou automatique programmé.
Améliorations
• Centrage vertical automatique des images dans leur conteneur.
• Transition possible en fondu.

Télécharger le fichier compressé. Le décompresser dans le répertoire choisi. Aucune instruction du moteur en JavaScript n’est à modifier. Les personnalisations sont signalées par des commentaires dans les fichiers personnalisables.
Version actuelle : 3.0
Fichiers à personnaliser : index.html, style.css et DRMin.js

La présentation consiste en une image de grande taille avec à gauche (ou à droite), une colonne de vignettes qui se déplacent verticalement de haut en bas et de bas en haut, manuellement et automatiquement.
Voir une réalisation avec 88 photos chez Lou Valat

La présentation consiste en une image de grande taille avec au-dessous (ou au-dessus), une rangée de vignettes qui se déplacent horizontalement de gauche à droite et de droite à gauche, manuellement et automatiquement.

Caractéristiques communes à DynaramaV et DynaramaH

• Produits garantis SANS FLASH, programmés en HTML, CSS et JavaScript.

• Programmés pour piloter un diaporama d’un très grand nombre d’images.

• Accélération de l’apparition des images (pré-chargement sur le “client”).

• Durée d’affichage constante quel que soit le temps de chargement de l’image dû au débit de la connexion.

• Quand une image est affichée, sa vignette prend une taille plus grande et une bordure colorée.

• L’affichage d’une image peut s’accompagner d’un texte placé au choix du créateur au-dessus de l’image (plutôt au format paysage) ou à gauche de l’image (plutôt au format portrait).

Fonctions de visualisation

• Défilement (vertical ou horizontal) des vignettes visibles dans leur fenêtre.

• Défilement automatique à partir de l’image affichée, passage en pause, arrêt.

• Choix et affichage manuel d’afficher une image en cliquant sur une vignette, y compris pendant le défilement automatique qui se poursuivra à partir de cette image.

• En automatique, défilement séquentiel (par défaut) ou aléatoire des images.

• En automatique, bouclage (par défaut) ou non en fin des images.

Télécharger DynaramaV | DynaramaH
Contenu des fichiers téléchargés
Version actuelle : 1.5 (10/10/2012)

Les fichiers HTML, CSS et JavaScript plus les images fonctionnelles et d’exemple. La documentation.
Le tout fonctionne totalement de façon à servir d’exemple.

Fichiers à personnaliser

indexV.html (ou indexH.html) et dnrmVperso.js (ou dnrmHperso.js)

Documentation

La documentation (Desc-Img-V.doc ou Desc-Img-H.doc) contient les informations de versions et les instructions d’utilisation.
Elle est au format Word (2000) car elle sert aussi d’aide à la mise au point du diaporama. Ceci grâce à un tableau qui contient les vignettes affichées, les légendes, le placement des images et des légendes.

• US comme ultra-simple : transitions en fondu enchaîné uniquement et durées uniques d’apparition, d’affichage et de disparition.

• S comme simple : transitions en fondu enchaîné uniquement.

• M comme multiple : 14 transitions totalement mixables. Les transitions d’apparition et de disparition peuvent être différentes.

• X comme étendu : départ et fin d’apparition indépendants objet par objet ; transitions en fondu uniquement. Voir l’illustration ci-contre ou encore les pages des vœux de 2010 ou 2011.

Particularités (● = tous ; ○ = JavaramaUS ; □ = JavaramaS ; ■ = JavaramaM ; ◊ = JavaramaX)

□ ■ ◊ Les durées de transition en apparition et disparition sont indépendantes pour un objet et entre objets.

● Le diaporama peut être incrusté dans un texte comme ici.

● Des objets pilotés par Javaramach peuvent être répartis dans la page hors du cadre basique du diaporama, comme ci-contre. Exemple d’usage : un texte apparaît n’importe où dans la page, en même temps qu’une image du diaporama.

□ ■ ◊ Les objets peuvent être des images, du texte, des images ET du texte...

□ ■ Une “fonction spéciale de fin” est actionnée à la disparition totale du dernier objet. Fournie vide, cette fonction “avancée” est à écrire en JavaScript.

■ Les effets de transitions en apparition et disparition sont indépendants pour un objet et entre objets.

◊ Au bouclage, on peut comme ici éliminer des objets du défilement.

◊ Un objet peut être affiché un certain temps ou définitivement pendant que les autres défilent, comme ici.

Fourniture
Documentation détaillée et exemples de mise en œuvre dans les fichiers compressés à télécharger.

Télécharger
JavaramaUS v1.1 ; JavaramaS v2.02 ; JavaramaM v2.02 ; JavaramaX v2.02

Évolutions de JavaramaUS

1.1 : contournement pour les Internet Explorer qui ignorent “getElementsByClassName”.

Évolutions de JavaramaS, M et X

2.00 : activation par init() sur onload pour la clarté et la compatibilité avec le standard XHTML. Les fichiers de la page (HTML) et du Javarama (JavaScript) doivent évoluer en même temps.

2.02 : fonction spéciale de fin (subsidiaire).

Bulle informative affichant un texte de longueur quelconque au survol d’un mot, groupe de mot ou image, signalé par un souligné en pointillés. Le placement de la bulle est contrôlé pour être toujours visible et suivre les déplacements de la souris. Ses couleurs sont personnalisables (texte et fond).
Voir des exemples dans “Des z’outils z’utiles” de “La Tructique”.
Télécharger

Réalisation d’un diaporama tel que ceux présentés dans certaines pages “à voir” de ce site.
Entièrement programmé en JavaScript, la compatibilité est assurée avec les naviga­teurs utilisés pour les tests (voir la liste en page “Mentions légales et techniques”).

Télécharger le fichier compressé en cliquant sur l’image exemple. Le décompresser dans le répertoire choisi. Ouvrir la documentation “Diarama.pdf” (format PDF) et suivre les indications. Aucune instruction active de JavaScript n’est à modifier. Toutes les personnalisations se trouvent dans des fichiers de données et exceptionnellement de HTML. Faire apprécier à qui vous aimez.
* Consulter le document “ÉtatDiarama.pdf” pour connaître les évolutions.

Il est possible d’ouvrir une page web en lui passant des paramètres outre l’ancre cible. Ceci permet par exemple d’afficher un contenu différent en fonction de l’appelant ou de choisir le cadre (frame) à ouvrir en fonction de l’appelant. On peut aussi appeler une page avec seulement une ancre inexistante.
Dans la page appelante, écrire l’adresse d’URL appelée suivie d’un “#” et de l’ancre cible (même fictive) et ensuite, après un “;”, le premier paramètre, etc. Forme finale :
La page appelée contient 3 lignes de JavaScript pour récupérer et exploiter les paramètres reçus.
Télécharger l’exemple joint pour découvrir comment tout cela fonctionne et l’accès à la cible dans ce cas.

Le menu de la page d’accueil de ce site est une réalisation maison en JavaScript compatible avec tous mes navigateurs de test (voir en page “Mentions légales et techniques”).
Ces menus sont très simples puisqu’il suffit pour les animer de 13 lignes de programme JavaScript sans aucune personnalisation. Le fichier HTML de la page décrit une ligne par menu et sous-menu dont les styles se trouvent dans un fichier “CSS”.
Télécharger le fichier compressé ci-joint et le décompresser. Lire les commentaires contenus dans le fichier “menusdef.js” et se baser sur l’exemple “testmenu.html” pour utiliser ces menus.

En JavaScript, les données globales sont accessibles à l’ensemble des scripts décrits ou appelés dans UNE page. Dès que cette page en appelle une autre ou que l’on revient à la page précédente, ces données globales sont perdues. Si l’on veut qu’elles restent accessibles à tous les scripts de toutes les pages du site, il faut donc les définir dans une page qui restera active jusqu’à quitter totalement ce site.
Pour cela, la page d’accueil devra être composée de 2 cadres (frames) en colonnes ou en lignes dont l’un aura une dimension nulle. C’est celui qui restera actif tout le temps de la visite du site. Le deuxième cadre est celui visible de la page d’accueil et dans lequel se chargeront toutes les pages suivantes.
Télécharger l’exemple joint pour comprendre comment mettre en œuvre cette technique.