O PhotosWipe é um álbum de fotos/jogo projetado especificamente para dispositivos de toque móvel. É compatível com todos os navegadores iPhone, iPad, BlackBerry 6+ e desktop. A implementação subjacente é baseada no HTML/CSS/JavaScript e é um produto de álbum de fotos gratuito e de código aberto.
Para quem
Deixe o site móvel experimentar o álbum do álbum como o aplicativo nativo.
Excelentes recursos
O PhotosWipe fornece aos usuários uma interface interativa familiar e intuitiva de álbum de fotos.
Site oficial
http://www.photoswipe.com/
Exemplo de código -fonte
http://github.com/downloads/codecomputerlove/photoswipe/code.photoswipe-3.0.5.zip
Github
https://github.com/codecomputerlove/photoswipe
Demonstração online
http://www.photoswipe.com/latest/examples/04-jquery-mobile.html
Recursos de compatibilidade
O PhotosWipe é compatível com um grande número de dispositivos móveis e todas as bibliotecas de classe JavaScript populares/estruturas de desenvolvimento. Existem versões baseadas em jQuery, versões sem jQuery e versões compatíveis com jQuery móveis. Obviamente, tudo em um está no pacote de amostra de código -fonte.
Como usar
O PhotosWipe é uma biblioteca JavaScript independente que pode ser facilmente integrada ao seu site. Muitas otimizações foram feitas para navegadores móveis (webkits). Obviamente, para navegadores de desktop e jQuerymobile, as versões correspondentes também são fornecidas no pacote de código -fonte.
Referências da biblioteca de classes
<!- PhotosWipe referenciou Klass antes. Se você precisar aumentar a velocidade de carregamento, poderá adicionar uma tag/atributo de adiamento ao script->
<script type = "text/javascript" src = "klass.min.js"> </script>
<!- Nota importante, se você não usar a versão jQuery, ocorrerá um erro no IE. Claro, se você usar a versão jQuery, precisará apresentar jQuery->
<script type = "text/javascript" src = "code.photoSwipe-3.0.5.min.js"> </script>
Código de chamada
/* Adicione a escuta do evento DomContentLoaded, semelhante à função pronta da JQuery.
Exemplos de método padrão/01-default.html
Verifique o .examples/09-exclusivo modo-não-thumbnails.html para nenhum modo de miniatura.
*/
// O método PhotosWipe.attach recebe 3 parâmetros (coleta de elementos html, informações de configuração opcional e id de string opcional quando várias instâncias)
document.addeventlistener ('domcontentloaded', function () {
// Defina o PhotosWipe para vincular todas as tags <a> sob o contêiner com ID como galeria. Clique para ativar
// O objeto aqui é uma instância do PhotosWipe e você pode usar métodos correspondentes, como show (0), hide (), etc.
var myphotoSwipe = code.photoswipe.attach (window.document.querySelectorAll ('#Gallery A'), {EnableMousewheel: false, enableKeyboard: false});
}, false);
Se você usar o jQuery, o código de chamada é o seguinte:
// versão jQuery, o arquivo JS correspondente também precisa ser alterado no arquivo JS
// Consulte Exemplos/02-jQuery.html para obter detalhes para exemplos
$ (document) .ready (function () {
// O objeto aqui é uma instância do PhotosWipe e você pode usar métodos correspondentes, como show (0), hide (), etc.
var myphotosWipe = $ ("#Galeria A"). PhotosWipe ({EnableMousewheel: false, enableKeyboard: false});
});
Código HTML
<!- Ul Li e outras coisas são usadas para exibir miniaturas e também podem ser ajustadas conforme necessário. O elemento <MG> abaixo é uma miniatura. Se não for necessário, o SRC pode ser definido para esvaziar ->
<ul id = "Gallery">
<li> <a href = "imagens/full/01.jpg"> <img src = "imagens/thumb/01.jpg"/> </a> </li>
<li> <a href = "imagens/full/02.jpg"> <img src = "imagens/thumb/02.jpg"/> </a> </li>
<li> <a href = "imagens/full/03.jpg"> <img src = "imagens/thumb/03.jpg"/> </a> </li>
<li> <a href = "imagens/full/04.jpg"> <img src = "imagens/thumb/04.jpg"/> </a> </li>
<li> <a href = "imagens/full/05.jpg"> <img src = "imagens/thumb/05.jpg"/> </a> </li>
<li> <a href = "imagens/full/06.jpg"> <img src = "imagens/thumb/06.jpg"/> </a> </li>
</ul>
Descrição do parâmetro
1.arlowUserZoom: permite que os usuários cliquem duas vezes para visualizar as imagens ao ampliar/mover. Valor padrão = true
2.AutosTartSlideshow: Quando o PhotosWipe é ativado, a apresentação de slides será reproduzida automaticamente. Valor padrão = false
3.AllowrotationOnUserZoom: Somente suportado pelo iOS - permite que os usuários girem imagens com gestos no modo Zoom/Pan. Valor padrão = false
4.backbuttonhideenabled: pressione a tecla de retorno para ocultar os slides do álbum. É usado principalmente pelo Android e BlackBerry. Ele suporta BB6, Android v2.1, iOS 4 e versões mais recentes. Valor padrão = true
5.CaptionAndToolbaraUtohidelay: O tempo de atraso é oculto automaticamente pela barra de título e 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)
6.CaptionAndToolBarflipPosition: alterne 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
7.CaptionAndToolBarhide: ocultar barra de título e barra de ferramentas. Valor padrão = false
8.CaptionAndToolBaropacity: Transparência da barra de título e barra de ferramentas (0-1). Valor padrão = 0,8
9. Valor padrão = true
10.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.
11. 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.
12.DOUBLETAPSPEED: O intervalo máximo para clicar duas vezes. Valor padrão = 300 (MS)
13.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
14.EnabledRag: permite arrastar a imagem anterior/próxima para a interface atual. Valor padrão = true
15.EnableKeyboard: Permitir operações de teclado (comutação de seta esquerda e direita, saída de ESC, insira reprodução automática, exibição de barra de espaço/barra de título oculta/saída). Padrão = true
16.EnableMouse Wheel: Permite a operação da roda do mouse. Padrão = true
17.Fadeinspeed: A velocidade (duração) do elemento de efeito, milissegundos. Padrão = 250
18.FadeoutSpeed: A velocidade (duração) do elemento de efeito de desbotamento, milissegundos. Padrão = 250
19.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"
20.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
21.JQueryMobile: indica se o PhotosWipe está integrado ao projeto móvel jQuery. Por padrão, o PhotosWipe tentará resolver isso para você
22.JQueryMobiledialoghash: tag de hash do jQuery Mobile usada nas páginas da janela e diálogo. Valor padrão = "& ui-state = diálogo"
23.loop: se o álbum está automaticamente. Padrão = true
24.Margin: O intervalo entre duas imagens, a unidade é pixels. Padrão = 20
25.MaxUserZoom: ampliação máxima. Padrão = 5.0 (definido como 0 será ignorado)
26.MinuserZoom: A menor redução múltipla da imagem. Padrão = 0,5 (definido como 0 será ignorado)
27.MouseWheelspeed: Sensibilidade em resposta à roda do mouse. Padrão = 500 (ms)
28.NextPreviousSlidesPeed: quantos milissegundos serão adiados quando os botões anteriores e próximos forem clicados. Padrão = 0 (interruptor agora)
29.PretentHide: impede os usuários 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
30.PreventsLideshow: 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
31.SlidSHOWDELAY: Quanto tempo leva para reproduzir a próxima foto no modo de reprodução automática? Padrão = 3000 (ms)
32.PlidesPeed: O tempo em que a imagem desliza para a vista. Padrão = 250 (ms)
33.SwipeThreshold: Quantos pixels o dedo desliza para acionar um evento de gesto de deslizamento. Padrão = 50
34.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
35.SlidetimingFunction: Função de diminuição ao deslizar. Default = "Desente-Out"
36.zindex: o valor inicial do Zindex. Padrão = 1000
37.EnableuiWebViewRePositionTimeout: Verifique se a orientação do dispositivo mudou. Padrão = false
38.uiwebviewResetPositionDelay: a hora de verificar se a direção do dispositivo muda regularmente é de 500 (ms)
39.PreventDefaultTouchEvents: bloqueia o evento de toque padrão, como a rolagem da página. Padrão = true
40.Target: 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.
Funções personalizadas
getToolBar: function () { /*Retorna a sequência HTML a ser exibida na barra de ferramentas* /}, getImagesource: function (el) { /*Tiga da galeria como obter o SRC da imagem. Por padrão, a Gallery pressupõe que você use a tag <a> para envolver a miniatura <mg>, e o atributo href da tag <a> é o URL da imagem completa. Neste momento, esse método pode ser usado para retornar o caminho da figura do elemento correspondente. Pode ser de todos os tipos. Por exemplo, atributo rel ou algo assim. Seria mais fácil ter jQuery. */ return el.getAttribute ('rel'); }, getImageCaption: function (el) { /** Como o método getImagesource, esse método retorna o título da imagem. Por padrão, a galeria procura o atributo alt da imagem. * /}, getImageMetadata: function (el) { / ** Se você ouvir ondisplayImage, poderá obter meta informações extra nessa função. E use */ retornar no OnDisplayImage {LongDescription: el.getAttribute (el, 'dados de descrição')}}}Para os telefones Android, um clique fará com que o problema de clicar em uma camada seja fechado e a camada inferior ainda acionará o evento de clique. Nossa solução é a seguinte:
// Trigger clique em vários níveis nos telefones Android. Usamos um timer para interceptar var event_timeout = 500; // impedir vários gatilhos de eventos // bloquear eventos consecutivos em um curto período de tempo var multiclickprevent = false; função prevenvmulticlick () {if (multiclickprevent) {return false; } multiclickprevent = true; window.setTimeout (function () {multiclickprevent = false;}, event_timeout); retornar true; }; // Adaptar -se ao navegador var userAgent = navegator.UserAgent; var comoios = userAgent.match (/ipad | iphone | ipod/i); var gostandroid = userAgent.match (/android/i); var specialclick = "clique"; if (likeios) {specialclick = "touchstart clique"; } else if (likeandroid) {specialClick = "touchstart clique"; } /Exemplo $ (". T_RIGHT"). LIVE (SpecialClick, function () {if (PreventMulticlick ()) {// Execute outras operações} else {// senão rejeitar a operação, você pode retornar diretamente false ou outro retorno false;}}); // Exemplo $ ("Body"). Live (SpecialClick, function () {if (PreventMulticlick ()) {// Execute outras operaçõ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.