Accueil > tutos > galeries > galerie-flash-simple-viewer
Galerie Flash (SimpleViewer)
| Difficulté | Tags / Mots-clés | Prérequis |
|---|---|---|
 |
Galerie Flash, galerie SimpleViewer, SimpleViewer français, installation en français, galerie stylée, design galerie, galerie classique, galerie compacte, galerie photo |
HTML, CSS, Javascript |
| Durée | Voir aussi | Publié le |
|---|---|---|
| 1 heure | Galerie Javascript, Galerie jQuery, Galerie Flash & XML | 1er juin 2010 |
SimpleViewer est une galerie flash extrêment simple à mettre en place qui prend en charge un grand nombre de fonctionnalités et supporte quasiment tous les formats d'images, elle inclut un bouton pour l'affichage en plein écran, 3 styles de galeries à choix (classic, compact et modern) ainsi que la navigation avec les flèches du clavier.
La gestion des images est également aisée car gérée via un fichier XML facilement modifiable avec n'importe quel éditeur de texte.
Petit plus agréable : des options supplémentaires s'affichent au clic-droit comme : "afficher en plein écran" ou "ouvrir dans une nouvelle fenêtre".
Voir une démo de SimpleViewer (style classique)
Voir une démo de SimpleViewer (style compact)
Implémentation en 5 étapes
Etape 1 : Téléchargement de l´archive
Etape 2 : Placement des fichiers
Dans l'archive que vous venez de téléchargé se trouve 2 dossiers, je vous conseille vivement de créer un dossier "galerie"à la racine de votre site et d'y placer le contenu de votre archive.
Les dossiers :
images
thumbs
ainsi que les 4 fichiers :
compact.html
compact.xml
swfobject.js
simpleviewer.swf
Notez que le fichier. compact.html vous servira uniquement de modèle pour l'intégrer dans votre page html, vous pourrez donc la supprimez une fois fini avec.
Etape 3 : Script dans l'en-tête
Copiez le code ci-dessous et ajouter le à l'en-tête de votre page.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>
<script type="text/javascript">
var flashvars = {};
flashvars.galleryURL = "compact.xml";
var params = {};
params.allowfullscreen = true;
params.allowscriptaccess = "always";
params.bgcolor = "FFFFFF";
swfobject.embedSWF("simpleviewer.swf", "flashContent", "600", "550", "9.0.124", false, flashvars, params);
</script>
Etape 4 : Le HTML
<div id="flashContent">SimpleViewer nécessite JavaScript ainsi que Flash Player.
<a href="http://get.adobe.com/flashplayer/">Obtenir Flash Player</a>
</div>
Etape 5 : Liens vers les images
Préparer vos images que vous souhaitez mettre en ligne et placez les dans le dossier images ainsi que les minatures dans le dossier "thumbs"
Pour ajouter lier les photos à la galerie, éditez le fichier xml et faites pointer le lien de "imageURL" vers votre grande image, "thumbURL" vers la miniatures et "linkURL" vers un lien (faculatif) et enfin "linkTarget" afin de définir si le lien de votre image (si existant) s'ouvrira dans un nouvel onglet ou pas.
<caption> correspond, grosso modo, au commentaire qui s'affichera en dessous de l'image lorsque l'utilisateur passera dessus avec la souris.
<image imageURL="images/wide.jpg" thumbURL="thumbs/wide.jpg" linkURL="" linkTarget="" >
<caption><![CDATA[Vos commentaires peuvent inclurent du HTML. Les balises supportées sont <b>gras</b>, <u>sousligné</u>, <i>italique</i>, <u><a href="http://www.simpleviewer.net" target="_blank">liens hypertextes</a></u>, retour à la ligne<br> et <font color="#ffff00" size="30">couleur du texte</font>]]>
</caption>
</image>
Options de configurations
Copiez d'abord le code de la fenêtre ci-dessous et passer à la rubrique explications pour les configurer.
title=""
textColor="FFFFFF"
frameColor="FFFFFF"
thumbPosition="BOTTOM"
galleryStyle="COMPACT"
thumbColumns="7"
thumbRows="1"
showOpenButton="TRUE"
showFullscreenButton="TRUE"
frameWidth="0"
maxImageWidth="800"
maxImageHeight="600"
imagePath="images/"
thumbPath="thumbs/"
useFlickr="false"
flickrUserName=""
flickrTags=""
languageCode="AUTO"
languageList=""
Explications :
title="" ----->> titre de la galerie
textColor="FFFFFF" ----->> couleur du texte
frameColor="FFFFFF" ----->> couleur de la bordure
thumbPosition="BOTTOM" ----->> position des miniatures
galleryStyle="COMPACT" ----->> style de la galerie
thumbColumns="7" ----->> nombres de colonnes d'affichage pour les miniatures
thumbRows="1" ----->> nomres de lignes d'affichage pour les minatures
showOpenButton="TRUE" ----->> afficher le bouton "ouvrir dans une nouvelle fenêtre"
showFullscreenButton="TRUE" ----->> afficher le bouton "affichage en plein écran"
frameWidth="0" ----->> largeur du cadre
maxImageWidth="800" ----->> largeur maximale de l'image
maxImageHeight="600" ----->> hauteur maximal de l'image
imagePath="images/" ----->> chemin jusqu'au grandes images
thumbPath="thumbs/" ----->> chemin jusqu'au minatures
useFlickr="false" ----->> utiliser Flick
flickrUserName="" ----->> nom d'utilisateur Flick (si useFlick est sur "true")
flickrTags="" ----->> tags Flickr
languageCode="AUTO" ----->> langue utilisée
languageList="" ----->> liste de langue
Et voilà ! Vous pouvez mainteant utilisez et admirez votre galerie.
Voir une démo de SimpleViewer (style classique)
Voir une démo de SimpleViewer (style compact)
Source : http://simpleviewer.net
Salut Sylvie,
Est c'que tu pourrais préciser un peu plus le problème, je n'arrive pas vraiment à comprendre ce qui ne fonctionne pas ?
Premièrement, est c'que ta galerie s'ouvre dans une lightbox ? Si oui t'as lightbox devrait déjà intégré un bouton "fermer" sinon si t'as galerie n'est pas dans une lightbox alors ça veut dire qu'elle est directement intégrée dans ta page, non ?
Ou alors elle s'ouvre dans une nouvelle fenêtre ? Si tel est le cas alors tu peux intégrer un petit bouton en javascript qui te permet de revenir en arrière (dis moi si c'est ça je t'enverrais le bout de code) mais est c'que tu ne préférerais pas avoir la galerie intégrée dans ta page ?
Tiens moi au courant
@++
Salut !
C'est exactement ce que je cherche !
Comment rajouter un bouton de retour sur un simpleviewer ?
Ca fait un moment que je tourne sans trouver.
Merci !
<form><input type="button" value="Retour"
onclick="history.go(-1)"></form>
Merci c'est très gentil de nous donner le code html pour ajouter un bouton "retour".
Mais peut tu nous dire dans quel fichier il faut l'ajouter?
Car j'ai essayer de l'insérer dans le fichier gallery.xhtml mais ça ne fonctionne pas.
Salut Lindsay,
Je veux bien mais j'aimerais d'abord comprendre le problème exact, parce que j'ai toujours pas saisi ou ça coince ? merci pour tes précisions
Bonjour,
J'ai créer un galerie photo directement avec le logiciel simple viewer, de sorte à ne pas m'embêter avec les codes.
Erreur certainement, car une fois le code générer :
<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
SV.simpleviewer.load("sv-container", "100%", "100%", "222222", true );
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->
Je n'ai absolument aucune idée d'où le coller dans ma page html ?
Dois le coller dans ma feuille de style ?
Ce serait embêtant car je souhaite faire plusieurs galeries dans plusieurs pages html ...
J'ai essayé de le coller au dessus de <head> mais sans résultats ...
Pourriez vous m'éclaircir et m'aider ?
@Isabelle : Bonjour, je ne suis pas sur que ton code fonctionne mais pour autant qu'il soit OK il faut juste que tu colles les lignes suivantes : "<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
jQuery(document).ready(function () {
SV.simpleviewer.load("sv-container", "100%", "100%", "222222", true );
});
</script>"
entre les balises <head> et </head> de ta page.
et la ligne "div id="sv-container"></div>" dans le corps de ta page (là ou tu souhaite mettre ta galerie). Redis moi si ça joue.
Bonjour,
Merci pour le tuto. Il est bien détaillé et dépanne bien.
Mais j'ai un petit souci. Je voudrais intégrer un petit logo à la place du texte "clasic Gallery" de ton exemple. Saurais-tu comment faire ?
Pour le moment, je triche avec une Iframe et le logo est à côté, mais c'est nettement moins esthétique.
Merci d'avance.
Sauf erreur de ma part, il y a un paramètre "title" qui permet de changer le titre de la galerie.
Bonjour,
j'ai installé une galerie simple viewer, et je souhaiterais y ajouter quelques petites modifications.
Je souhaite en fait organiser une expo photo avec un vote en ligne.
J'ai donc créer un formulaire google et je souhaiterais intégré un lien vers depuis ma gallerie vers ce site du genre "participez au concours en cliquant ici" ... Quelqu'un pourrait-il m'aider ??
Ma gallerie : http://lascalaphe.free.fr/expositions/SimpleViewer/
Le lien du questionnaire : https://spreadsheets.google.com/viewform?formkey=dDdBNTBUV0tZSXgxQzJDRXZ1NGlQX0E6MQ
Bonjour,
merci pour le tuto, ça m'a beaucoup aidée. Je cherche maintenant le moyen de pouvoir accéder à l'url que j'ai inscrite dans la gallerie xml depuis la full screen. Je pensais que l'option s'afficherait tout comme c'est le cas lorsque la galerie est en mode normal. J'ai bien écrit mon url dans le code linkURL="" mais le fullscreen ne le détecte apparemment pas. Quelqu'un aurait-il une idée pour faire apparaitre le lien depuis le fullscreen svp ?
J'aimerais supprimer la bouton en bas à droite (simpleviewer) est-ce qu'on peut le faire? Si oui, comment?
Merci!
Bonjour,
Les questions sont claires : où mettre le script de bouton 'retour'
La page de la 'gallery' n'est pas accessible.
Les photos défilent correctement mais on ne peut pas revenir au pgm, à moins de jouer avec la flèche retour-1, mais ce n'est pas à l'utilisateur de le faire. De plus on toutes les chances de se retourver sur le site se SimpleViewer.
Merci
Bonjour,
Déjà superbe tutoriel.
J'ai néanmoins un gros souci dont je ne trouve pas de solution depuis plus d'une semaine.
Tous marche niquel sur mon ordinateur et en serveur local, mais dés lors que je transféré tous sur mon site internet certaine photos ne s’affiche pas,à la place simpleviewer affiche des crois. Savez vous pourquoi ?
Cordialement
Bonjour Rémy,
Tu as des croix car le nom de tes images est trop compliqué du coup il ne la trouve pas ou ché pas quoi mais voià, moi G refait ma galerie avec des noms beaucoup plus simple et NO PB ! BON SINON……………
dites, vous ne sauriez pas pourquoi mon option plein écran ne marche pas quand je met mon site en ligne ? et pourtant ça marche en local…
merci !
@Daniel : Pour enlever le logo SimpleViewer je crois qu'il n'y a pas vraiment d'autres solutions que de passer à la version Pro de SimpleViewer, plus d'infos sur leur site.
Quelqu'un a t il trouve comment ajouter un bouton RETOUR qui pointerait sur la page d'accueil de son site par exemple ?
Merci.
bjr Pitchoune,
pour le bouton retour, il faut que tu rajoute un div: exemple qui suit:
<div id="aquabutton" class="button aqua">
<div class="glare"><a href="Portfolio.htm">Retour</a>
</div>
</div><br />
c'est un exmple sur ma page externe a la galerie photo et qui fonctionne..
sans ouliblié le CSS pour mettre du style a ton bouton ;)! enjoy
Bonjour Didou. Merci pour ta reponse mais mon probleme n'est pas vraiment dans la creation du bouton mais dans le fait qu'il ne fonctionne pas. Je mets le code dans la page index.html de simpleviewer. le bouton est cree mais rien ne se passe quand je clic dessus pourtant le href est correct ????
salut salut ^^
Alors en effet le tuto semble super le seul problème c'est que je ne pige pas tout du moins dans mon cas. J'ai DL la version pro de sv et je travaille avec dreamweaver. Je n'ai pas du tout l'ame d'un developpeur je préfère prévenir mais voila ma question est simple. Peut-on mettre un logo (en retour vers une page index.html) sur les pages de sv ? car pour le moment ça m'ouvre la gallerie super bien sans problème mais aucun moyen de retourner sur mon site apart en utilisant la navigation "afficher la page précédente". Par avance merci ^^
hello,
et d'abord, merci de la part de toute la communauté des débutants qui s'essaient au web!
par contre, j'ai un petit problème que je ne sais pas résoudre dans ma gestion de galerie photos.
J'utilise Kompozer pour créer mes pages web, et c'est à partir de Picasa que je génère mes galeries. Jusque là, pas de problème. Le soucis c'est de pouvoir, au minimum, mettre un bouton "retour" sur la page du viewer pour revenir sur ma propre page web, ou d'encapsuler le viewer dans mes pages web. Autre soucis, à part le html, je ne connais RIEN d'autre comme langage...
Alors voila, je suis un peu coincée... peut-être qu'il y a une astuce ou un bout de code à mettre quelque part?
En tous cas, merci à vous!