Bloc Titre

Pro-Gz

Bloc reperage

Navigation : DKDesign >

Bloc Navigation Principale

Graphz Movz Photoz Zic XPz Talkz Don-Lodz Pro-Gz Tutoz Libz Linkz

Bloc accueil 'Pro-Gz DK-Gallery'

DK-Gallery

DK-Gallery est un projet de galerie d'images en Technologie Flash destiné principalement pour l'intégration Web. Je ne suis pas développeur de formation, mais ma curiosité et mes quelques connaissances avancées en programmation AS3 me permettent de rendre possible ce projet. Le but étant avant tout de me faire un outil relativement simple d'utilisation mais très souple étant très exigeant lorsqu'il s'agit de créer du contenu / conteneur. Je mets à disposition mon outil en espérant qu'il serve à d'autres et même à éveiller l'esprit critique de certains ☺.

Bloc Contenu 'Pro-Gz DK-Gallery'

DK-Gallery (2.0.5) :

Démonstration :

Dans cette démonstration j'ai paramétré la taille du Flash^® indépendamment de la taille de la galerie d'image, j'ai également précisé une taille de vignette pour changer de celle par défaut (hauteur du document flash -20px).

Spécifications

Cette galerie d'image Flash s'intègre facilement dans une page Html classique ou dans un contenu Flash. Dans cette version 2.0.5, DK-Gallery va directement chercher dans un répertoire spécifié les images (format Jpeg, png, gif) à insérer dans la galerie. Il est donc possible d'afficher autant d'images que l'on souhaite, l'outil génèrera autant de page qu'il faut à condition d'avoir placé un style de Pagination. Il faut savoir que les images sont, pour le moment, chargées par ordre des noms de fichier, il est donc facile d'ordonner vos images comme vous le désirez en mettant un numéro de classement dans le nom du fichier image (exemple : '01_image_tropiques.jpg'). Dans cette version, il y a également une gestion des proxis d'image, ce qui veut dire que l'on peut mettre des images de plus petite taille (pour charger plus vite la galerie) qui, lorsque l'on clique dessus, charge la grande image correspondante. Dans cette nouvelle version 2.0.5 j'ai amélioré le loading des images pour accélérer le chargement, inversé l'ordre des images pour avoir les images dans l'ordre chronologique de A-Z dont la page de départ est Z. J'aiégalement ajouté l'affichage du nom du fichier dans la visionneuse pour pouvoir identifier les photos visionnées.

Requis

Adobe Flash Player 10
Serveur PHP5

Mise en place

Pour intégrer DK-G dans votre structure, il est important de comprendre comment celle-ci fonctionne et connaître ainsi sa structure.

Les éléments :

Les noms de dossier et de fichiers sont à titre indicatif

Object Flash DK-G - 'dk_gallery_205.swf'
Fichier d'initialisation - 'init.php'
Dossier d'image - 'dkg_pictures'
Boite à outils PHP - 'scripts_php'
Boite à outils Javascript - 'scripts_js'

Intégration HTML

1. Placez le fichier d'initialisation à la racine de votre site Web (www.mondomaine.com/init.php')
2. Placez l'object Flash DK-Gallery dans un dossier flash par exemple (www.mondomaine.com/flash/dk_gallery_204.swf')
3. Placez le dossier Boite à outils PHP à la racine de votre site Web (www.mondomaine.com/scripts_php/')
4. Placez le dossier Boite à outils Javascript à la racine de votre site Web (www.mondomaine.com/scripts_js/')
5. Créez un dossier dans lequel vous mettrez vos images destinées à la galerie (www.mondomaine.com/dkg_pictures/')
6. Dans le fichier d'initialisation vous allez créer l'objet DK-Gallery en PHP5 comme suit :
1. /////création de notre objet galerie "main"/////
2. /////LIGNES INDISPENSABLES/////
3. $main = new DKGallerySetup('main');
4. /////LIGNES OPTIONNELLES/////
5. $main->source = dossier où se trouve les images de la galerie depuis ce fichier. Par défaut : './scripts_php/'
6. $main->PHPtoolsFolder = dossier où se trouve les scripts PHP depuis ce fichier. Par défaut : './dkg_pictures/'
7. $main->width = largeur de la galerie. Par défaut : 200
8. $main->height = hauteur de la galerie. Par défaut : 50
9. $main->itemsSize = taille maximum des vignettes. Par défaut : 50
10. $main->navyStyleFile = fichier swf avec le style de pagination
11. $main->itemsOnClick = script a effectuer lors du click sur les images. Ajoutez [IMAGE URL] pour remplacer l'url de l'image dans la ligne de code.
  
  exemple1 : "[IMAGE URL]"
  exemple2 : "javascript:openWindow('[IMAGE URL]','myWindow','status=1,toolbar=1');" //Si vous utilisez un javascript.
  exemple3 : "javascript:flashLightbox('[IMAGE URL]');" //Si vous utilisez Lightbox.
  exemple4 : "dkviewer:hideUnhide,viewer" //Si vous utilisez la visionneuse DK-Gallery (hideUnhide=fonction javascript;viewer=identifiant de la visionneuse).
  exemple5 : "close" //Action qui permet de fermer la visionneuse lorsqu'elle est plein écran.
12. $main->proxies = dossier vers lequel aller chercher les images proxies (Il est donc possible d'utiliser la variable $dkg_imagesFolder, si le dossier des proxis est dans le dossier des images)
13. $main->itemsFitType = la façon dont les images apparaissent (0 = étirée ; 1 = auto-ajustée ; 2 = largeur rognée ; 3 = hauteur rognée ). Par défaut : 3
14. $main->startMode = la façon dont la galerie démarre (hidden = invisible (utile pour la vidionneuse pleine écran) ; load = chargement ). Par défaut : load
15. Laissez donc les scripts qui suivent qui permettent la communication avec la Galerie
7. Lors de l'insertion de l'animation Flash dans votre code que ça soit par la méthode classique ou par swfObject, ajouter les variables : initFile qui indique à la galerie photo ou se trouve le fichier d'initialisation et id qui est l'identifiant. Cela donnera donc une ligne comme suit : <param name="FlashVars" value="&initFile=../init.php&id=main" />
8. Pour la visionneuse, vous avez besoin d'inclure le Javascript tools.js fournis dans l'archive qui permet d'afficher ou non un calque avec la ligne de code suivante : <script src="./scripts_js/tools.js" language="javascript" ></script>
9. Créez votre visionneuse en mettant un deuxieme DK-Gallery en plein écran dans un DIV nommé comme l'identifiant de cette gallery (par exemple viewer)

Quoi de neuf ?

Dans cette version j'ai effectué quelques améliorations qui en feront un outil un peu plus complet.

Ordre inversé
Affichage du nom du fichier image en visionneuse
Accélération de l'outil et optimisation du chargement

Et après ?

Dans les versions futures j'ai prévu ces quelques améliorations qui en feront un outil plus complet.

Version ASP
Précharger les photos haute résolution dans les vignettes
Gestion de l'ordre des photos
Navigation avancée avec affichage de pagination
Prise en charge d'une base de donnée
Ajout de styles de pagination
Ajout d'un élément texte aux icône (titre, date, index...)
Prise en charge de différents type d'élément (vidéo, texte, flash, html... outil additionnel)
Prise en charge d'une bande son (outil additionnel)
Personnalisation des animations
Compatible XHTML
Boite à coché de sélection multiple (caddie)

Dernière version (2.0.5)

dkgallery_2.0.5.zip...... 1013 Ko

Pro-Gz

DK-Gallery