UtiliserSimple Viewer pour son site

Transcription

Utiliser un Simple Viewer pour son site
3 375 Zéros connectés
299 691 Zéros inscrits
Informatique
30/05/2012
Inscription
Connexion
Cours
Forums
Participez
Études
Emploi
Rechercher
Boutique
Cours
Go
+
> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > Divers > Utiliser un Simple Viewer pour son site > Lecture du tutoriel
Cours
Nouveau ?
Suivez le guide !
Nouveautés
W eb
Livre
eBook
PDF
JavaScript
Android
AutoCAD
Réseaux
Par
Mise à jour : 12/12/2009
Difficulté : Facile
559 visites depuis 7 jours, classé 197/787
Site Web
Programmation
POYO
Vous avez un site web et vous voulez créer un album de vos photos de vacances facilement ? Partager vos clichés avec des amis, des
parents ?
Bases de données
Mobiles
Pas de problème, ce tuto est fait pour vous. Je vais vous apprendre à vous servir de Simple Viewer.
Je vous propose de commencer tout de suite par la présentation de l'application.
Systèmes d'exploitation
Graphisme
Infographie 3D
Bureautique
Retour en haut
Sommaire du tutoriel :
Simple Viewer, c'est quoi ?
Analysons les outils
Créons notre album !
Annexe : aller plus loin
Envoyer votre album sur le web
Q.C.M.
Réseaux
Matériel
Mapping
Retour en haut
Rédigez un cours
Tous les cours
S i m p l e
V i e w e r ,
c ' e s t
q u o i
Simple Viewer
D'abord cette question qui vous brûle les lèvres :
Euh... c'est quoi, Simple Viewer ?
Simple Viewer, c'est une application flash gratuite développée par Airtight Interactive servant à créer un album photo en ligne.
En clair, elle va vous permettre de publier vos photos sur votre site web assez facilement.
À la fin de ce tutoriel, vous pourrez réaliser ceci :
http://www.siteduzero.com/tutoriel-3-72992-utiliser-un-simple-viewer-pour-son-site.html#ss_part_1
1 / 11
?
30/05/2012
Comment ça marche ?
Pas si vite, jeune Padawan, d'abord, on va télécharger l'archive :
Télecharger Simple Viewer (67,7 Ko)
Enregistrez l'archive et décompressez-la où vous voulez sur votre disque (moi, c'est sur le bureau).
Voilà, vous êtes prêts à passer à l'étape suivante.
Retour en haut
A n a l y s o n s
l e s
o u t i l s
Le contenu
Commencez par ouvrir le dossier (c'est mieux
) et observez ce qu'il contient.
Beuh mais il y a plein de fichiers, lesquels vont me servir à moi ?
Rhaaa mais ne pleurez pas ! Ce n'est pas bien compliqué :
Dossier/Fichier
Description
Images
C'est le dossier qui contient les images en grand format.
Thumbs
Ce sont les icônes des images à afficher.
Gallery
C'est un fichier XML avec tous les raccourcis des images.
Index
C'est la page HTML qui contient l'album en lui-même.
Readme
C'est le fichier "Lisez moi".
SWFobject
C'est le fichier JavaScript.
Viewer
C'est l'application permettant l'affichage de l'album en lui-même.
Tous les fichiers sont nécessaires sauf le ReadMe.
Vous avez tout compris ? Oui ?
Bon, eh bien passons à la partie suivante.
Retour en haut
C r é o n s
n o t r e
a l b u m
!
Tout d'abord, je tiens à préciser qu'il n'y a pas que cette méthode qui soit valable pour créer votre album, il y en a d'autres
2 / 11
30/05/2012
que vous pouvez consulter ICI (en anglais).
Les images
Alors, maintenant que vous savez à quoi servent tous ces répertoires et fichiers, on va pouvoir commencer.
Commencez par choisir vos photos puis faites-les glisser dans le répertoire "Images".
Faites de même pour le répertoire "Thumbs".
Donc si vous avez bien compris, les images du répertoire "Thumbs" seront les icônes, celles du répertoire "Images" seront les photos
grand format.
Note : j'ai renommé mes images en "01", "02", etc. pour des raisons de commodité, vous pouvez bien sûr les appeler
autrement.
Donc maintenant que nous avons des photos et des icônes, nous pouvons attaquer le code.
Le code
Ouvrons le fichier Gallery.xml avec un éditeur comme Notepad++ ; vous devriez avoir ceci :
3 / 11
30/05/2012
Qu'est-ce que c'est que ce truc ?
C'est un fichier XML, qui contient une simplification du module.
Code : XML
1
2
3
4
<image>
<filename>tall.jpg</filename>
<caption>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
</image>
1. La balise <image> représente l'ensemble de la diapo : l'image, l'icône et le commentaire
2. La balise <filename> (ici, tall.jpg) est l'image qui sera affichée en premier.
L'icône dans "thumbs" doit impérativement porter le même nom que la photo dans "Images" pour qu'elle puisse être
affichée et le chemin doit être relatif (les dossiers "Images" et "Thumbs" doivent être dans le même répertoire que les
fichiers "gallery", "index", "SWFobject" et "viewer").
3. La balise <caption> contient le texte qui sera affiché en commentaire ("One morning,[...]into stiffs sections.").
Vous avez sans doute remarqué la seconde ligne du fichier : on s'en occupera plus tard, ne vous en préoccupez pas pour
l'instant.
Dans mon cas, le fichier modifié avec mes images donne cela :
Ouvrez ensuite index.html et admirez votre travail.
Voilà ce que ça donne chez moi :
4 / 11
30/05/2012
Voilà pour la base. Vous pouvez vous arrêter là, mais je vous conseille fortement de lire l'annexe, votre album sera déjà plus beau et
plus personnalisé.
Retour en haut
A n n e x e
:
a l l e r
p l u s
l o i n
Les options des diapos
Rappelez-vous : plus haut, je vous ai dit de ne pas vous occuper de la seconde ligne du fichier .xml ; eh bien, c'est ce qu'on va faire
maintenant !
Analysons le contenu :
Code : XML
1 <simpleviewergallery maxImageWidth="480" maxImageHeight="480" textColor="0xFFFFFF" frameColor="0xFFFFFF" frameWidth=
Beuh, ça veut dire quoi tout ça ?
Facile : ce sont les options paramétrables des diapos, je vais vous montrer comment ça marche.
Modifier les options des diapos
Ceci est une traduction de ce qui est écrit ICI (en anglais)
Nom
Fonction de l'option
maxImageWidth="480"
La largeur des photos en pixels (ici 480).
maxImageHeight="480"
Idem mais cette fois, c'est avec la hauteur (480 pixels aussi).
textColor="0xFFFFFF"
La couleur du texte (en valeur hexadécimale).
frameColor="0xFFFFFF"
Couleur des boutons de navigation et des cadres (en valeur hexadécimale aussi)
frameWidth="20"
La largeur du cadre entourant les photos (en pixels).
stagePadding="40"
La largeur de la marge entre les icônes de diapos et l'affichage des photos.
thumbnailColumns="3"
Le nombre de colonnes d'icônes de diapos dans la liste de sélection.
thumbnailRows="3"
Le nombre de lignes d'icônes de diapos dans la liste de sélection.
navPosition="left"
La position des icônes de sélections des diapos sur la page. Peut être Top , Bottom , Left , Right .
vAlign="center"
Alignement de la galerie par rapport à la page. Peut être Top , Bottom , Center .
hAlign="center"
Idem mais de façon horizontale. Peut être Left , Center , Right .
title="SimpleViewer Gallery" Tout bêtement le titre de la galerie.
enableRightClickOpen="true" Activer / désactiver le clic droit. true (oui) ou false (non)
backgroundImagePath=""
Le chemin de l'image de fond, qui peut être relatif ou absolu. (Dans le cas d'un lien relatif, l'image
de fond doit être dans le même répertoire que celui du fichier gallery.xml).
imagePath=""
Le chemin relatif au dossier "images". Si le dossier est dans le même répertoire que le fichier
gallery.xml, il est inutile d'en spécifier un autre.
thumbPath=""
Idem mais pour les icônes des diapos.
5 / 11
30/05/2012
Le fichier index.html
Certaines options pratiques comme l'emplacement du fichier gallery.xml peuvent être activées via la page index.html. Voici ce que l'on
peut voir en ouvrant ledit fichier :
Code : HTML - index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SimpleViewer</title>

<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
/* hide from ie on mac \*/
html {
height: 100%;
overflow: hidden;
}
#flashcontent {
height: 100%;
}
/* end hide */
body {
height: 100%;
margin: 0;
padding: 0;
background-image: http://i89.servimg.com/u/f89/13/29/76/34/fond511.jpg;
color:#ffffff;
font-family:sans-serif;
font-size:20;
}
a{
color:#cccccc;
}
</style>
</head>
<body>
<p><a href="#">Retour arrière</a></p>
<div id="flashcontent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer
<script type="text/javascript">
var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");
// SIMPLEVIEWER CONFIGURATION OPTIONS
// To use an option, uncomment it by removing the "//" at the start of the line
// For a description of config options, go to:
// http://www.airtightinteractive.com/simpleviewer/options.html
//fo.addVariable("xmlDataPath", "gallery.xml");
//fo.addVariable("firstImageIndex", "5");
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("preloaderColor", "0xFFFFFF");
fo.write("flashcontent");
</script>
</body>
</html>
On ne va garder que ce qui nous interesse, à savoir cette partie :
Code : JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "8", "#181818");
// SIMPLEVIEWER CONFIGURATION OPTIONS
// To use an option, uncomment it by removing the "//" at the start of the line
// For a description of config options, go to:
// http://www.airtightinteractive.com/simpleviewer/options.html
//fo.addVariable("xmlDataPath", "gallery.xml");
//fo.addVariable("firstImageIndex", "5");
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("preloaderColor", "0xFFFFFF");
fo.write("flashcontent");
</script>
Voici les différentes options supplémentaires et leur effet :
6 / 11
30/05/2012
Nom
fo.addVariable("xmlDataPath",
"gallery.xml");
Fonction de l'option
Donne le chemin relatif pour le fichier xml. Permet aussi de créer un fichier avec un nom
différent, à votre guise.
L'image d'acceuil quand on ouvre la galerie. Plus précisément la première image qui se charge
fo.addVariable("firstImageIndex", quand on ouvre l'album. Attention cependant, la numérotation démarre à 0. Si vous voulez
"5");
afficher la première image, renseignez 0 où ne l'activez pas .
fo.addVariable("langOpenImage", Permet d'afficher un texte personnalisé à la place de "Open image in a new window".
"Open Image in New Window"); Remplacez par ce que vous voulez.
fo.addVariable("langAbout",
"About");
De la même manière, remplacer le "About" par défaut par une autre formulation.
fo.addVariable("preloaderColor",
"0xFFFFFF");
Changer la couleur de la barre de chargement à l'ouverture de l'album. Renseigner une notation
hexadécimale.
Pour activer une option, ôtez lui son statut de commentaire en enlevant les deux slashs (//) devant la fonction.
En modifiant tout cela, vous pouvez changer radicalement l'apparence de votre album et lui donner un air plus personnel. Le mieux
étant encore de tester, d'expérimenter.
Voilà ce que j'obtiens après personnalisation :
C'est déjà plus esthétique, non ? Si on enlève les photos super méga laides de ma webcam, ça donne un rendu assez sympathique.
Félicitations ! Vous pouvez maintenant héberger votre album sur votre site web !
J'espère que vous ferez mieux que moi.
Retour en haut
E n v o y e r
v o t r e
a l b u m
s u r
l e
Vous avez terminé votre album et vous voulez le publier sur le web ? Rien de plus simple, je m'en vais vous expliquer la méthode.
Tout d'abord, il faut savoir qu'il y a plusieurs méthodes, et que certaines sont plus simples que d'autres :
Première méthode, l'envoi sur un serveur FTP.
Cette méthode est la plus simple si vous disposez d'un serveur web, mais elle a des inconvénients.
Je pars du principe qui dit que vous avez installé Filezilla ou n'importe quel autre client FTP et que vous savez l'utiliser.
Étape 1 : que faut-il envoyer ?
Pour que l'album soit pleinement disponible, vous devez envoyer tout le dossier simpleviewer sur votre serveur (le ficher readme est
inutile, vous n'êtes pas obligé de l'envoyer). Par exemple, envoyez le dans à la racine "www" de votre serveur web.
Étape 2 : comment afficher votre album.
Pour afficher votre album, il vous suffit simplement de créer un lien vers la page "index.html". le fichier xml contenu dans le dossier
fera le reste.
Par exemple, dans le cas précédent, le ficher se trouve à l'adresse "http://mondomaine.fr/simpleviewer/index.html".
7 / 11
w
30/05/2012
Dans les explications que je vous donne, les réglages par défaut du fichier xml n'ont pas été modifiés. Dans ce cas de figure,
vous devez vous arranger pour que les liens menant à vos dossiers correspondent à ceux contenus dans les options du
fichier xml (voir "Aller plus loin" ).
Avantages/inconvénients
Avantages
Inconvénients
Accessible depuis n'importe quel ordinateur... Donc accessible par n'importe qui.
Permet de mettre les dossiers à différents
emplacements sur le serveur.
Par défaut inaccessible hors connexion.
Simple à mettre à jour.
Nécessite un serveur web.
Deuxième méthode : l'envoi par fichier compressé.
Plus simple si vous n'avez pas de serveur web, mais moins pratique pour le visionnnage.
Dans ce cas de figure, ne touchez pas à la configuration du fichier xml. Ceci ne concerne que les modifications des chemins
des dossiers "images" et "thumbs". Laissez vides les champs concernant ces dossiers.
Étape 1 : Compresser votre dossier.
Tout d'abord, commencez par sélectionner votre dossier simpleviewer, puis compressez-le avec winrar ou winzip. Ouvrez l'archive et
vérifiez que tout vos fichiers ont été correctement compressés (deux précautions valent mieux qu'une
).
Étape 2 : uploader votre fichier compressé.
Il vous faut maintenant envoyer votre fichier compressé sur le web. Vous pouvez utiliser une plate-forme d'upload de fichiers comme
Megaupload. Envoyez le fichier et copiez le lien de téléchargement vers le fichier. Ensuite, envoyez le à vos amis !
Avantages/inconvénients
Avantages
Inconvénients
Accessible hors ligne une fois téléchargé et
décompressé.
Moins simple à mettre à jour.
Moins accessible par des personnes indésirables.
Ne permet pas de placer les dossiers "images" et "thumbs" où vous
voulez.
À vous de faire la part des choses entre ces deux méthodes. Voulez-vous créer un album de famille pour un usage plus privé ou créer
un album facilement accessible pour faire connaître votre groupe de musique ?
Voilà, vous savez maintenant envoyer votre album sur le web !
Retour en haut
Q . C . M .
À quoi sert Simple Viewer?
À créer un album photo.
À voir simplement.
À apprendre à nager.
Le dossier "Images" sert à stocker :
des miniatures de diapos ?
des images détournées par humour.com ?
des photos en taille réelles ?
Le fichier gérant les images de la galerie est codé :
en xHTML ?
8 / 11
30/05/2012
en XML ?
en JavaScript ?
en CSS ?
en SWF ?
Correction !
Statistiques de réponses au QCM
Retour en haut
J'espère vous avoir permis de réaliser ce que vous vouliez et n'oubliez pas que si vous avez des questions, vous pouvez me les
envoyer par MP.
Merci à Coyote et à Carma001 pour leur travail de validation et leurs commentaires précis.
Retour en haut
Partager
Retour en haut
97 commentaires pour "Utiliser un Simple Viewer pour son site"
Note moyenne : 2.60 / 4 (10 votes)
Pseudo
kiki22
Commentaire
# Posté le 31/12/2011 à 15:25:31
Bonjour,
j'utilise un site sous wordpress.
J'ai intégré simpleviewer au site et je souhaiterai obtenir le même résultat que sur ce site :
http://www.guillaumemenant.fr/
C'est à dire : Lorsque l'on clique sur une image, cela ouvre la gallerie en plein écran dans une nouvelle
fenêtre.
Le lien passe le paramètre FullScreenGallery, mais quand je teste chez moi, cela ne semble pas fonctionner
et je ne trouve pas de trace de ce paramètre dans les fichiers du plugin.
merci d'avance
philoult
# Posté le 12/01/2012 à 21:10:51
Bonjour,
à mon tour de demander de l'aide à l'utilisation de simple viewer.
j'ai 2 galeries chacune dans un dossier de mon site (agencement et archi) avec chacune son fichier d'index
(agencement.html et decoration-archi.html).
A la racine de mon site j'ai mon fichier index.php.
J'ai un menu basique avec 2 bouton et je fais un include php dans ma page index pour appeler mes galeries
via mon menu.
J'ai un soucis de galllery xml not found.
e tourne en rond dessus depuis plusieurs jours et je trouve pas de solution, mais je suis sur de trouver mon
bonheur parmio vous.
Merci beaucoup d'avance.
Code : PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div id="menu">
<a href="index.php?page=Agencement" title="Agencement"><button>Agencement</button></a>
<a href="index.php?page=décoration-archi" title="deco"><button>Décoration Architecture</button></a>
</div>
<div id="contenu">
<?php
header("Content-type: text/xml");
echo '<?xml version="1.0" encoding="UTF-8"?>';
?>
<?php
$pageOK = array('décoration-archi' => 'décoration-archi/décoration-archi.html',
'Agencement' => 'Agencement/Agencement.html');
if ( (isset($_GET['page'])) && (isset($pageOK[$_GET['page']])) ) {
include($pageOK[$_GET['page']]); // Nous appelons le contenu central de la page
}
?>
9 / 11
22 ?>
23 </div>
30/05/2012
la page test est www.d-zign.biz/test/index.php?page=Agencement
Nerfhi
# Posté le 31/01/2012 à 14:46:31
Bon tuto
Merci d'avance et bonne journée
graph75
# Posté le 09/02/2012 à 11:38:03
Salut à tous bon voila j'ai trainé sur pas mal de sites avec ou sans tutos avant de trouver comment intégrer
les gallerie de simpleV. En rélatité c'es très simple juste les informations pour le faire sont éparpillées sur le
net ce qui n'est oas évident.
Admettons votre page html faite sur dreamCS999 est enregistré dans le dossier mon site ce qui nous donne
Mon site
>index.html
>dossier JPG
>dossier galerie
>contact.html
etc.
index et contact vous savez ce que c'est, le dossier JPG (à ne pas surtout pas nommer "image" vous verrez
pourquoi après) vous mettez vos docs à importer dans les différentes pages (images, anims, ...)
Ensuite vous faites votre gallerie sur simpleV et a la fin il vous demande de l'enregister. IL vous suffit
d'enregistrer, pour cet exemple dans le dossier galerie votre SV. Le logiciel génrera différents docs dont
deux dossier et un s'appelant image (d'ou le fait d'éviter d'appeler votre dossier même placé a la racine
"image")
Sur la même fenêtre vous avez en pied de page un code :
"
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "222222", true);
});
</script>
<div id="sv-container"></div>
"
NE RECOPIEZ PAS CELUI LA PRENEZ CELUI GéNéré pas le logiciel
Recopiez ce code à l'endroit ou vous souhaitez que cette galerie apparaisse et faites les modifs de taille si
nécessaire
A la fin dans votre dossier vous devriez avoir ça :
Mon site
>index.html
>dossier JPG
img1.jpg
img1.jpg
img1.jpg
img1.jpg
>dossier galerie
doc.xml
dossier images
d'autres dossiers et aussi le SWF
>contact.html
Voilà grosso merdo comment faire, si jamais vous n'avez pas compris dites le moi je tenterais d être plus
explicite
baudry
# Posté le 13/02/2012 à 23:29:47
Bonsoir Pour ma part j'essaie de faire une page avec toutes mes galeries d'images sans succès mon
intention est de faire un switch php chaque partie incluant une galerie
Code : Autre
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Je ne sais pas s'il y a des habitués des galeries d'images en tout cas mon idée est de pouvoir faire une page avec u
<!DOCTYPE html>
<html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<?php
// je met ici le traitement en php
$photographies=$_GET['gallery'];
if (empty($gallery) or !(is_numeric ($gallery) ) ) {
$photographies = "1";
}
switch ($gallery) {
case 1 :
$html_title= 'White Night' ;
$titre= 'White Night' ;
$comment= '<p><em>White Night</em> This is a series of photographs made between 1:00
$simpleview=' 
<script type="text/javascript" src="WhiteNight/svcore/js/simpleviewer.js"></
script>
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '100%', '100%', '222222', true);
10 / 11
23
simpleviewer.load('sv-container', '100%', '100%', '222222', true);
24 });
25 </script>
26 <div id="sv-container"></div>
27 ';
28
break;</code> et a
29 Si certaines personnes ont des idées je suis preneur.
30/05/2012
Voir tous les commentaires
Ce tutoriel a été corrigé par les zCorrecteurs.
Le Site du Zéro
Simple IT
Contacts
Partenaires
Plan du site
L'équipe
Mentions légales
Accessibilité
Livre d'or
Suggestions
L'entreprise
On recrute !
Notre blog
Espace annonceurs
Espace presse
Nous contacter
Promouvoir le site
Signaler un bug
Hébergement web
Correction tutoriels
Suivez-nous
Flux RSS News, Cours, Blog
Twitter
Facebook
Google+
11 / 11

UtiliserSimple Viewer pour son site

Transcription

Documents pareils

Vendredi 13 janvier 2017 Ecrire dans un document PDF : utilisation

POUR TELECHARGER LA VISIONNEUSE Note Worthy Composer

1° recherchez 2° Vous êtes sur la page d`accueil de Microsoft Cor

2 + 2 personnes, 50 m2 Platano est un appartement

Description Monter un album de photos (Scrapbooking) Comment

DIAM Viewer - Fondation ARCAD

Imprimer

Programmes 2016-2017