Dernière version stable 
Archive -
décembre, 2008
-
novembre, 2008
-
octobre, 2008
-
septembre, 2008
-
août, 2008
-
juillet, 2008
-
juin, 2008
-
mai, 2008
-
avril, 2008
-
mars, 2008
-
février, 2008
-
janvier, 2008
-
décembre, 2007
-
novembre, 2007
-
octobre, 2007
|
|
Inserer un module de galerie dans un article |
|
Écrit par Daneel le 02-07-2008
|
 ImageFlow est un module de galerie de photos, qui permet une navigation simple à travers des images miniatures. Cette technique superbe et intuitive est bien connue sous le nom de Coverflow développé à l'origine par l'artiste Andrew Coulter Enright que l'on retrouve notamment dans itunes d'apple . Imageflow pour joomla est dérivé du script ImageFlow 0.9 de Fin Rudolph. L'utilisation de ce module nécessite une modification de fichier css du template et l'ajout du plugin highslide pour agrandir les images. Les explications et les étapes d'installation vous sont donnés ci-dessous ainsi que la méthode pour insérer le module dans un article.
Imageflow ne fonctionne que pour Joomla 1.5 uniquement.
 La procédure :
1) installer le module par le menu extension-installer
2) Aller dans le menu extension - gestion des templates pour éditer le fichier template.css de celui installé par défaut
Ajouter les lignes suivantes :
#imageflow {
width: 300px;
max-width: 500px;
min-height:100%;
text-align: left;
margin: 0 auto;
position: relative;
border: 0px;
background-color: white;
padding: 0px 20px;
}
#images img {
position:absolute;
top:0px;
border:none;
}
#imageflow h1 {
font-size:200.1%;
text-align:center;
}
#images a{
color: #fff;
}
#images {
visibility:hidden;
}
#loading{
margin-top:164px;
margin-bottom:200px;
text-align:center;
color: yellow;
width:100%;
}
#loading img{
margin-top:10px;
position:relative;
}
#captions{
font-weight:bold;
position:relative;
text-align:center;
color: yellow;
z-index:101;
}
#scrollbar{
visibility:hidden;
position:relative;
border-bottom:1px solid black;
z-index:102;
}
#slider {
position:absolute;
margin-top:-7px;
margin-left:-7px;
z-index:103;
background-image:url(/modules/mod_imageflow/slider.png);
background-repeat:no-repeat;
width:14px;
height:14px;
}
3) installer le plugin et le composant highslide toujours par le biais du menu extensions, installer
4) aller dans le menu extension, gestion des modules et éditer le module imageflow
entrer les paramètres suivants
montrer le titre : non
activé : oui
position : imageflow (cliquer dans la zone position pour éditer)
charger les images depuis : un répertoire
Chemin du répertoire : images/stories
5) vérifier que le plugins Content - Load Module soit activé dans la gestion des plugins
6) editer le plugin (toujours dans la gestion des plugins) "Content - Highslide" pour selectionner "include HighSlide Configuration" en "always"
7) aller dans le menu composants : Highslide JS Configuration pour editer le profil de configuration par défaut, selectionner oui à "use on HTML" et ajouter dans la zone Custom Overlay Html
<div class="controlbar">
<a href="#" onclick="imf.handle(1);return hs.previous(this)" title="Précédent (flèche gauche)" class="previous"></a>
<a href="#" onclick="imf.handle(-1);return hs.next(this)" title="Suivant (flèche droite)" class="next"></a>
<a href="#" onclick="return false" title="Cliquer - glisser pour déplacer" class="highslide-move"></a>
<a href="#" onclick="return hs.close(this)" title="Fermer" class="close"></a>
</div>
Vous pouvez également selectionner masquer pour les credits de highslide à condition d'être dans les conditions prévues dans la licence de highslide.
Cliquer sur save/publish
8) Maintenant allez dans un article, par exemple celui de la page d'accueil et collez la balise suivante dans le texte, celle-ci sera remplacée par la galerie. {loadposition ImageFlow}
Note : Pour plus d'infos, n'hésitez pas à lire le texte originale de l'auteur
L'utilisation d'une position virtuelle comme dans l'exemple ci-dessous permet d'inserer un module dans un article. c'est une fonctionnalité déjà inclus dans Joomla!
Bien sur, vous pouvez indiquer dans le module une position existante de votre template si vous voulez l'afficher dans une zone déjà définie.
Fonctionnalités d'ImageFlow
- Miniatures d'images, avec reflections, sont automatiquement crées depuis l'image d'origine et mis en cache pour une lecture rapide.
- La taille de la miniature est précisé en pourcentage de la taille de l'image d'origine.
- Images sont chargés via un fichier liste d'image, toutes les image sont dans un seul répertoire.
- Les images JPG, PNG and GIF sont supportés.
- Les miniatures peuvent être réalisées avec sous sans transparence.
- Une limite de nombre d'image à charger depuis un répertoire peut être définis.
- Option de cacher ou affiche une ligne de légende.
- Dimensionnement 100% dynamique. Le look et la taille des imageflows sont modifiables facilement via le CSS.
- Highslide JS est utilisé poru affiché les images en popup. Note: Highslide JS doit être installé séparement, il n'est pas installé par ce module.
- Support du bouton de défilement de la souris
- Support des touches flèches
- Barre de téléchargement
 |
|
|
Télécharger le 
Flux RSS pour les commentaires
Un seul hic, sa veut pas agrandir les images...