mercredi, mars 19, 2014

WEBDEV 19 - Intégration d'une gallerie d'image avec JQuery

On trouve beaucoup de de gallerie d'image sur le web. La plus part utilise JQuery et d'autres bibliothèques JavaScript.
J'ai choisi "Galleria", une version demo est téléchargeable sur le le site http://galleria.io/

Pour intégrer la gallerie d'image "galleria" dans WEBDEV 19, il faut commencer par télécharger sur le site de galleria le zip : galleria-1.3.5.zip. il contient les JS, CSS et une page HTML de démo.

mettre dans le répertoire _WEB/FR/gallerie , les fichiers suivants :



Dans WEBDEV, mettre un champ HTML puis dans le d'initialisation de la page :


ensuite mettre le code HTML de la demo de galleria

en fait il faut mettre tout le contenu de la div "galleria" du fichier classic-demo.html

Pour finir mettre dans le code navigateur de chargement de la page (onload) l'appel de la fonction initialise() qui faut déclarer en procédure local navigateur (code en JS) :

function initialise()
{
// Load the classic theme
Galleria.loadTheme('./gallerie/galleria.classic.min.js');

// Initialize Galleria
Galleria.run('#galleria', {
height: parseInt($('#galleria').css('height')),
wait: true
});
}

Il reste plus qu'à personnaliser le code HTML du champ HTML.

Modèle de champ avec Menu contextuel

Dans un modèle de champ si vous ajoutez un menu contextuel, ce dernier sera copié dans la fenêtre lors de l'insertion de champ modèle de champs. Or lorsque l'on supprime ce champ modèle de champ, le menu contextuel n'est pas supprimé de la fenêtre par conséquent, dans certain cas, des erreurs de compilation peuvent apparaître sur des variables globales du modèle champ.

Astuce, dans le menu contextuel, dans le code des options de menu, ne pas utiliser directement les variables globales du modèle. Il faut mieux faire l'appel du procédure local au modèle qui effectuera le traitement.

En cas de suppression du modèle de champs dans la fenêtre, ne pas oublier du supprimer également le menu contextuel.