Accueil > Bac à sable > Matrices et modèles de codage spip > Codage lecteurs images 07/07

Codage lecteurs images 07/07

mercredi 7 juillet 2010

La taille max des vignettes (par défaut pour tout le site se règle dans la configuration du site.

Les images s’affichent dans une mediabox, les dimensions de la box (pour toutes les galeries du site) se règlent dans le plugin mediabox.

Sur Media box voir ce site Images

Redimensionner les images : article spip-contrib

http://www.spip-contrib.net/Des-modeles-pour-modifier-individuellement-la-taille

Redimensionner une image en ligne

sites

http://ressources.info.free.fr/spip/spip.php?article11

Voir en particulier, très simple : PicJuice

http://www.picjuice.com/


Mur d’images

1- Avec documents de l’article

2- Avec recherche sur Flickr


Codage HTML

Code simplifié

Images Flickr



src="http://apps.cooliris.com/embed/cooliris.swf"
flashvars="feed=api://www.flickr.com/search=humain">
Images page en cours



src="http://apps.cooliris.com/embed/cooliris.swf"
flashvars="feed=http://www.defilangues.org/spip/spip.php?page=spip_iris&id_article=167">

Code html

http%3A%2F%2Fwww.defilangues.org%2Fspip%2Fspip.php%3Fpage%3Dspip_iris%26id_article%3D167


Essai 1, documents de l’article, codage complet

/>

src="http://apps.cooliris.com/embed/cooliris.swf"
bgColor="#125413"
flashvars="feed=http%3A%2F%2Fwww.defilangues.org%2Fspip%2Fspip.php%3Fpage%3Dspip_iris%26id_article%3D167
&intro=scrollLeft
&style=white
&numrows=2
&backgroundAlpha=1
&backgroundColor=#000000

&showEmbed=false
&showNavArrows=true
&showChrome=true
&showSearch=false

&cellBorder=10
&cellWidth=350
&cellHeight=200
&glowColor=#FFFFFF
&showDescription=false
&showReflections=true"
width="600"
height="250"
allowFullScreen="true"
allowScriptAccess="always"
wmode="transparent"
>


Essai 2- Documents externes Flickr


3- Essai 3 Flilckr, autre couleur



Images dans le texte

Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte

Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte Texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texteTexte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte


Codes pour affichage des images

Balise doc

Dimensions de la vignette non paramétrables, mais position réglable.

Active lecteur mediabox.

Sans paramètres

Paramètre hauteur/largeur inopérants

++++ doc +position

Avec paramètre position

Avec titre

++++Balise emb

Codage en emb (embedding) : l’image est non cliquable, positionnable, non dimensionnable (cf. code hauteur, inutile)



++++Codage en IMG

Modification fichiers doc et img dans modèles sarkaspip

On peut redimensionner les images en img




++++Balise src

L’image est dimensionnable, positionnable et non cliquable

Cordonnier
Cordonnier
Carte
Oislet

Avec titre cliquable

Cordonnerie Carte Oiselet

++++Balise IMG

Image cliquable, s’affiche dans une autre fenêtre/onglet, format d’origine

Vignette non dimensionnable, positionnable dans la page

Louisiane

++++Clic sur titre

Pas de vignette, clic sur titre pour voir l’image.

a href... seul n’active pas le lecteur mediabox.

Plurilinguisme

Il faut ajouter type= type image pour activer la box.

Petite plante

++++Tableaux de titres

Idem. Titres en tableau, images indépendantes, pas de galerie, mediabox activé.

Louisiane Babel
Petite plante Plurilinguisme

Seul le titre de l’image est visible et cliquable.

++++Insertion Image internet

Papillon2

Papillon2

Codes pour affichage des galeries

Galerie 1 Mediabox

Magasin Casino
Jeune enseignant de langue
Babel-Langues


++++Titres tableau Mediabox

Babel-Langues Magasin Casino
Jeune enseignant de langue Día de la tierra

++++Galerie 3 Mediabox

Galerie 1, Mediabox, affichage en tableau
Opticien
Opticien

Cordonnier
Cordonnier

Tierra
Tierra

Feria
Feria

Diaporama Multiviewer

Voir les sites La Glaneuse et Images avec Multiviewer

Code multiviewer

Code du plugin MULTI VIEWER
On initialise un viewer :
on choisit le viewer et des paramètres :

on ajoute une image
on ajoute une autre image
on affiche le viewer :

Par exemple, dans un article XX, je veux :
- Déclarer une nouvelle galerie nommée ’nomgalerie’ :
dans l’article :
dans le squellette : #MULTIVIEWERNEW,nomgalerie
- Ajouter le document 26 dans la galerie ’nomgalerie’ :
dans l’article :
dans le squellette : #MULTIVIEWERXXADD,nomgalerie,26
- Afficher la galerie ’nomgalerie’ :
dans l’article :
dans le squellette : #MULTIVIEWERXXVOIR,nomgalerie
- Choisir le viewer de la galerie ’nomgalerie’ :
dans l’article :
dans le squellette : #MULTIVIEWERXXPARAM,nomgalerie,viewer=postcard

++++Simpleviewer


++++Tiltviewer


++++Postcard


++++Autoviewer


++++Imagerotator



Vidéos

Vidéo ext dans nlle fenêtre

Youtube in gallery


Utiliser le code de You Tube dans le texte de l’article :

++++Flash externe intégré

JW Player


++++Vidéo interne flash intégrée

Avec la balise objet directement dans l’article - flvplayer est a la racine du site, et le fichier flv dans le IMG/flv



++++Insertion video en passant par ftp

Exemple (modèle à adapter)

Sous-marin IMG/flv/ssmarin.flv

Il s’agit de copier le fichier "trop lourd" dans un dossier du serveur. Avec le code donné ci-après, il s’agit de transférer le fichier .flv ou .mp3 dans le dossier IMG > flv ou IMG > mp3.
Avec Tintachinaplayer pour un fichier video .flv dans le fichier IMG/flv/

Utiliser le code suivant :

Macromedia Flash Player 8 est nécessaire pour lire ce fichier

++++JW flash player

JW Player

Réglages

Avec la balise objet directement dans l’article - player.swf est a la racine du site, et le fichier flv dans le IMG/flv

Embed flash


++++Embed vidéo

++++Lecteur multimedia

Portfolio

  • Carte
  • Vieux amis assis sur banc

Messages