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

Définition de: CSS

Fermer

CSS est utilisé pour définir les couleurs, les polices, le rendu, et d'autres caractéristiques liées à la présentation d'un document. L'objectif est de bien séparer la structure (écrite en HTML ou similaire) et la présentation (en CSS) du document. Cette séparation fournit un certain nombre de bénéfices, permettant d'améliorer l'accessibilité, de changer plus facilement de structure et de présentation, et de réduire la complexité de l'architecture d'un document. Enfin, CSS permet de s'adapter aux caractéristiques du récepteur.   Source : wikipedia 

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.

Télécharger le pack HighSlide en version française

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.

• 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

Commentaires (12)

Flux RSS pour les commentaires

Bonjour
Par Rouca , 03 juillet 2008

Testé et approuvé par moi bah quoi!

Un seul hic, sa veut pas agrandir les images...

Licence
Par fleuveblanc , 03 juillet 2008

Pour info, HighSlide n'est pas un script libre. Il est gratuit pour les sites non-commerciaux. 29$ pour les autres et 179$ pour une intégration illimité. http://vikjavev.no/highslide/

n'ouvre pas les images non plus...
Par Laurent CLAUDE , 03 juillet 2008

moi aussi ça coince à l'ouverture des images !

Pour moi ça marche...
Par Catherine Dubois , 03 juillet 2008

super car j'ai essayé d'installer ce composant et c'était sans succès . La tout fonctionne à merveille.

RE
Par Rouca , 03 juillet 2008

Tjrs pas d'agrandissement de l'image... (mon site est non commercial) snff

Version fr. du pack ici:

http://forum.joomlafacile.com/showthread.php?t=68533

ca marche presque!!!!???
Par lionel-123 , 04 juillet 2008

pas possible de mettre dans un article mon diapo
obligé de placer dans un module.
QULQU'un peut m'aider???

je ne vois pas le module dans la liste
Par ant0inep , 11 juillet 2008

J'ai bien installé le pack sans problème mais rien n'apparait dans ma gestion des modules a part le MAINMENU quelqu'un a une idée ?

il est ou le fichier template.css
Par Philippe85 , 16 juillet 2008

Il y a pas de fichier templace.css dans mon template, il y a template_css.css, c'est le même ?

Message d'erreur
Par Arno13 , 29 septembre 2008

bonjour,
j'ai suivi la procédure et quand j'ajoute à un article voici le message que j'ai au chargement de la page:

Fatal error: Out of memory (allocated 30932992) (tried to allocate 1280 bytes) in /homepages/45/d247621049/htdocs/lateameu/modules/mod_imageflow/reflect2.php on line 329

que faire ?

Pas de Content - Highslide" pour selectionner "include HighSlide Configuration" en "always"
Par teddsmith , 04 octobre 2008

Salut à tous,
Voila j'utilise le template ambient yootheme et quand j'ai image flow et son module highslide ainsi que son pluggins, je n'ai plus le paramatre dans "Content - Highslide" pour selectionner "include HighSlide Configuration" en "always".Ca m'affiche no paramater blabla for thi pluggins.Ce qui fait que quand j'ouvre le fotos, ça s'ouvre plûtot dans un autre onglet au lieu d'un simple pop up en souris.

Et puis pour le css JE NE TROUVE PAS LE TEMPLATE.CSS dedand alor j'ai essayer d'ajouter le ccs d'highslide dans chaque css et les tester chacun , mais rien n'y fait .C'est trop la galère
Et pour le css,

J'ai résolu le problème mais je n'ai pas le zoom souris
Par teddsmith , 05 octobre 2008

Salut tous le monde,
J'ai résolu moi meme le problème que j'ai soumis ci-dessus en réinstallant le composants HighSlide et son module, mais mon problème maintenant c'est que j'arrive pas a avoir de zoom souris quand on clique sur une des image ça s'ouvre tout betement dans une nouvelle onglet du navigateur internet.Et j'ai pas de template.css mais un truc du genre template.css.php et j'ai déja ajouter un par un le CSS donné dans ce tutorials mais rien n'y fait .toujours pas de zoom souris possible. HELP plzzz

...
Par teddsmith , 05 octobre 2008

Re
Bon, les gars merci , mai je viens de trouver a nouveau le bug .au fait on s'en fou carrément du CSS donnée ci -dessus dans le tutoriaul puisqu'on a déja le sample.css.
Donc j'ai juste fait appel a sample.css dans mon template.css.php en faisant ceci include(PATH_ROOT . 'sample.css');
Faut faire attention aussi à l'installation des composant et des pluging, l'installation via joomla n'est jamais 100% assuré à cause des coupure temporaire du FTP, donc j'ai eu aussi des dossier du pluging highslide qui etait vide.
Assurer vous manuellement via filezilla ou autre que le pluging contient bien tous ces dossier gen image php etc..
Voila le site que je suis en train développer c'est www.razaray.com.
C'était ACTIVR ELECTRICITE -INFORMATIQUE - FORMATION

Ecrivez un commentaire

Auteur

Email

Site Web

Titre

Commentaire

Réduire l'éditeur | Agrandir l'éditeur

Ajouter un commentaire