Imaginons que vous souhaitiez créer une page qui affichera des instantanés de votre dernier travail. Une façon de procéder consiste à coder en dur les images dans votre document. La conséquence évidente est que, chaque fois que vous souhaitez ajouter un nouvel élément, vous devez mettre à jour manuellement votre document html. Une autre méthode serait de stocker et d'extraire les informations d'une base de données MYSQL. Cela fonctionnera parfaitement, bien que pour de nombreux sites, cette solution puisse offrir beaucoup plus d’énergie que ce qui est techniquement nécessaire - sans parler de l’augmentation des coûts d’hébergement..

Dans de tels cas, la meilleure solution consiste à faire en sorte que PHP analyse votre dossier "portfolio" et crée dynamiquement le code pour vous. Si vous souhaitez mettre à jour votre page avec un nouvel instantané, tout ce que vous avez à faire est de faire glisser l'image et sa vignette respective dans les dossiers appropriés - et PHP se chargera du reste. Construisons-le maintenant!

Notre mission

Décrivons brièvement ce que nous devons accomplir.

• Utilisez PHP pour analyser notre dossier. Il va ensuite parcourir chaque fichier, c'est-à-dire une image, puis l'afficher sur la page..
• Style notre contenu un peu en utilisant CSS.
• Lorsque les utilisateurs cliquent sur une vignette, nous utiliserons jQuery pour charger la version agrandie de l'image dans le panneau principal..
• Si l'utilisateur a désactivé Javascript, il sera simplement redirigé vers une nouvelle page contenant l'image en taille réelle

Comment l'utiliser

Ajouter une nouvelle image à notre portefeuille est simple. Prenez un instantané de votre site Web, brochure, carte postale, etc. et redimensionnez-le à 500 pixels x 350 pixels. Placez cette image dans le dossier "images / sélectionnée".

Créez ensuite une vignette de 50 x 50 pixels. Placez cette image dans le dossier "images / tn".

Vous devez vous assurer que le nom de fichier exact est identique pour les images en taille réelle et les images miniatures..

Notre HTML final

          
 
Un certain portefeuille
 
 '; ?> 
 
     '; ?> 
 
  

Notre CSS final

Voir ici.

Compenser pour IE6

Heureusement, nous n'avons qu'une chose à réparer. Si vous regardez l'image ci-dessus, vous verrez que la liste non ordonnée #options ne contient pas ses éléments de liste flottants. Alors que les navigateurs modernes effaceront correctement les éléments grâce à notre "débordement: caché;" style, IE6 a besoin d’une règle de plus. Ajoutez ceci à votre feuille de style.

 ul # options … styles divers… hauteur: 1%; 

J'aurais pu régler la hauteur à n'importe quoi et cela fonctionnerait toujours. Pensez-y comme si Drago frappait IE6 et lui disait: "Réveille-toi!". Ce style force IE6 à s’étendre autant qu’il est nécessaire pour effacer ses enfants.

Le Javascript complet (jQuery)

 $ (fonction () $ .preloadImage = fonction (chemin) $ ("# img" en vedette "). attr (" src ", chemin); $ ('ul # options li img'). clic (fonction () $ ('ul li img'). removeClass ('selected'); $ (this) .addClass ('selected'); var imageName = $ (this) .attr ('alt'); $ .preloadImage ('images / Featured / '+ + NomName); var haché = ImageName.split ('. '); $ (' # vedette h2 '). remove (); $ (' # vedette ') .prepend ('
'+ haché [0] +'
') .enfants (' h2 '). fadeIn (500) .fadeTo (200, .6); ); $ ('ul # options li a'). click (function () return false;); );

Crédit supplémentaire

Il existe des moyens de créer des vignettes de nos images de manière dynamique. Essayez de trouver un moyen de faire en sorte que PHP scanne notre dossier "vedette", puis crée dynamiquement une version miniature et l’enregistre dans le dossier "tn"..

• Abonnez-vous au flux RSS NETTUTS pour plus de commentaires et d'articles sur le développement Web au quotidien.