Photoswipe.js Site oficial: http://photoswipe.com/, arquivos PhotosWipe e exemplos relacionados podem ser baixados neste site.
Esse componente é usado principalmente para exibir imagens e álbuns e é muito prático.
1. Usar este componente requer dois arquivos JS
1 <script type = "text/javaScript" src = "simples e-inheritance.min.js">
2 <script type = "text/javascript" src = "code-photosWipe-1.0.11.min.js"> <!-A versão mais recente atual deve ser 1.0.11->
2. Então a estrutura da página pode ser assim
<div id = "Gallery"> <div> <div> <a href = "Images/Full/01.jpg"> <img src = "Images/Thumb/01.jpg"/> </a> </div> <div> <a href = "imagens/full/02.jpg"> <migs> href = "Images/Full/04.jpg"> <img src = "Images/Full/04.jpg"> <img src = "Images/Full/04.jpg"> <img src = "imagens/thumb/04.jpg"/> </a> </div> <div> <a href = "imagens/full/full/full/full/full/full/full/full/full/full/full/full/full/full/full/Full/Full/FULL/04.JPG"/> </a> </div> <div> <a " src = "imagens/thumb/05.jpg"/> </a> </div> <div> <a href = "imagens/full/06.jpg"> <img src = "imagens/thumb/06.jpg"/> </a> </div> </div> </div>
De fato, além da estrutura da página, as únicas coisas que são realmente úteis nesse código HTML são id = "Gallery" e <a href = "image"> </a> (será explicado posteriormente). A outra classe desempenha apenas um papel no embelezamento da estrutura da página original (diferente da página que você realmente deseja ter o efeito, ou seja, você só precisa digitar de acordo com a estrutura da página acima, e o efeito da página deseja é concluído pelo próprio plugin JS e você não precisa escrever o layout do efeito).
A página requer JS e estrutura de página, e o seguinte é usar o plug-in.
3. Você pode usar duas maneiras de declarar plug-in
1. Isso é feito adicionandoEventListener () no navegador padrão.
document.addeventListener ("domcontentLoaded", function () {code.photosWipe ('a', '#galeria'); // Isso envolve a identificação da estrutura da página acima da estrutura da página, na estrutura da imagem, na estrutura da página, na estrutura da página, na estrutura da imagem, na estrutura da página ", da figura", na estrutura da página ", na estrutura da imagem", da figura ". para}, false);2. Como usar o jQuery:
$ (document) .ready (function () {$ ("#Galeria A"). PhotosWipe ();});4. Com essa configuração, sua página provavelmente será assim.
O efeito da página no início:
Depois de clicar em qualquer imagem, a forma da página se torna a seguinte (esta página é realmente a página que eu realmente quero):
Você pode ver claramente o conteúdo em alt em <img /> acima da página, e haverá quatro botões abaixo, representando: feche a página e retorne à aparência original (ou seja, a imagem acima), reprodução automática, imagem da página anterior e imagem da próxima página.
O efeito desse álbum aparece. Obviamente, você pode usar o mouse para deslizar para a esquerda e para a direita nesta página. Se você estiver em um dispositivo portátil, também poderá deslizar para a esquerda e para a direita no seu dedo.
Este plugin tem muitas propriedades:
AllowUserZoom: permite que os usuários cliquem duas vezes para visualizar as imagens, ampliando/mova-se. Valor padrão = true
ASTATARTSLIDESSHOW: Quando o PhotosWipe é ativado, a apresentação de slides será reproduzida automaticamente. Valor padrão = false
AllowrotationOnUserZoom: Somente suportado pelo iOS - permite que os usuários girem imagens com gestos no modo Zoom/Pan. Padrão = false
BackButtonHideenabled: Pressione a tecla Return para ocultar os slides do álbum. É usado principalmente pelo Android e BlackBerry. Suporta BB6, Android v2.1, iOS 4 e versões mais recentes. Valor padrão = true
LegendToolbaraUtohidelay: O tempo de atraso é oculto automaticamente pela barra de título e pela barra de ferramentas. O valor padrão é = 5000 (ms). Se definido como 0, ele não será oculto automaticamente (toque/clique para alternar visível e oculto)
Legenda e Posição de alojamento entre a barra de título e a barra de ferramentas (deixe a legenda ser exibida na parte inferior e a barra de ferramentas é exibida na parte superior). Valor padrão = false
LegendAndToolBarhide: ocultar barra de título e barra de ferramentas. Valor padrão = false
LegendaAndToolBaropacity: Transparência da barra de título e barra de ferramentas (0-1). Valor padrão = 0,8
LegendAndToolBarShowEmptyCons: exibe a barra de título, mesmo que o título da imagem atual esteja vazio. Valor padrão = true
Cachemode: modo de cache, code.photoswipe.cache.mode.normal (padrão, normal) ou code.photoswipe.cache.mode.aggressive (radical, ativo). Decide como o PhotosWipe gerencia o cache do cache da imagem.
O modo agressivo definirá ativamente o tipo de imagens não "atuais, anteriores e próximas" que estão vazias. Será útil para transbordar de memória nos navegadores iOS mais antigos. Na maioria dos casos, o modo normal está ok.
DoubletapsPeed: o intervalo máximo para clicar duas vezes. Valor padrão = 300 (MS)
DoubleTapZoomLevel: Quando o usuário clica duas vezes, o múltiplo de ampliação é o nível padrão de "zoom-in". Valor padrão = 2,5
EnabledRag: permite arrastar a imagem anterior/próxima para a interface atual. Valor padrão = true
EnableKeyboard: Permitir operações de teclado (comutação de seta esquerda e esquerda, saída de ESC, insira reprodução automática, exibição da barra de espaço/barra/saída de título oculto). Padrão = true
EnableMousewheel: permite a operação da roda do mouse. Padrão = true
Fadeinspeed: A velocidade (duração) do elemento de efeito, milissegundos. Padrão = 250
FadeoutSpeed: a velocidade (duração) do elemento de efeito, milissegundos. Padrão = 250
ImagesCalemethod: Método de escala de imagem (modo). Valores opcionais: "Fit", "FitNousCale" e "Zoom". O modo "Fit" garante que a imagem se adapte à tela. "FitNousCale" é semelhante a "Fit", mas não amplia a imagem. "Zoom" exibirá a imagem na íntegra, mas é possível que a escala de imagem não seja igualmente proporcional. Padrão = "ajuste"
Invertmouse Wheel: Inverta a roda do mouse. Por padrão, rolar para baixo no mouse mudará para a próxima foto e para a imagem anterior. Padrão = false
JQueryMobile: indica se o PhotosWipe está integrado ao projeto móvel jQuery. Por padrão, o PhotosWipe tentará resolver isso para você
JQueryMobiledialoghash: tag de hash do jQuery Mobile usado para as páginas de janela e diálogo. Valor padrão = "& ui-state = diálogo"
LOOP: Se o álbum está automaticamente. Padrão = true
Margem: o intervalo entre duas imagens, a unidade é pixels. Padrão = 20
MaxUserzoom: ampliação máxima. Padrão = 5.0 (definido como 0 será ignorado)
Minuserzoom: a menor redução múltipla da imagem. Padrão = 0,5 (definido como 0 será ignorado)
MouseWheelspeed: sensibilidade em resposta à roda do mouse. Padrão = 500 (ms)
NextPreviousSlidesPeed: quantos milissegundos serão adiados após clicar nos botões anteriores e próximos. Padrão = 0 (interruptor agora)
PreventHide: impede o usuário de fechar o PhotosWipe. Ele também ocultará o botão "Fechar" na barra de ferramentas. Use-o na página exclusiva (o exemplo são exemplos/08-exclusivo-mode.html no código-fonte). Padrão = false
Prevê a apresentação: bloqueia o modo de reprodução automática. Ele também ocultará o botão de reprodução na barra de ferramentas. Padrão = false
SlidesHowDelay: Quanto tempo leva para reproduzir a próxima foto no modo de reprodução automática? Padrão = 3000 (ms)
Slidespeed: o tempo em que a imagem desliza para a vista. Padrão = 250 (ms)
SwipeThreshold: Quantos pixels são usados para deslizar um dedo para acionar um evento de gesto de furto. Padrão = 50
SwipeTImethesHold: define o número máximo de milissegundos para acionar o gesto de deslizamento. Se estiver muito lento, não acionará o slide e arrastará apenas a posição da foto atual. Padrão = 250
SlideTimingFunction: Função de diminuição ao deslizar. Default = "Desente-Out"
Zindex: o valor inicial do Zindex. Padrão = 1000
enableuiwebviewRePositionTimeout: verifica se a orientação do dispositivo mudou. Padrão = false
UIWebViewResetPositionDelay: a hora de verificar se a direção do dispositivo muda regularmente é de 500 (ms)
PreventDefaultTouchEvents: blocos eventos de toque padrão, como rolagem de página. Padrão = true
Alvo: deve ser um elemento DOM legal (como o DIV). O padrão é a janela (página completa). Se for um DOM de baixo nível, ele será exibido no DOM e pode não estar em tela cheia.
Se você não precisar exibir a primeira página e exibir diretamente a segunda página, poderá defini -la assim:
$ (document) .ready (function () {// Configure o photosWipe, definindo "prevenHhide: true" var thumbels = code.photoSwipe ('a', '#gallery', {prevenHide: true}); code.photoswipe.current.show (0);});Obviamente, este plugin tem muitas outras funções de escuta:
document.addeventListener ('DomContentLoaded', function () {// onBeforShow Chame esse método antes que a galeria esteja prestes a ser exibida.code.photoswipe.current.addeventListener (code.photoswipe.eventTypes.onBeSesHow, função (e) {Console.Ole.Log.Log.Log.Ol (consump). Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onShow, function (e) {console.log ("onbeforShow");}); console.log (ONSHOW ");}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.ohide, function (e) {console.log ('ondringa');}); 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');); o slideshowcode.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstart, function (e) {console.log ('OnSlidesHesCheSchestart');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onslideshowstop, function (e) {console.log ('OnslowShowstop');}); Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforeCaptionAndToolBarshow, função (e) {console.log ('onBeforeCaptionAndToolbarshow');}; Code.photoswipe.current.addeventListener (code.photoswipe.eventtypes.onbeforeCaptionAndToolBarhide, function (e) {console.log ('OnBeForECaptionAndToolBarHide'); OnBeFeCaptionAndToolBarhide geralmente desencadeia o OnBeFeCaptionAndToolBarhide ou o OnBeForeCaptionAndToolBarhide Code.photoSwipe.Current.adDeventListener (Code.PhotosWipe.EventTypes.OnviewPortClin, função (E) {Console.Ol.Como o método de chamada da interface da API não é encontrado no site oficial do PhotosWipe, e o nível atual de JS não é muito bom, algumas de suas interfaces de API não são basicamente bem compreendidas. No entanto, quando verifiquei o exemplo, descobri que uma variável geralmente aparece, code.photoSwipe ou code.photosWipe.current. Todos eles foram conduzidos no console. Quando eu digitei o code.photoSwipe, o seguinte conteúdo apareceu:
Embora você não consiga entender completamente o que é, você pode ver que o elemento atual está incluído. Em seguida, digite o code.photoswipe.current no console para obter o seguinte conteúdo:
Você pode encontrar mais informações aqui, por exemplo: CurrentIndex indica que a imagem atual é indexada na lista e toda a conexão é code.photoswipe.current.currentIndex representa a posição indexada da imagem atual. Esta informação é muito importante para mim. Podemos exibir informações de página diferentes em diferentes páginas através dessas informações.
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.