Sitio web oficial de Photoswipe.JS: http://photoswipe.com/, los archivos de Photoswipe y los ejemplos relacionados se pueden descargar en este sitio web.
Este componente se usa principalmente para mostrar imágenes y álbumes, y es muy práctico.
1. Usar este componente requiere dos archivos JS
1 <script type = "text/javaScript" src = "simple-wheritance.min.js">
2 <script type = "text/javaScript" src = "código-photoswipe-1.0.11.min.js"> <!-La última versión actual debe ser 1.0.11->
2. Entonces la estructura de la página puede ser así
<div id="Gallery"> <div> <div><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" /></a></div> <div><a href="images/full/02.jpg"><img src="images/full/02.jpg" /></a></div> <div><a href = "Images/Full/04.jpg"> <img src = "Images/full/04.jpg"> <img src = "Images/full/04.jpg"> <img src = "Images/thumb/04.jpg"/> </a> </div> <div> <hiv> <a href = "imágenes/full/05.jpg"> <img "<img" <img " src = "imágenes/thumb/05.jpg"/> </a> </div> <div> <a href = "Images/full/06.jpg"> <img src = "Images/thumb/06.jpg"/> </a> </div> </div> </div>
De hecho, además de la estructura de la página, las únicas cosas que son realmente útiles en este código HTML son id = "galería" y <a href = "ruta de imagen"> </a> (se explicará más adelante). La otra clase solo juega un papel en embellecer la estructura de página original (diferente de la página que realmente desea tener el efecto, es decir, solo necesita escribir de acuerdo con la estructura de página anterior, y el efecto de página que desea está completado por el complemento JS en sí, y no necesita escribir el diseño del efecto).
La página requiere tanto JS como estructura de página, y lo siguiente es usar el complemento.
3. Puede usar dos formas de declarar el complemento
1. Se realiza agregandoVentListener () en el navegador predeterminado.
document.adDeventListener ("DomContentLoaded", function () {code.photoswipe ('a', '#galería'); // Esto involucra el id = "galería" y <a href = "..."> </a> En la estructura de página anterior, donde id = "galerista" es el contenedor // <a href = "pica ruta"> </a>, aquí, aquí, el camino de la galería de la galería "es el contenedor de la imagen. señalado a}, falso);2. Cómo usar jQuery:
$ (documento) .Ready (function () {$ ("#Gallery A"). Photoswipe ();});4. Con esta configuración, su página probablemente será así.
El efecto de la página al principio:
Después de hacer clic en cualquier imagen, el formulario de la página se convierte en el siguiente (esta página es en realidad la página que realmente quiero):
Puede ver claramente el contenido en ALT en <img /> por encima de la página, y habrá cuatro botones a continuación, representando: Cerrar la página y volver a la apariencia original (es decir, la imagen de arriba), reproducción automática, imagen de página anterior e imagen de la página siguiente.
Aparece el efecto de dicho álbum. Por supuesto, puede usar el mouse para deslizar a la izquierda y a la derecha en esta página. Si está en un dispositivo portátil, también puede deslizar a la izquierda y a la derecha en su dedo.
Este complemento tiene muchas propiedades:
IloodUserZoom: permite a los usuarios hacer doble clic para ver las imágenes con zoom en/movimiento. Valor predeterminado = verdadero
AutoStartSlideshow: cuando Photoswipe se activa, la presentación de diapositivas se reproducirá automáticamente. Valor predeterminado = falso
ELTOROTROTATIONUNUSERZOOM: solo compatible con iOS: permite a los usuarios rotar imágenes con gestos en modo Zoom/Pan. Predeterminado = falso
BackButtonHideEnabled: presione la tecla de retorno para ocultar las diapositivas del álbum. Es utilizado principalmente por Android y BlackBerry. Admite BB6, Android V2.1, iOS 4 y versiones más nuevas. Valor predeterminado = verdadero
TriteryAndToolBarautoHidedElay: el tiempo de retraso oculto automáticamente por la barra de título y la barra de herramientas. El valor predeterminado es = 5000 (MS). Si se establece en 0, no se ocultará automáticamente (toque/haga clic para cambiar visible y oculto)
PittionAndToolBarflipposition: Posición de alternativa entre la barra de título y la barra de herramientas (deje que se muestre la leyenda en la parte inferior y la barra de herramientas se muestra en la parte superior). Valor predeterminado = falso
TriteAndToolBarhide: Ocultar bar de título y barra de herramientas. Valor predeterminado = falso
TriteandToolBaropacity: Transparencia de la barra de título y barra de herramientas (0-1). Valor predeterminado = 0.8
subtittandtoolbarshowemptycaptions: muestra la barra de título incluso si el título de la imagen actual está vacío. Valor predeterminado = verdadero
Cachemode: modo de caché, code.photoswipe.cache.mode.normal (predeterminado, normal) o code.photoswipe.cache.mode.agressessess (radical, activo). Decide cómo Photoswipe administra el caché de la caché de imágenes.
El modo agresivo establecerá activamente el tipo de imágenes no "actuales, anteriores, próximas" que estén vacías. Será útil para los desbordamientos de memoria en los navegadores iOS mayores. En la mayoría de los casos, el modo normal está bien.
Doubletapspeed: el intervalo máximo para hacer doble clic. Valor predeterminado = 300 (ms)
DoubleTapZoomLevel: cuando el usuario hace doble clic, el aumento múltiple es el nivel predeterminado de "zoom-in". Valor predeterminado = 2.5
ActivilyRag: permite arrastrar la imagen anterior/siguiente a la interfaz actual. Valor predeterminado = verdadero
Habilitar Keykboard: permita las operaciones del teclado (conmutación de flecha izquierda e izquierda, salida ESC, ingrese la reproducción automática, pantalla de barra espacial/Barra de título oculta/salida). Predeterminado = verdadero
EnableMouseWheel: permite la operación de la rueda del mouse. Predeterminado = verdadero
FadeInspeed: la velocidad (duración) del elemento de efecto, milisegundos. Predeterminado = 250
FadeOutSpeed: la velocidad (duración) del elemento de efecto, milisegundos. Predeterminado = 250
ImagesCalEmethod: Método de escala de imágenes (modo). Valores opcionales: "Fit", "FitNoUscale" y "Zoom". El modo "ajuste" asegura que la imagen se adapte a la pantalla. "FitNoUscale" es similar a "Fit" pero no amplía la imagen. "Zoom" proyectará la imagen en su totalidad, pero es posible que la escala de la imagen no sea igualmente proporcional. Predeterminado = "ajuste"
Invertmousewheel: Invierta la rueda del mouse. Por defecto, el desplazamiento hacia abajo del mouse cambiará a la siguiente imagen y hasta la imagen anterior. Predeterminado = falso
jQueryMobile: indica si Photoswipe está integrado en el proyecto móvil jQuery. Por defecto, Photoswipe intentará resolver esto para usted
JQueryMobileDialoghash: la etiqueta hash de JQuery Mobile utilizada para las páginas de ventana y diálogo. Valor predeterminado = "& ui-state = diálogo"
Bucle: si el álbum buce automáticamente. Predeterminado = verdadero
Margen: el intervalo entre dos imágenes, la unidad es píxeles. Predeterminado = 20
MaxuserZoom: aumento máximo. Predeterminado = 5.0 (establecido en 0 será ignorado)
MINUSERZOOM: el múltiplo de reducción más pequeño de la imagen. Predeterminado = 0.5 (establecido en 0 será ignorado)
Veliminación de ratones: sensibilidad en respuesta a la rueda del mouse. Predeterminado = 500 (ms)
NextPreviousSlidespeed: cuántos milisegundos se retrasarán después de hacer clic en los botones anteriores y próximos. Predeterminado = 0 (cambiar ahora)
PreventHide: evita que el usuario cierre Photoswipe. También ocultará el botón de cierre "Cerrar" en la barra de herramientas. Úselo en la página exclusiva (el ejemplo es ejemplos/08-exclusive-mode.html en el código fuente). Predeterminado = falso
PreventSlidShow: bloquea el modo de reproducción automática. También ocultará el botón de reproducción en la barra de herramientas. Predeterminado = falso
SlidShowDelay: ¿Cuánto tiempo se tarda en jugar la siguiente imagen en modo de juego automático? Predeterminado = 3000 (ms)
Slidespeed: la hora en que la imagen se desliza a la vista. Predeterminado = 250 (ms)
Swipethreshold: cuántos píxeles se usan para deslizar un dedo para activar un evento de gesto de deslizamiento. Predeterminado = 50
SwipETimethreshold: define el número máximo de milisegundos para activar el gesto de deslizamiento. Si es demasiado lento, no activará la diapositiva y solo arrastrará la posición de la foto actual. Predeterminado = 250
SlidEtimingfunction: función de relajación al deslizar. Predeterminado = "facilidad"
Zindex: el valor inicial de Zindex. Predeterminado = 1000
EnableUiWebViewRepositionTimeOut: verifica si la orientación del dispositivo ha cambiado. Predeterminado = falso
uiwebviewResetPositionDelay: el tiempo para verificar si la dirección del dispositivo cambia regularmente es 500 (MS)
PreventDefaultTouchEvents: bloquea eventos táctiles predeterminados, como el desplazamiento de la página. Predeterminado = verdadero
Objetivo: debe ser un elemento DOM legal (como Div). La ventana predeterminada es la ventana (página completa). Si es un DOM de bajo nivel, se mostrará en el DOM y puede no ser una pantalla completa.
Si no necesita mostrar la primera página y mostrar directamente la segunda página, puede configurarla así:
$ (documento) .Ready (function () {// Configurar Photoswipe, configurar "PreventHide: True" var thumbels = code.photoswipe ('a', '#gallery', {preventhide: true}); code.photoswipe.current.show (0);});Por supuesto, este complemento tiene muchas otras funciones de escucha:
document.adDeventListener ('DomContentLoaded', function () {// onbeforeshow llame a este método antes de que la galería esté a punto de mostrarse.code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforShow, function (e) {consold.log ("onbeForShow"; Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onshow, function (e) {console.log ("onbeforeshow");}); console.log ("Onshow");}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onhide, function (e) {console.log ('onhide');}); console.log ('onshownext');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventTypes.ondisplayImage, function (e) {console.log ('onDisplayImage');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventTypes.onresetPosition, function (e) {console.log ('onresetPosition');}); Gallery ha iniciado el slideshowcode.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslidesshowstart, function (e) {console.log ('onslideshowwowntt');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstop, function (e) {console.log ('ondshideshowstop');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventTypes.onbeForecaptionAndToolBarShow, function (e) {console.log ('OnbeforCaptionAndToolBarShow');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventTypes.onbeForecaptionAndToolBarHide, function (e) {console.log ('onbeforCaptionAndToolBarHide');}); OnbeforCaptionAndToolBarHide generalmente se desencadenará en el código de método OnbeforCaptionAndToolBarHide o OnbeforCaptionAndToolBarHide.Dado que el método de llamadas de la interfaz API no se encuentra en el sitio web oficial de Photoswipe, y el nivel actual de JS no es muy bueno, algunas de sus interfaces API básicamente no se entienden bien. Sin embargo, cuando verifiqué su ejemplo, descubrí que a menudo aparece una variable, code.photoswipe o code.photoswipe.current. Todos ellos fueron realizados en la consola. Cuando ingresé a Code.Photoswipe, apareció el siguiente contenido:
Aunque no puede entender completamente qué es, puede ver que el elemento actual está incluido. Luego ingrese código.photoswipe.current en la consola para obtener el siguiente contenido:
Puede encontrar más información aquí, por ejemplo: CurrentIndex indica que la imagen actual está indexada en la lista, y toda la conexión es código.photoswipe.current.currentIndex representa la posición indexada de la imagen actual. Esta información es muy importante para mí. Podemos mostrar diferentes información de página en diferentes páginas a través de esta información.
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.