Pour	  créer	  un	  bandeau	  de	  vignettes	  qui	  ouvre	  une	  lightbox	  Vous	  allez	  dans	  l’admin	  du	  site	  ...
Une	  autre	  fenêtre	  s’ouvre	  et	  elle	  va	  vous	  permettre	  de	  charger	  de	  nouvelles	  images	  de	  votre	...
 	  Lorsque	  vous	  avez	  chargé	  ou	  choisi	  votre	  vignette,	  double	  cliquer	  dessus.	  La	  fenêtre	  se	  fe...
Vous	  cliquez	  sur	  OK	  pour	  valider	  les	  propriétés	  et	  votre	  image	  apparaît	  dans	  le	  tableau.	  	  ...
 	  Nous	  retrouvons	  alors	  la	  fenêtre	  de	  la	  gestion	  des	  images	  et	  nous	  alons	  pouvoir	  charger	  ...
 	  Vous	  cliquez	  sur	  OK.	  	  Il	  ne	  vous	  reste	  plus	  qu’à	  renouveler	  la	  démarche	  sur	  les	  autres...
 	  Le	  code	  html	  pour	  une	  colonne	  vide	  s’écrit	  ainsi	  :	  <td>&nbsp	  ;</td>	  Faites	  attention	  de	  ...
Prochain SlideShare
Chargement dans…5
×

Pour créer un bandeau de vignettes qui ouvre une lightbox

1 296 vues

Publié le

tutoriel pour créer une lightbox sur un site spécifique

Publié dans : Développement personnel
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 296
Sur SlideShare
0
Issues des intégrations
0
Intégrations
251
Actions
Partages
0
Téléchargements
0
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Pour créer un bandeau de vignettes qui ouvre une lightbox

  1. 1. Pour  créer  un  bandeau  de  vignettes  qui  ouvre  une  lightbox  Vous  allez  dans  l’admin  du  site  puis  vous  ouvrez  la  page  où  vous  voulez  créer  le  diaporama  lightbox.  Pour  cet  exemple  nous  allons  aller  dans  «  Ardoise  ».      Pour  mettre  en  place  le  dispositif  nous  allons  tout  d’abord  créer  un  tableau  spécifique.  Vous  cliquez  sur  cette  icône  :    ce  qui  va  générer  un  tableau  prêt  à  l’emploi.    Vous  sélectionnez  une  des  colonnes  du  tableau  puis  vous  cliquez  sur  l’icône  pour  insérer  une  image  :    Une  fenêtre  s’ouvre  et  vous  allez  ensuite  «  Parcourir  le  serveur  ».    
  2. 2. Une  autre  fenêtre  s’ouvre  et  elle  va  vous  permettre  de  charger  de  nouvelles  images  de  votre  ordinateur  à  votre  site  ou  de  reprendre  des  images  pour  les  afficher  sur  votre  site.        Pour  vous  faciliter  la  tâches,  nous  vous  conseillons  de  créer  des  rubriques  et  sous  rubriques  afin  de  ranger  vos  images  en  fonctions  de  vos  besoins.  Par  exemple,  une  rubrique  vignettes  pour  les  vignettes  de  la  lightbox  et  une  rubrique  photos  pour  les  images  qui  s’afficheront  dans  le  diaporama.  Pour  les  photos  en  général,  nous  vous  conseillons  de  les  redimensionner  avec  1000px  maximum  en  largeur  ou  en  hauteur.  Pour  cela  vous  pouvez  utiliser  un  logiciel  de  traitement  des  images  comme  PhotoFiltre,  Photoshop,  ou  des  outils  en  ligne  comme  http://www.pixlr.com/editor.    
  3. 3.    Lorsque  vous  avez  chargé  ou  choisi  votre  vignette,  double  cliquer  dessus.  La  fenêtre  se  fermera  et  vous  revenez  au  cadre  des  propriétés  de  l’image.        L’image  apparaît  dans  le  cadre.  Nous  vous  rappellons  qu’il  est  normalement  obligatoire  de  renseigner  le  champ  «  texte  de  remplacement  »  pour  l’accessibilité.  Vous  avez  la  possibilité  de  changer  la  taille  de  l’image  proportionnellement  (cadenas  fermé)  ou  non.  
  4. 4. Vous  cliquez  sur  OK  pour  valider  les  propriétés  et  votre  image  apparaît  dans  le  tableau.        Vous  cliquez  sur  l’image  pour  que  nous  lui  ajoutions  le  lien  lightbox  vers  la  photo.  Vous  cliquez  sur  l’icône    S’ouvre  alors  une  fenêtre  «  Créer  une  lightbox  ».  Pour  le  moment  le  lien  redirige  vers  la  vignette.  Il  faut  donc  cliquer  sur  «  Parcourir  le  serveur  »  pour  aller  modifier  ce  lien  par  la  photo  désirée.    
  5. 5.    Nous  retrouvons  alors  la  fenêtre  de  la  gestion  des  images  et  nous  alons  pouvoir  charger  dans  le  dossier  «  Photos  »  ou  choisir  une  image  de  ce  dossier  déjà  chargée.        Il  suffit  ensuite  de  double  cliquer  sur  l’image  pour  qu’elle  se  charge  dans  le  cadre  «  Créer  une  lightbox  ».    
  6. 6.    Vous  cliquez  sur  OK.    Il  ne  vous  reste  plus  qu’à  renouveler  la  démarche  sur  les  autres  colonnes  du  tableau  et  n’oubliez  pas,  pour  finir,  de  sauvegarder  la  page.    Si  le  tableau  comporte  un  nombre  insuffisant  de  colonne,  il  suffit  de  créer  un  nouveau  tableau  au  dessous  de  celui-­‐ci.  Si,  par  contre  vous  avez  trop  de  colonne,  vous  avez  la  possibilité  de  supprimer  les  colonnes  supplémentaires  en  allant  dans  la  source  de  la  page  :    Vous  allez  voir  le  code  de  la  page.  Il  vous  suffira  ensuite  de  repérer  le  code  correspondant  à  ces  colonnes  vides  puis  de  le  supprimer  :    
  7. 7.    Le  code  html  pour  une  colonne  vide  s’écrit  ainsi  :  <td>&nbsp  ;</td>  Faites  attention  de  ne  pas  supprimer  de  <tr>  ou  </tr>  ou  d’autres  éléments  html.  Si  vous  ne  pensez  pas  être  capable  de  le  faire,  laissez  les  colonnes  vides  en  place,  elles  ne  se  verront  pas.    Recommandations  :  Pensez  à  préparer  vos  images  et  vignettes  en  amont  pour  gagner  du  temps.  

×