Récemment, j'ai vu plusieurs sites Web utiliser cette interface de document paginée basée sur JavaScript. Les utilisateurs se voient présenter un ensemble de documents de plusieurs pages à partir de la première page et peuvent basculer de manière dynamique entre les pages. Cela peut être une bien meilleure solution que de créer un lien directement vers un document PDF. Ou cela peut même être une alternative lorsque vous avez un lien de téléchargement PDF, plus les images de document incorporées pour un accès facile.
Dans ce tutoriel, je veux montrer comment créer un petit script capable de gérer un nombre défini de documents. Le code JS est un peu délicat car nous devons nous adapter à un grand nombre de pages. Cependant, il n’est pas très difficile de personnaliser et d’obtenir le design exactement comme vous en auriez besoin! Consultez mon exemple de démonstration ci-dessous pour avoir une idée de ce que nous allons créer.
Live Demo - Télécharger le code source
Commencer
Nous devons d’abord créer les fichiers index.html et styles.css dans le même répertoire. J'ai également téléchargé une copie récente de jQuery à stocker avec mon autre document JS. jQuery est la seule dépendance pour ce que nous avons besoin de construire et la bibliothèque réduite ne prend pas beaucoup de place.
Comme vous pouvez le constater, l’en-tête ne contient rien d’extraordinaire. Le contenu du corps est également facile à comprendre et j'ai essayé de garder l'interface aussi simple que possible. Il y a une seule div utilisant l'ID #documentcontainer qui contient la première image de la page. Cette balise img sera mise à jour automatiquement lorsque l'utilisateur clique sur l'un des liens de navigation ou sur l'image elle-même pour avancer d'une page.
Je n'utilise que le? et ← entités pour afficher des liens de flèche. Mais vous pouvez mettre à jour cette conception pour qu'elle apparaisse comme vous le souhaitez. La partie vraiment importante serait les identifiants attachés à chaque lien. Ceux-ci correspondent aux gestionnaires d'événements jQuery qui se déclenchent lorsque l'utilisateur clique sur l'une des flèches pour avancer ou revenir dans le jeu de documents.
Configurer la page
Un attribut intéressant que vous trouverez sur la balise img est appelé page de données. Nous utilisons cet attribut pour déterminer quelle page est actuellement affichée sans avoir besoin de deviner à partir du nom de fichier actuel. jQuery mettra à jour cette valeur lors du changement de page.
Dans les styles CSS, nous devons uniquement nous préoccuper du contenu du corps interne. Vous trouverez tous les types de réinitialisations et de styles de wrapper div centrés dans la feuille de style. Tout cela est assez courant et j'espère que les développeurs frontaux connaîtront déjà ces idées.
Le conteneur de documents est légèrement rembourré de part et d'autre pour que l'image reste centrée sur la page. De plus, la balise img elle-même a la propriété curseur: pointeur; pour chaque fois que l'utilisateur survole pour promouvoir un événement de clic. Il n'y a pas de lien d'ancrage enveloppant l'img car nous ne voulons pas créer de lien nulle part. Mais l'image doit être cliquable et cette icône représentant un curseur de main est la technique idéale de l'expérience utilisateur.
Avec tout le reste de la configuration sur la page, nous pouvons maintenant plonger dans jQuery. J'ai essayé de garder le script très malléable en utilisant des variables que vous pouvez mettre à jour pour vos propres documents. Mais comme il existe de nombreuses méthodes différentes pour y parvenir, je ne peux pas garantir que mon code est la solution absolue parfaite pour tout faire!
Variables de pagination jQuery
Chaque page de document individuelle est en fait une image JPG exportée à partir de ce document PDF à l'aide d'Adobe Photoshop. Ce processus devrait être possible avec n'importe quel fichier PDF typique, ce qui facilite encore plus la publication sur le Web à l'aide d'un visualiseur de documents JS. Nous devrions jeter un oeil à mon fichier personnalisé docview.js et décomposer chacun des blocs de code.
Ces 4 variables peuvent être personnalisées si vous utilisez un ensemble de documents différent. Le premier est setDirectory ce qui devrait conduire à une valeur d'URL locale ou absolue, avec la barre oblique, pointant vers le répertoire des images. types de fichier serait l'extension de vos images de document. lastDocNum correspond au nombre total de pages de votre ensemble. De cette façon, jQuery sait quand nous avons atteint la fin de votre document.
La dernière variable fileDigits est important d'expliquer. Ce script suppose que vous étiqueterez les jeux de documents dans l'ordre suivant: 01.jpg, 001.jpg ou 0001.jpg, en utilisant le nombre de zéros nécessaire pour remplir l'emplacement des pages. Si vous avez un document de 2 500 pages, l'ordre doit être séquentiel numérique et la variable fileDigits doit être définie sur 4 car il y a 4 chiffres dans chaque nom d'image.
Gestion des images dynamiques
En fouillant dans Stack Overflow, j'ai trouvé cette solution étonnante pour l'ajout de zéros au nom du fichier.Nous devons convertir le nom de fichier en un entier pour augmenter la valeur de 1. Ensuite, nous le reconvertissons en chaîne, ajoutons le nombre approprié de zéros et lui attribuons l'extension de fichier de fin.
Vous n'avez probablement pas besoin de savoir exactement comment cela fonctionne, mais c'est une fonction géniale. Le dernier grand bloc de code permettra de gérer les gestionnaires d’événements jQuery en cliquant sur l’image ou l’un des deux liens de navigation. Nous configurons l’img principale dans une variable JavaScript nommée docimage puis manipuler les attributs à partir de là.
Les nouvelles variables créées à l'intérieur contiendront le numéro de page numérique suivant, ainsi que le nouveau numéro d'identification de page et la nouvelle source d'image. Nous vérifions d'abord si l'ID est égal au nombre final de documents et, dans l'affirmative, nous empêchons le script de s'exécuter davantage. Cela signifie que nous avons atteint la dernière page et que l'utilisateur clique sur la dernière page pour continuer, mais nous n'avons rien d'autre à afficher! Sinon, les attributs img sont mis à jour et la nouvelle image s’affiche instantanément.
Le dernier gestionnaire d'événements utilise les sélecteurs jQuery pour les deux liens fléchés. En fonction du nom de l'ID, nous vérifions si l'ID de la page actuelle doit être soustrait ou ajouté par un. Nous devons également effectuer une vérification similaire pour voir si l'utilisateur est à la toute première page et ne peut plus revenir en arrière, ou s'il est à la dernière page et ne peut plus avancer. Sinon, les codes sont presque identiques et vous devriez pouvoir les suivre jusqu'au bout.
Live Demo - Télécharger le code source
Dernières pensées
J'espère que ce tutoriel pourra être utile à certains développeurs Web. Cette idée est encore relativement nouvelle et il n’existe pas de forte demande pour cette fonctionnalité sur tous les sites Web. Mais j'aime bien l'idée de tirer dynamiquement les nouvelles URL d'images afin que la page ne soit pas actualisée.
Cela donne à l'utilisateur une expérience plus propre et l'ensemble du site Web charge moins de demandes HTTP par page. Si vous avez des idées similaires ou des questions sur le tutoriel, n'hésitez pas à les partager dans la zone de discussion ci-dessous!