Les sites de photographie fonctionnent presque toujours en Flash. La technologie de plus en plus notoire d’Adobe affiche simplement de manière dynamique les images, ce qui est parfait pour les présentations photographiques. Cependant, il y a quelques inconvénients.
Tout d’abord, il n’est pas toujours facile de trouver un modèle de diaporama gratuit de qualité, et si vous n’êtes pas un développeur Flash, cela pourrait entraîner des coûts importants. Deuxièmement, le monde est actuellement dans une relation amoureuse / haineuse avec Flash, de nombreux développeurs passant à JavaScript, CSS3 et HTML5 dans la mesure du possible.
Nous allons donc créer un magnifique site de photographie alimenté par Javascript avec un diaporama en plein écran. Tout le gros du travail sera fait littéralement par une formidable ressource gratuite jQuery, notre travail sera donc principalement la personnalisation. Commençons!
Ce que nous construisons
Il est toujours bon de voir où vous en êtes avant de vous y rendre. Cliquez sur le lien ci-dessous pour voir une démonstration en direct de la page que nous allons créer aujourd'hui.
Cliquez pour la démonstration en direct
Mise en route: Trouver le plugin parfait
La grande chose à propos de travailler avec jQuery est l’énorme quantité de ressources gratuites sur lesquelles vous devez travailler. D'autres développeurs vous ont précédé et ont passé des heures à créer des plug-ins de qualité que vous pouvez utiliser entièrement gratuitement.
Nous avons déjà évoqué l’idée d’un fond d’image en plein écran sous Design Shack, mais le plug-in que nous avons utilisé n’avait pas de fonction de diaporama et nous étions donc plutôt bloqués avec une image statique. Les sites Web de photographie veulent souvent montrer le plus de travail possible dès le début, et rien ne laisse une impression aussi forte qu'un diaporama géant qui remplit la fenêtre du navigateur.
Après pas mal de recherches, je suis tombé sur un plugin tout simplement fantastique des gars de BuildInternet, appelé Supersized, vous avez peut-être remarqué ce plugin dans le compte rendu de la semaine dernière.
Si vous voulez suivre, téléchargez ce plugin et dupliquez le fichier? Default.html? fichier situé à l'intérieur. Quelques exemples de fichiers HTML sont inclus et celui-ci constituera le meilleur point de départ pour notre projet.
Ensuite, ouvrez ce fichier dans votre navigateur pour avoir une idée de ce avec quoi nous devons travailler. Comme vous pouvez le constater, il existe déjà un superbe diaporama en plein écran et quelques contrôles vraiment astucieux en bas.
En fait, j'adore ces commandes, mais pour vous montrer que vous n'êtes pas coincé dans cette conception, nous allons les supprimer et laisser le diaporama s'exécuter de manière autonome. Nous aborderons plus tard les implications en termes de convivialité. Tout d'abord, mettons de côté le plugin pour l'instant et concevons des diapositives.
Conception de diapositives
La présentation de notre page d'accueil de base sera presque entièrement reprise par notre diaporama de photos. Si vous avez une bonne photographie, votre travail de concepteur pourrait devenir beaucoup plus facile, car vous n’auriez besoin que d’exploiter correctement ces images.
Pour faciliter les choses, nous ajouterons le petit message que nous voulons dans les diapositives. Il ne s'agira pas de texte en direct, de sorte que le référencement en souffre un peu, vous pouvez donc incorporer le texte et le déposer sur les diapositives si vous pensez que c'est un problème majeur. En gros, il vous suffit de créer une division à position absolue, de la remplir avec du texte et de vous assurer qu'elle se démarque correctement de vos images d'arrière-plan. Nous verrons ce processus en action plus tard avec notre menu de navigation.
Pour commencer, nous allons créer les diapositives de contenu. Fondamentalement, ils aident simplement à présenter le site et ne contiennent aucune information que vous ne pourriez pas trouver sur la page À propos dans un format plus convivial. Ces diapositives seront dispersées parmi les diapositives et aideront à dissocier un peu ce contenu.
Créez un nouveau document 1200px par 800px dans Photoshop et remplissez-le avec # 0e1120. Ensuite, appliquez un Inner Shadow vraiment lourd pour lui donner une agréable sensation de vignettage, comme dans l’image ci-dessous.
Maintenant, remplissez cette diapositive avec du texte et un logo pour présenter le site. Dans la diapositive ci-dessous, j'ai créé un simple message de bienvenue. Pour le type plus petit, j'ai utilisé Trajan (cliché mais efficace) et pour le logo, une police gratuite appelée Angelic War. Vous pouvez télécharger cette police sur DaFont.com.
Notez que j'ai donné une légère lueur externe au logo. cela permet de le distinguer du reste du texte et produit un effet agréable sur le fond sombre.
Ensuite, j'ai dupliqué ce design deux fois et ai placé des messages alternatifs sur ces diapositives pour discuter des autres services offerts par la société de photographie. Le texte suit de près la même mise en forme que la première diapositive. La répétition est un aspect simple et très important de la conception et vous devez toujours rechercher les moyens de la mettre en œuvre.
Choisir les photos
Pour le reste des diapositives, nous voudrons évidemment utiliser des photographies. Après la première diapositive d’introduction (bienvenue / mariage), nous placerons quelques photos du mariage. Après la deuxième diapositive d'introduction (fiançailles), nous placerons des photos de couples heureux et après la troisième diapositive d'intro (famille / senior), nous placerons des photos de famille.
Notre secteur de la photographie est fictif, mais il se trouve que je suis un photographe et que je vais donc saisir quelques images de mon propre portfolio pour les utiliser pour le remplissage de ce projet. J'ai choisi les six images suivantes et les ai enregistrées à la même taille que nos diapositives d'introduction.
Éliminer les contrôles du diaporama
Désormais, rendre le diaporama complètement autonome pourrait effrayer un peu la police de la convivialité. Si vous n'êtes pas d'accord, laissez simplement les commandes là! Plus profondément dans le site où se trouvaient les diaporamas de projets individuels, je placerais certainement des contrôles afin que les clients actuels et les clients potentiels puissent facilement aller et venir et sélectionner des images spécifiques.Cependant, sur la page d'accueil, je veux juste un message de défilement simple et agréable qui se répète sans aucune interaction de l'utilisateur.
Pour ce faire, allez dans le fichier Defautl.html et commentez ou supprimez tout ce qui se trouve sous le? Supersized? div et au-dessus de la balise de fermeture. Le code suivant devrait être tout ce qui est dans votre corps.
Insérer vos propres diapositives
Maintenant, faites défiler vers le haut de la page HTML où se trouvent toutes les balises de script. Ici vous trouverez les contrôles pour le diaporama, il devrait être facile de repérer la liste des diapositives. Notez que les diapositives actuelles ont des titres, des liens, etc. Nous ne voulons pas que notre image soit liée nulle part et nous avons supprimé la barre du bas contenant le titre afin de simplifier considérablement cette section et de répertorier nos diapositives de la manière suivante:
Notez que j'ai défini la? Startwidth? et? startheight? à la taille de nos diapositives. J'ai également défini le? Slide_interval? à 6000. Cela ralentira un peu le diaporama par rapport à son réglage par défaut. Vous pouvez laisser le reste de ces paramètres là où ils se trouvent. Assurez-vous simplement que vos diapositives sont répertoriées en bas et que vos fichiers JPG de diapositives se trouvent dans le dossier Diapositives.
HTML de navigation
Votre diaporama devrait maintenant être opérationnel avec vos propres diapositives personnalisées. Cependant, ce n'est pas une page d'accueil tant que vous n'avez pas le moyen de trouver le reste du contenu. Pour terminer notre site, nous allons créer un menu de navigation simple et le placer au bas de la page, à l'emplacement où se trouvaient les commandes du diaporama.
Le code HTML ici est très simple, il suffit de placer une liste non ordonnée sous le? Chargement? div dans votre corps.
CSS de navigation
Maintenant, nous voulons que ce soit un bar en bas. Heureusement, il y avait déjà une barre au bas du fichier lorsque nous avons téléchargé le plug-in pour que nous puissions simplement voler une partie de ce style et l'adapter à nos propres fins. Ci-dessous, j'ai créé la barre avec une hauteur de 40 pixels et réglé sa couleur avec du RGBa afin d'obtenir un peu de transparence.
Ensuite, nous devons appliquer beaucoup de styles à différentes parties de la liste non ordonnée. Nous devons styliser la liste elle-même, faire flotter les éléments de la liste pour qu'ils apparaissent en ligne et définir les couleurs du lien / survol.
Maintenant, pour ma dernière astuce, je veux styler le premier élément de la liste un peu différemment. Cela servira d'identifiant permanent pour le site et de lien vers la page d'accueil. En appelant le premier enfant de la liste, je peux attribuer à cet élément différentes marges et un type de traitement différent pour le différencier des autres.
Vous pouvez voir l'effet de ceci dans l'image ci-dessous. L'élément sert toujours le même objectif de base que tout le reste de la liste, il est simplement traité comme visuel, car c'est également le nom du site.
Conclusion
Sur ce, nous avons tous fini. À partir de là, codez le reste des pages en fonction du design que vous avez configuré sur la page d'accueil. Encore une fois, assurez-vous de passer à la démonstration pour la voir en action.
Laissez un commentaire et dites-nous comment vous amélioreriez ce que j'ai fait ici. J'aimerais entendre ce que vous voudriez changer et ce que vous pensez devrait rester le même. Merci d'avoir lu!