Recientemente, he visto una serie de sitios web que utilizan esta interfaz de documentos paginados con JavaScript. A los usuarios se les presenta un conjunto de documentos de varias páginas a partir de la primera página, y tienen la capacidad de alternar dinámicamente entre páginas. Esta puede ser una solución mucho mejor que vincular directamente a un documento PDF. O esto puede ser incluso una alternativa donde tenga un enlace de descarga de PDF, más las imágenes de documentos incrustadas para un fácil acceso.
En este tutorial quiero demostrar cómo podemos construir un pequeño script que maneje cualquier número de documentos establecido. El código JS es un poco complicado, ya que necesitamos adaptarnos a una gran cantidad de páginas. Sin embargo, no es muy difícil personalizar y hacer que el diseño se vea exactamente como lo necesitarías. Echa un vistazo a mi ejemplo de demostración a continuación para tener una idea de lo que vamos a crear.
Demo en vivo - Descargar código fuente
Empezando
Primero debemos crear los archivos index.html y styles.css en el mismo directorio. También descargué una copia reciente de jQuery para almacenar con mi otro documento JS. jQuery es la única dependencia de lo que necesitamos para construir y la biblioteca minificada no ocupa mucho espacio.
Como puede ver, el encabezado no contiene nada demasiado fuera de lo común. El contenido del cuerpo también es fácil de entender y he tratado de mantener la interfaz lo más simple posible. Hay un solo div usando la ID #documentcontainer que contiene la primera imagen de la página. Esta etiqueta img se actualizará automáticamente una vez que el usuario haga clic en cualquiera de los enlaces de navegación o haga clic en la imagen para avanzar una página.
Sólo estoy usando el? y ← entidades para mostrar enlaces de flecha. Pero puedes actualizar este diseño para que aparezca como quieras. La parte realmente importante sería la ID adjunta en cada enlace. Estos corresponden a los controladores de eventos jQuery que se activan después de que el usuario haga clic en cualquiera de las flechas para avanzar o retroceder en el conjunto de documentos.
Configurando la pagina
Un atributo interesante que encontrarás en la etiqueta img se llama página de datos. Utilizamos este atributo para determinar qué página se muestra actualmente sin necesidad de adivinar el nombre de archivo actual. jQuery actualizará este valor al cambiar entre páginas alternativas.
Desde los estilos CSS solo debemos preocuparnos por el contenido del cuerpo interno. Encontrará todos los reinicios típicos y los estilos div de envoltura centrados dentro de la hoja de estilo. Todo esto es bastante común y espero que los desarrolladores frontend ya estén familiarizados con estas ideas.
El contenedor de documentos tiene un poco de relleno en cada lado para mantener la imagen centrada en la página. También la propia etiqueta img tiene la propiedad cursor: puntero; para cuando el usuario se desplace para promover un evento de clic. No hay un enlace de anclaje que envuelva el img porque no queremos vincularlo en ningún lugar. Pero la imagen debe ser seleccionable, y este icono con el cursor de la mano es la técnica perfecta para la experiencia del usuario.
Con todo lo demás configurado en la página, ahora podemos profundizar en jQuery. Intenté mantener el script muy maleable utilizando variables que puede actualizar para sus propios documentos. Pero como hay muchos métodos diferentes para lograrlo, ¡no puedo garantizar que mi código sea la solución perfecta para todos!
Variables de paginación jQuery
Cada página de documento individual es en realidad una imagen JPG exportada desde este documento PDF utilizando Adobe Photoshop. Este proceso debería ser posible con cualquier PDF típico, lo que facilita aún más la publicación en la web utilizando un visor de documentos JS. Deberíamos echar un vistazo a mi archivo personalizado. docview.js y desglosar cada uno de los bloques de código.
Estas 4 variables pueden personalizarse si está utilizando un conjunto diferente de documentos. Primero es setDirectory lo que debería llevar a un valor URL local o absoluto, con la barra diagonal, apuntando al directorio de las imágenes. tipos de archivo Sería la extensión de tus imágenes de documento. lastDocNum es el recuento total de páginas de su conjunto, de esa manera jQuery sabe cuándo hemos llegado al final de su documento.
La ultima variable fileDigits Es importante explicarlo. Esta secuencia de comandos supone que etiquetará los conjuntos de documentos en el orden de 01.jpg, 001.jpg o 0001.jpg, sin embargo, utilizando muchos ceros para llenar el lugar de las páginas. Si tiene un documento de 2.500 páginas, el orden debería ser numéricamente secuencial y la variable fileDigits se establecería en 4 porque hay 4 dígitos numéricos dentro de cada nombre de imagen.
Manejo de imágenes dinámicas
Cuando estaba escarbando en Stack Overflow, encontré esta increíble solución para agregar ceros al nombre del archivo.Necesitamos convertir el nombre de archivo en un entero para aumentar el valor en 1. Luego lo convertimos de nuevo en una cadena, agregamos el número correcto de ceros y le damos la extensión de archivo final.
Probablemente no necesite saber exactamente cómo funciona esto, pero es una gran función. El bloque grande final de código administrará los controladores de eventos jQuery para hacer clic en la imagen, o en cualquiera de los dos enlaces de navegación. Configuramos el img principal en una variable de JavaScript llamada docimage y luego manipular los atributos desde allí.
Las nuevas variables creadas en el interior mantendrán el siguiente número de página numérico, junto con el nuevo número de ID de página y la nueva fuente de imagen. Primero verificamos si el ID es igual al número final de documentos y, si es así, detenemos la ejecución del script. Esto significa que hemos llegado a la página final y el usuario está haciendo clic en la página final para continuar, ¡pero no tenemos nada más que mostrar! De lo contrario, los atributos img se actualizan y la nueva imagen se mostrará instantáneamente.
El último controlador de eventos está utilizando los selectores jQuery para ambos enlaces de flecha juntos. Basándonos en el nombre de la ID, verificamos si la ID de la página actual se debe restar o agregar por una. También tenemos que realizar una comprobación similar para ver si el usuario está en la primera página y no puede volver atrás, o si está en la última página y no puede seguir adelante. De lo contrario, los códigos son casi idénticos y debería poder seguirlos todos hasta el final.
Demo en vivo - Descargar código fuente
Pensamientos finales
Espero que este tutorial sea útil para algunos desarrolladores web. Esta idea es todavía bastante nueva y no existe una gran demanda de esta funcionalidad en todos los sitios web. Pero me gusta la idea de extraer nuevas URL de imágenes dinámicamente para que la página no se actualice.
Esto le da al usuario una experiencia más limpia y todo el sitio web carga menos solicitudes HTTP por página. Si tiene alguna idea o pregunta similar en el tutorial, ¡no dude en compartir con nosotros en el área de discusión a continuación!