BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - Tuto nanoGallery
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Sujet ferméTuto nanoGallery

 Répondre Répondre Page  123 13>
Auteur
Message
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Lien Direct à ce Post Sujet: Tuto nanoGallery
    Envoyé : 28 Juin 2016 à 11:24

L'avantage de nanoGallery est que vos albums peuvent être mis à jour facilement depuis n'importe où et n'importe quel support par un copier-coller sans devoir mettre à jour une galerie dans OE.
Idéal donc pour ceux qui rajoutent ou enlèvent régulièrement des images.

Pour utiliser nanogallery il faut idéalement avoir d'abord créé un ou plusieurs albums sur google+ ou Picasa ou Flickr ou même des albums que vous hébergez sur votre serveur

Procédure pour Google+ (la seule que j'aie faite):

1) Créer un compte puis suivre cette procédure :

https://support.google.com/sites/answer/161929?hl=fr

Créez votre album, vous aurez donc deux séries de numéros, le premier identifiant votre compte, le second un album donc chaque album a son ID (ils apparaissent dans la barre d'URL).

https://plus.google.com/photos/11............21/album/61.............61

2) Allez sur le site :

http://nanogallery.brisbois.fr/

Suivre le lien en bas de page qui correspond aux codes relatifs à votre type d'album

Dans OE vous positionnez un élément bloc visuel là où vous le voulez dans un panneau d'éléments ( redimensionnement automatique et mode d'affichage relative) et insérez ce code:

<div id="nanoGallery2"></div>

Dans OE :

Propriétés : Redimensionnement Largeur et hauteur

Styles : Hauteur j'ai mis 40px (mais ça s'adaptera), Largeur 80% selon la place que vous voulez que ça prenne dans le panneau

Vous insérez ensuite un élément bloc de code source (code nano1), position Header, Type Otherscript :

<link href="nanoGALLERY/css/nanogallery.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="nanoGALLERY/dist/jquery.nanogallery.min.js"></script>

Vous insérez enfin un élément bloc de code source (code nano2), position Startbody, Type Otherscript :

$(document).ready(function () {

$("#nanoGallery2").nanoGallery({

kind: 'votre hébergeur de photos',

userID: 'copiez ici votre ID de compte'

});

});

3) Allez sur la page :

http://nanogallery.brisbois.fr/#examples

Chargez la licence, dézippez-la et sauvez-la directement à la racine de votre fichier OE sous le nom nanoGALLERY

4) Customisez la présentation de votre galerie:

Voilà la mienne (donc vous complétez votre code nano2 à votre guise) pour que ce soit responsive:

<script>

$(document).ready(function () {

$("#nanoGallery2").nanoGallery({

kind: 'googleplus',

userID: 'mon ID de compte',

album: 'mon ID d'album',

thumbnailHeight: 'auto', la hauteur des vignettes

thumbnailWidth: '100C XS40C SM75 LA125 XL200', les largeurs minimum et maximum des vignettes selon la taille du navigateur

thumbnailGutterWidth: 0,

thumbnailGutterHeight: 0,

thumbnailHoverEffect : 'labelSlideUp,borderLighter' , l'effet quand on passe sur la vignette

});

});

</script>

Il y a des dizaines de customisations possibles que je ne maîtrise pas ni ai essayées.

Le résultat ici : www.gite.vervoz.be (suivre photos)



PS : Il y a un dossier en plus appelé "nanoPhotosProvider" qui je pense se crée seul car je n'en vois mention nullepart dans la procédure. Est-ce possible? Help à l'équipe.

PS2 : Je n'arrive pas à gérer la police du tuto (fait avec OO)

PS3 : Il y a un sous dossier qui s'appelle third.party (qui, pour ce que je comprends, contient la version de js) , OE ne l'aime pas, il me fait la remarque chaque fois que j'ouvre le projet mais sans plus d'inconvénient.







Edité par Bridet - 29 Juin 2016 à 08:47
Haut de la page
Maurice306 allez vers le bas
Senior Member
Senior Member


Depuis le: 20 Avr 2008
Pays: France
Status: Inactif
Points: 2066
Lien Direct à ce Post Envoyé : 28 Juin 2016 à 17:02
Thumbs Up tu es une championne Bridet, y a plus qu'à faut con ....... Clap
La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 848
Lien Direct à ce Post Envoyé : 28 Juin 2016 à 17:21
Merci Bridet pour ce Tuto qui tombe à pic pour moi. Je planche.

Petite question : 4) customisation - où placer ce script ?
Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Lien Direct à ce Post Envoyé : 28 Juin 2016 à 17:37
il est déjà placé (code nano2) , vous pouvez le compléter à l'envi (revoir la page http://nanogallery.brisbois.fr/#docGeneralSettings)
Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 848
Lien Direct à ce Post Envoyé : 28 Juin 2016 à 18:52
Vu, merci.
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Lien Direct à ce Post Envoyé : 30 Juin 2016 à 15:02
Message posté par Bridet Bridet a écrit:


Vous insérez enfin un élément bloc de code source (code nano2), position Startbody, Type Otherscript :

$(document).ready(function () {

$("#nanoGallery2").nanoGallery({

kind: 'votre hébergeur de photos',

userID: 'copiez ici votre ID de compte'

});

});

Ne serait-ce pas javascript?


Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Lien Direct à ce Post Envoyé : 30 Juin 2016 à 15:35
Peut-être mais si j'ai mis otherscript à l'époque c'est que ça allait mieux comme ça ;-D
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Lien Direct à ce Post Envoyé : 30 Juin 2016 à 15:58
Message posté par Bridet Bridet a écrit:

PS : Il y a un dossier en plus appelé "nanoPhotosProvider" qui je pense se crée seul car je n'en vois mention nullepart dans la procédure. Est-ce possible? Help à l'équipe.

nanoPhotosProvider est une application php qui permet de mettre les albums photos à l'intérieur du site au lieu d'utiliser les " google+ ou Picasa ou Flickr " de ce monde.

Étant un peu "Control Freak", je préfère tout mettre dans mon site.  J'ai donc commencé cette intégration tranquillement.  À date, ça s'annonce bien.


Haut de la page
jjb1 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 27 Feb 2013
Pays: France
Status: Inactif
Points: 848
Lien Direct à ce Post Envoyé : 30 Juin 2016 à 16:08
Message posté par Hobby001 Hobby001 a écrit:

Étant un peu "Control Freak", je préfère tout mettre dans mon site.  J'ai donc commencé cette intégration tranquillement.  À date, ça s'annonce bien.

Certes, mais, de ce que j'ai compris, pour insérer des dizaines de photos, la procédure semble un peu laborieuse, à moins que je n'ai pas bien saisi le procédure, ce qui pourrait être très vraissemblalbe.

Haut de la page
Bridet allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: 13 Dec 2013
Pays: Condroz
Status: Inactif
Points: 5049
Lien Direct à ce Post Envoyé : 30 Juin 2016 à 17:14
Message posté par Hobby001 Hobby001 a écrit:

Message posté par Bridet Bridet a écrit:

PS : Il y a un dossier en plus appelé "nanoPhotosProvider" qui je pense se crée seul car je n'en vois mention nullepart dans la procédure. Est-ce possible? Help à l'équipe.

nanoPhotosProvider est une application php qui permet de mettre les albums photos à l'intérieur du site au lieu d'utiliser les " google+ ou Picasa ou Flickr " de ce monde.

Étant un peu "Control Freak", je préfère tout mettre dans mon site.  J'ai donc commencé cette intégration tranquillement.  À date, ça s'annonce bien.



Oui j'ai vu qu'il y avait du php dans ce dossier mais je ne comprends pas comment il est arrivé à la racine de mon site (pas de manoeuvre l'intégrant) est-ce possible que google+ ou nanoGallery puissent y intégrer du code?
Haut de la page
 Répondre Répondre Page  123 13>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.