Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [Tuto] NanoGallery avec galerie de photos locale
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[Tuto] NanoGallery avec galerie de photos locale

 Répondre Répondre Page  123 4>
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 4634
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [Tuto] NanoGallery avec galerie de photos locale
    Envoyé : Aug 27 2016 à 1:26pm
Préparation: (OpenElement est chatouilleux avec certains caractères dans les noms de fichiers il faut donc en renommer certains)

Créez un site OpenElement, disons TestNano

Téléchargez nanoGALLERY-5.10.3.zip du site: http://nanogallery.brisbois.fr/
Copiez le dossier nanoGALLERY-5.10.3 (inclus dans le fichier compressé zip) dans le dossier OpenElement\TestNano
Renommez le dossier nanoGALLERY-5.10.3 -> nanoGALLERY
Supprimez le dossier nanoGALLERY\third.party (OpenElement fournit déjà jQuery)
Supprimez le dossier nanoGALLERY\Demonstration

Téléchargez nanoPhotosProvider-master.zip du site: https://github.com/Kris-B/nanoPhotosProvider
Copiez le dossier nanoPhotosProvider-master (inclus dans le fichier compressé zip) dans le dossier OpenElement\TestNano
Renommez le dossier nanoPhotosProvider-master -> nanoPhotosProvider
Effacez le contenu du dossier nanoPhotosProvider\nanoPhotosContent et remplacez le par votre galerie de photos
Supprimez le dossier nanoPhotosProvider\Demonstration
Remplacez le contenu du fichier nanoPhotosProvider\nanoPhotosProvider.cfg avec:
[config]
fileExtensions="jpg|jpeg|png|gif"
contentFolder="/nanoPhotosContent"
sortOrder="asc"
titleDescSeparator="$$"
albumCoverDetector="@@@@@"
albumBlackListDetector="!!!!!"
imageBlackListDetector="_hidden"

[thumbnailSizes]
height=250
crop=false
Note:
L'auteur de la nanoGallery présente sur son site une foule de possibilités pour la configuration, je me suis contenté de puiser dedans pour faire cet exemple.  Pour personnaliser votre galerie, vous devrez donc y faire un peu de lecture et quelques essais.
Retournez dans le projet TestNano avec OpenElement 

Créez une page
Propriété, Plein Écran

Insérez un panneau d'éléments
mode relative
dépassements visibles
largeur 80%
hauteur auto
200 du haut
centré en largeur dans la page
Insérez un bloc de code visuel dans ce panneau
contenu: 
<div id="nanoGallery2"></div> 
centré dans le panneau d'éléments
donnez-lui une largeur de 100%

Insérez un bloc de code
Type HTML
Position Header
contenu:
<link href="nanoGALLERY/css/nanogallery.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="nanoGALLERY/dist/jquery.nanogallery.min.js"></script>
Insérez un bloc de code 
Type Javascript
Position Endbody
Contenu:
$(document).ready(function () {
var myColorSchemeViewer = {
background: 'rgba(1, 1, 1, 0.75)',
imageBorder: '15px solid #f8f8f8',
imageBoxShadow: '#888 0px 0px 20px',
barBackground: '#222',
barBorder: '2px solid #111',
barColor: '#eee',
barDescriptionColor: '#aaa'
};
var myColorScheme = {
navigationbar: {
background: '#f00',
border: '1px dotted #555',
color: '#ccc',
colorHover: '#fff'
},
thumbnail: {
background: '#ffffff',
border: 'none',
labelBackground: 'transparent',
labelOpacity: '0.5',
titleColor: '#ffffff',
descriptionColor: '#eee'
}
};
$("#nanoGallery2").nanoGallery({
thumbnailWidth: 'auto',
thumbnailHeight: '250',
kind: 'json',
jsonProvider: 'nanoPhotosProvider/nanoPhotosProvider.php',
colorScheme: myColorScheme,
thumbnailAlignment:'center',
thumbnailHoverEffect:'scale120,labelAppear,labelOpacity50',
thumbnailLabel: {
position: 'overImageOnMiddle',
display: true,
displayDescription: true,
hideIcons: true,
align: 'center'
    },
i18n: { 
thumbnailLabelItemsCountPart1: '',
thumbnailImageDescription: 'click to open'
},
colorSchemeViewer: myColorSchemeViewer
});
});
Note sur la police de caractères:

La police de caractères par défaut est dictée dans les fichiers:

\nanoGALLERY\css\nanogallery.css
\nanoGALLERY\css\nanogallery.woff.css.

Cette police contient tous les icônes utilisés par la galerie alors il ne faut pas la remplacer.  

Par contre, il est possible d'y ajouter des polices spécifiques en ajoutant le code CSS suivant:

/* Vignettes */
.nanogallery_theme_default .nanoGalleryContainerParent {
font-family: 'votre choix de police'; /* Changer la police de caractères */
font-size: 3em ; /* Changer la grosseur de caractères par défaut c'est 1.0em*/
}

/* Internal viewer */
.nanogallery_theme_default #nanoGalleryViewer {
font-family: 'votre choix de police'; /* Changer la police de caractères */
}

Merci à Bridet dont le travail a été source d'inspiration pour ce tuto

2016-08-28 Révision: Renommez third.party remplacé par: Supprimez le dossier third.party
2016-08-29 Révision: Nettoyage des lignes inutiles.
2016-11-03 Révision: Note sur les polices de caractères ajoutée.
2016-11-04 Révision: Comment appliquer une nouvelle police de caractères via du code CSS



Edité par Hobby001 - Jan 31 2017 à 1:37pm
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. <a href="http://denislafrance.net" rel="nofollow">http://denislafrance.net</a>
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Feb 27 2013
Pays: France
Status: Inactif
Points: 538
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Aug 27 2016 à 9:46pm
Cher Hobby001,

MERCI, MERCI, MERCI, mille fois merci.

J'ai suivi vos instructions à la lettre, et ...
CA FONCTIONNE, enfin, car je commençais vraiment à désespérer.
Il me reste à voir les détails de configuration, comme vous l'indiquez dans votre tutoriel.

J'espère que d'autres que moi pourrons profiter de votre démonstration, et encore merci pour le temps que vous avez passé à cet exercice.

Et merci à Bridet qui m'a fait découvrir nanoGallery.

Bon dimanche à tous.


Edité par jjb1 - Aug 27 2016 à 9:56pm
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 4634
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Aug 28 2016 à 12:44pm
Révision du tuto
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. <a href="http://denislafrance.net" rel="nofollow">http://denislafrance.net</a>
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5382
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Aug 29 2016 à 7:50am
Merci Hobby001, pour ce tutoriel bien détaillé ;-)
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Feb 27 2013
Pays: France
Status: Inactif
Points: 538
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Aug 30 2016 à 4:43pm
Encore merci à Hobby001,

La seule option que j'ai ajoutée, pour mon usage propre, est la suivante :

$("#nanoGallery2").nanoGallery({
thumbnailWidth: 'auto',
thumbnailHeight: '150',
kind: 'json',
// jsonProvider: 'http://photos.autreches.free.fr/nanoPhotosProvider/nanoPhotosProvider.php',
jsonProvider: 'nanoPhotosProvider/nanoPhotosProvider.php',
album:'Trav05', /*nom de l'album dans ...Provider/...Content*/
... ...
Trav05 est simplement un sous répertoire de nanoPhotosContent. Ceci permet de n'afficher qu'un seul album à la fois.

A part cela, j'ai lu sur le site de Bribois la chose suivante (traduction google) :
"S'il vous plaît noter que les vignettes générées ne sont jamais purgés, de sorte que vous pouvez supprimer les _thumbnailsdossiers pour forcer une nouvelle génération."

Mais je ne trouve pas les vignette en question. Quelqu'un sait-il comment on fait le nettoyage.
D'avance merci.
PS Le temps de chargement des photos est beaucoup plus lent qu'avec feu Picasa


Edité par jjb1 - Aug 30 2016 à 4:43pm
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 4634
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Aug 30 2016 à 5:17pm
Pour les photos, assurez-vous de les remanier pour en diminuer la grosseur et même la résolution.   Pour ça, deux solutions gratuites: Gimp et paint.net.

La dernière version de nanoPhotoprovider ne semble pas faire de vignettes.




Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. <a href="http://denislafrance.net" rel="nofollow">http://denislafrance.net</a>
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Feb 27 2013
Pays: France
Status: Inactif
Points: 538
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Aug 30 2016 à 6:32pm
Merci Hobby001,

Voilà pourquoi je ne trouvais pas les vignettes.
Pour le poids des photos, j'ai déjà essayé de réduire la taille. Je vais voir pour diminuer la résolution.

Merci encore.
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 4634
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Aug 30 2016 à 6:36pm
Je trouve que Gimp fait un meilleur travail avec la résolution
Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros. <a href="http://denislafrance.net" rel="nofollow">http://denislafrance.net</a>
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Feb 27 2013
Pays: France
Status: Inactif
Points: 538
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer jjb1 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Aug 31 2016 à 8:11pm
J'utilise une ancienne version de photoshop (7) qui ne va pas mal.
Mais je n'ai pas le traitement par lot, c'est donc un peu fastidieux lors de la constitution des albums.

En jouant sur la taille (4288 passé à 1500), la résolution (300dpi passé à 100) et en dégradant la qualité jpeg à la sauvegarde, je passe, par exemple, de 7040ko à 186ko, sans que la qualité de l'image en pâtisse outre mesure sur internet. 

C'est encore un peu lent, mais J'ai pu ainsi améliorer grandement les temps de chargement des vignettes.
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Aug 14 2009
Pays: France
Status: Inactif
Points: 9364
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Aug 31 2016 à 10:45pm
passes à 1280 et 72dpi déjà.
Haut de la page
 Répondre Répondre Page  123 4>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne