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.

WEBDEV - Afficher une image dans un champ de saisie

Je viens de visiter une site sympa ou le formulaire de contact m'a plu. J'ai donc décidé de le refaire en WEBDEV.

Objectif réaliser ceci :

Dans WEBDEV on commence par créer deux cellules. La première avec un fond blan uni et la seconde avec les paramètres suivants :

Ensuite il faut définir la couleur de CEL_Form et mettre l'image à droite :

Puis ajout des champs de saisie et pour chaque champ de saisie on créer un style au projet

et on place le code CSS :

dans chaque champ de saisie on aura le code css suivant :

background-image: url(c-icons.png);

background-repeat: no-repeat;

padding-left: 20px;

border: 1px solid #BFBFBF;

puis pour chaque champ on ajoutera un code css spécifique :

Nom : background-position: 3px 4px;

Email : background-position: 3px -15px;

Site web : background-position: 3px -37px;

sujet : background-position: 3px -57px;

cette ligne idique quelle partie de l'image il faut afficher dans le champ, car on fait référence qu'a une seule image c-icons.png :

C'est presque fini. Il reste le champ de saisie pour le messge. Pour celui-ci on aura qu'une ligne CSS à mettre :
border: 1px solid #BFBFBF;

Et pour le bouton le style CSS sera le suivant :

color: white;

background: #2E6DA3;

border: none;

On pourrait presque se passer du code CSS et mettre le tout dans les ongles texte et fond su style.

ATTENTION : les modifications de style CSS ne seront visible qu'en exécution...

Style CSS et WebDev 11

Comme ça n'est pas précisé dans la doc, voici comment mettre du code CSS dans la description d'un champ.

Prenons le champ lien, par exemple. Il faut aller dans la description du lien dans l'onglet Style.
Puis cliquer sur "Editer".
Ensuite dans la description du style dans l'onglet CSS, on va mettre un code css de survol du lien.
Sélectionner Survol et mettre le code (exemple) :
color:#411;
background:#aaa;
border-bottom: 1px solid #555;

Il faut oublier la syntaxe : "a{ }" et mettre que les attributs.
Voilà un effet de survol en CSS.