Photoswipe es un álbum/juego de fotos diseñado específicamente para dispositivos táctil móvil. Es compatible con todos los navegadores de iPhone, iPad, BlackBerry 6+ y de escritorio. La implementación subyacente se basa en HTML/CSS/JavaScript, y es un producto de álbum de fotos gratuito y de código abierto.
Para quien
Deje que el sitio móvil experimente el álbum del álbum como la aplicación nativa.
Excelentes características
Photoswipe proporciona a los usuarios una interfaz interactiva de álbum de fotos familiar e intuitiva.
Sitio web oficial
http://www.photoswipe.com/
Ejemplo del código fuente
http://github.com/downloads/codecomputerlove/photoswipe/code.photoswipe-3.0.5.zip
Github
https://github.com/codecomputerlove/photoswipe
Demostración en línea
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
Características de compatibilidad
Photoswipe es compatible con una gran cantidad de dispositivos móviles y todas las bibliotecas/marcos de desarrollo de clase JavaScript populares. Hay versiones basadas en jQuery, versiones sin jQuery y versiones compatibles con jQuery Mobile. Por supuesto, todo en uno está todo en el paquete de muestra del código fuente.
Cómo usar
Photoswipe es una biblioteca de JavaScript independiente que se puede integrar fácilmente en su sitio web. Se han realizado muchas optimizaciones para los navegadores móviles (WebKits). Por supuesto, para los navegadores de escritorio y jQueryMobile, las versiones correspondientes también se proporcionan en el paquete de código fuente.
Referencias de la biblioteca de clases
<!- Photoswipe hizo referencia a Klass antes. Si necesita aumentar la velocidad de carga, puede agregar una etiqueta de diferir/atributo a script->
<script type = "text/javaScript" src = "klass.min.js"> </script>
<!- Nota importante, si no usa la versión jQuery, se producirá un error en IE. Por supuesto, si usa la versión jQuery, debe presentar jQuery->
<script type = "text/javaScript" src = "code.photoswipe-3.0.5.min.js"> </script>
Código de llamada
/* Agregar Evento DomContentLoaded Escuchar, similar a la función Ready de JQuery.
Ejemplos de método predeterminado/01-default.html
Consulte las EEXAMPLES/09-EXCLUSIVO-MODE-No-Thumbnails.html para ningún modo miniaturas.
*/
// El método Photoswipe.attach recibe 3 parámetros (recopilación de elementos HTML, información de configuración opcional e ID de tipo de cadena opcional cuando múltiples instancias)
document.adDeventListener ('DomContentLoaded', function () {
// Establezca Photoswipe para vincular a todas las etiquetas <a> debajo del contenedor con ID como galería. Haga clic para activar
// El objeto aquí es una instancia de Photoswipe, y puede usar los métodos correspondientes, como Show (0), Hide (), etc.
var myphotoswipe = code.photoswipe.attach (window.document.queryselectorall ('#galería a'), {EnableMouseWheel: false, Enablekeyboard: false});
}, FALSO);
Si usa jQuery, el código de llamada es el siguiente:
// versión jQuery, el archivo js correspondiente también debe cambiarse en el archivo js
// ver ejemplos/02-jquery.html para obtener detalles para ejemplos
$ (documento) .Ready (function () {
// El objeto aquí es una instancia de Photoswipe, y puede usar los métodos correspondientes, como Show (0), Hide (), etc.
var myphotoswipe = $ ("#galería a"). Photoswipe ({EnableMouseWheel: false, Enablekeyboard: false});
});
Código HTML
<!- Ul Li y otras cosas se usan para mostrar miniaturas, y también se pueden ajustar según sea necesario. El elemento <img> a continuación es una miniatura. Si no es necesario, SRC se puede configurar en vacío ->
<ul id = "galería">
<li> <a href = "imágenes/full/01.jpg"> <img src = "Images/thumb/01.jpg"/> </a> </li>
<li> <a href = "imágenes/full/02.jpg"> <img src = "Images/thumb/02.jpg"/> </a> </li>
<li> <a href = "imágenes/full/03.jpg"> <img src = "Images/thumb/03.jpg"/> </a> </li>
<li> <a href = "imágenes/full/04.jpg"> <img src = "Images/thumb/04.jpg"/> </a> </li>
<li> <a href = "imágenes/full/05.jpg"> <img src = "Images/thumb/05.jpg"/> </a> </li>
<li> <a href = "imágenes/full/06.jpg"> <img src = "Images/thumb/06.jpg"/> </a> </li>
</ul>
Descripción del parámetro
1. AllowUserZoom: permite a los usuarios hacer doble clic para ver las imágenes con zoom en/movimiento. Valor predeterminado = verdadero
2. AUTOSTARTSLIDSHOW: Cuando Photoswipe se activa, la presentación de diapositivas se reproducirá automáticamente. Valor predeterminado = falso
3.LOWROTATATIONUNUSERZOOM: Solo compatible con iOS: permite a los usuarios rotar imágenes con gestos en el modo Zoom/Pan. Valor predeterminado = falso
4.ButtonHideEnabled: 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
5.CaptionandToolBarautohidedLay: 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)
6.CaptionAndToolBarflipposition: Alternar la barra de título y la barra de herramientas (deje que se muestre el título en la parte inferior y la barra de herramientas se muestra en la parte superior). Valor predeterminado = falso
7.CaptionandToolBarhide: Ocultar barra de título y barra de herramientas. Valor predeterminado = falso
8.CaptionandToolBaropacity: Transparencia de la barra de título y barra de herramientas (0-1). Valor predeterminado = 0.8
9.CaptionAndToolBarShowEmptyCaptions: La barra de título se muestra incluso si el título de la imagen actual está vacío. Valor predeterminado = verdadero
10.cachemode: modo de caché, code.photoswipe.cache.mode.normal (predeterminado, normal) o code.photoswipe.cache.mode.aggressessess (radical, activo). Decide cómo Photoswipe administra el caché de la caché de imágenes.
11. 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.
12.Doubletapspeed: el intervalo máximo para hacer doble clic. Valor predeterminado = 300 (ms)
13.DoOBLETAPZOOMLEVEL: cuando el usuario hace doble clic, el aumento múltiple es el nivel predeterminado de "zoom-in". Valor predeterminado = 2.5
14.enabledRag: permite arrastrar la imagen anterior/siguiente a la interfaz actual. Valor predeterminado = verdadero
15.Enablekeyboard: permita las operaciones del teclado (conmutación de flecha izquierda y derecha, salida de ESC, ingrese la reproducción automática, pantalla de barra espacial/barra de título oculta/salida). Predeterminado = verdadero
16.NableMouseWheel: permite la operación de la rueda del mouse. Predeterminado = verdadero
17.FadeInspeed: la velocidad (duración) del elemento de efecto, milisegundos. Predeterminado = 250
18.FadeOutSpeed: la velocidad (duración) del elemento de efecto de desvanecimiento, milisegundos. Predeterminado = 250
19.imageScalEmethod: método de escala de imagen (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"
20. Invertmouse Wheel: 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
21.JQueryMobile: indica si Photoswipe está integrado en el proyecto móvil jQuery. Por defecto, Photoswipe intentará resolver esto para usted
22.JQueryMobileDialoghash: la etiqueta hash de JQuery Mobile utilizada en la ventana y las páginas de diálogo. Valor predeterminado = "& ui-state = diálogo"
23.OOP: Si el álbum buce automáticamente. Predeterminado = verdadero
24.Margin: el intervalo entre dos imágenes, la unidad es píxeles. Predeterminado = 20
25.MaxuserZoom: aumento máximo. Predeterminado = 5.0 (establecido en 0 será ignorado)
26.MinuserZoom: el múltiplo de reducción más pequeño de la imagen. Predeterminado = 0.5 (establecido en 0 será ignorado)
27. Mousewheelspeed: sensibilidad en respuesta a la rueda del mouse. Predeterminado = 500 (ms)
28.NextPreviousSlidespeed: cuántos milisegundos se retrasarán cuando se haga clic en los botones anteriores y próximos. Predeterminado = 0 (cambiar ahora)
29. Preventhide: evita que los usuarios cierren 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
30.Preventslideshow: bloquea el modo de reproducción automática. También ocultará el botón de reproducción en la barra de herramientas. Predeterminado = falso
31.slideshowDelay: ¿Cuánto tiempo se tarda en jugar la siguiente imagen en modo de juego automático? Predeterminado = 3000 (ms)
32. Slidespeed: el momento en que la imagen se desliza hacia la vista. Predeterminado = 250 (ms)
33. SWIPETHROLD: ¿Cuántos píxeles se desliza con los dedos para activar un evento de gesto de deslizamiento? Predeterminado = 50
34.Swipetimethress: 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
35.SlidetimingFunction: Función de flexión al deslizar. Predeterminado = "facilidad"
36.zindex: el valor inicial de zindex. Predeterminado = 1000
37.EnableUiWebViewRepositionTimeOut: verifique si la orientación del dispositivo ha cambiado. Predeterminado = falso
38.UiWebViewResetPositionDelay: el tiempo para verificar si la dirección del dispositivo cambia regularmente es 500 (MS)
39.PreventDefaultTouchEvents: bloquea el evento táctil predeterminado, como el desplazamiento de la página. Predeterminado = verdadero
40.Target: 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.
Funciones personalizadas
getToolBar: function () { /*Devuelve la cadena HTML que se mostrará en la barra de herramientas* /}, getImageSource: function (el) { /*Tell Gallery cómo obtener el SRC de la imagen. Por defecto, la galería supone que usa la etiqueta <a> para envolver la miniatura <img>, y el atributo href de la etiqueta <a> es la URL de la imagen completa. En este momento, este método se puede usar para devolver la ruta de la imagen del elemento correspondiente. Puede ser de todo tipo. Por ejemplo, el atributo REL o algo así. Sería más fácil tener jQuery. */ return el.getAttribute ('rel'); }, getImageCaption: function (el) { /** Al igual que el método getImageseurce, este método devuelve el título de la imagen. Por defecto, Gallery busca el atributo ALT de la imagen. * /}, getImageMetadata: function (el) { / ** Si escucha OnDisplayImage, entonces puede obtener información adicional a través de esta función. Y use */ return en OnDisplayImage {longDescription: el.getattribute (el, 'data-long-description')}}Para los teléfonos Android, un clic hará que el problema de hacer clic en una capa esté cerrado, y la capa inferior aún activará el evento de clic. Nuestra solución es la siguiente:
// Los clics de activación en múltiples niveles en los teléfonos Android. Utilizamos un temporizador para interceptar var event_timeout = 500; // prevenir múltiples desencadenantes de eventos // bloquea los eventos consecutivos en poco tiempo var multiclickprevent = false; function preventMultLick () {if (multiclickprevent) {return false; } multiclickprevent = true; Window.setTimeOut (function () {multiclickPrevent = false;}, event_timeout); devolver verdadero; }; // adaptarse al navegador var userAgent = navigator.useragent; var comoiios = useragent.match (/iPad | iPhone | iPod/i); var likeandroid = useragent.match (/android/i); var especialClick = "hacer clic"; if (me gusta) {specialClick = "touchStart haga clic"; } else if (skeandroid) {specialClick = "touchStart haga clic"; } /Ejemplo $ (". T_right"). Live (specialClick, function () {if (preventMultLick ()) {// realizar otras operaciones} else {// else es rechazar la operación, puede devolver directamente falso u otro retorno falso;}}); // Ejemplo $ ("Body"). Live (SpecialClick, Function () {if (PreventMultLick ()) {// realizar otras operaciones}});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.