Share
Recientemente encontré una biblioteca de JavaScript llamada PhotoSwipe, y estoy realmente impresionado. Es una biblioteca brillante que sobrepone una imagen o un grupo de imágenes en su página actual, un efecto conocido popularmente como caja ligera. PhotoSwipe está actualmente desarrollado por Dmitry Semenov; lo reconstruyó el año pasado cuando se hizo cargo del proyecto. Las mejoras incluyen:
El único inconveniente es que PhotoSwipe no se agotará. Como dice el desarrollador:
“PhotoSwipe se hace simple y rápido para los usuarios finales, no para los desarrolladores. No es un simple complemento de jQuery, se requiere al menos un conocimiento básico de JavaScript para instalar.
Pero se puede utilizar junto con otras bibliotecas. En este tutorial, veremos cómo usar PhotoSwipe con jQuery. Haremos que todo el proceso sea fácil de comprender, incluso si no está bien versado en JavaScript puro.
Vamos a empezar.
Comenzaremos con:
Accentsconagua
photoswipe.min.js, photoswipe-ui-default.min.js (El código que construye la interfaz de usuario de PhotoSwipe), default-skin.css, default-skin.png, default-skin.svg, ypreloader.gif.La estructura HTML es la parte más esencial, ya que con el tiempo controlará cómo escribimos el JavaScript. Aquí asumiremos que tenemos un par de imágenes, de la siguiente manera:
Aparte de la clase y los atributos del esquema (que ayudarán con el SEO), también hemos agregado un datos-* atributo en la etiqueta de anclaje que envuelve la imagen. Esto almacena el tamaño completo (ancho x alto) de la imagen.
Ahora agregamos el marcado que PhotoSwipe usará para superponer las imágenes completas. Añadir esto justo antes de la etiqueta de cierre del cuerpo,
Todos estamos configurados con el HTML, por lo que ahora podemos continuar con el JavaScript. Como se mencionó estaremos usando jQuery..
Nuestras imágenes se agrupan dentro de un div con el imagen clase. Puede haber varios grupos de imágenes más dentro de la página, por lo que hacemos un bucle a través de cada .imagen elemento.
$ ('. picture'). each (function () ); PhotoSwipe nos obliga a proporcionar la fuente de imagen completa junto con su tamaño. Para encargarnos de esto, creamos una función que recorrerá la etiqueta de anclaje para recuperar estos detalles, de la siguiente manera:
$ ('. picture'). each (function () var $ pic = $ (this), getItems = function () var items = []; $ pic.find ('a'). each (function () var $ href = $ (this) .attr ('href'), $ size = $ (this) .data ('size'). split ('x'), $ width = $ size [0], $ height = $ size [1]; var item = src: $ href, w: $ width, h: $ height items.push (item);); devolver artículos; var items = getItems ();); Vamos a dividir el código abajo en varias partes:
elementos = []..cada() método.$ href = $ (this) .attr ('href') obtiene el valor en el href Atributo, almacenando el camino de la imagen completa..$ size = $ (this) .data ('size'). split ('x') obtendrá el valor de la tamaño de datos atribuir a través de la jQuery .datos() método. Entonces usamos el división()método para separar el valor.$ ancho = $ tamaño [0] y $ altura = $ tamaño [1].empujar() Método que recopilamos toda esta información en un Array.Ahora tenemos la fuente de la imagen y el tamaño de la imagen almacenados en el artículos variable. Para verificar, puede ejecutar la variable a través de la console.log () y deberías encontrar la siguiente estructura de datos en DevTools.
A continuación, unimos el figura elemento con el hacer clic evento, construir una instancia de PhotoSwipe, pasar el artículos junto con las opciones de configuración, y finalmente inicializar PhotoSwipe.
var $ pswp = $ ('. pswp') [0]; $ pic.on ('click', 'figure', function (event) event.preventDefault (); var $ index = $ (this) .index (); var options = index: $ index, bgOpacity: 0.7, showHideOpacity: true // Inicializar PhotoSwipe var lightBox = new PhotoSwipe ($ pswp, PhotoSwipeUI_Default, items, options); lightBox.init ();); La razón por la que usamos el figura El elemento para hacer clic, en lugar de la etiqueta de anclaje, es para que podamos recuperar fácilmente el índice (o el orden posterior). Esto nos permite informar a PhotoSwipe del índice correcto para superponer la imagen correspondiente.
Acabamos de implementar PhotoSwipe utilizando jQuery. El código es comparativamente más delgado y más fácil de entender que cuando está escrito en JavaScript de vainilla.
Ahora que ha comenzado, también puede ajustar PhotoSwipe con las pocas opciones proporcionadas e incluso precargar la imagen para que vea la imagen completa al instante al hacer clic. Dejaré los estilos a tu imaginación ya que no hay reglas estrictas para ellos..
Espero que hayas aprendido algo de este tutorial y que a veces te resulte útil. No olvides revisar la demostración en vivo y dejar cualquier pregunta o pensamiento en los comentarios.!
