Foi lançado agora (graças ao autor alerta Michael Jackson JI ) versão 3.0 beta Shadowbox.js . Além do novo design do site aqui é o das alterações mais importantes nessa versão anterior:
Artigos com a tag 'Discreto JavaScript'
Shadowbox 3.0 beta
Accordion Simples com a classe USimpleTabStrip
A classe USimpleTabStrip , apresentado em TabStrip simples discreta , também podem ser utilizados para realizar um acordeão menu simples .
offerti da Scriptaculous : Usando os efeitos de BlindUp() e BlindDown() oferecida pela Scriptaculous :
1 2 3 4 5 6 7 8 9 10 | função init () { USimpleTabStrip ( ) ; USimpleTabStrip uts = new (); ; uts Init ().; function ( e ) { UTS. OnShow = função (s) { ( e ) ; . novo efeito BlindDown (s); } function ( e ) { UTS. onHide = função (s) { ( e ) ; . novo efeito BlindUp (s); } } |
E pela substituição de elementos HTML ( fonte HTML ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | "accordion" > < div class = "acordeão"> "#acc1" > Accordion 1 < / a > < um href = "# ACC1"> Acordeão 1 </ uma > "acc1" >< / a > < um name = "ACC1"> </ uma > < div > h1 > < h1 > Content # 1 </ h1 > p > < p > Blá, blá, blá .... </ p > </ div > "#acc2" > Accordion 2 < / a > < um href = "# ACC2"> Acordeão 2 </ uma > "acc2" >< / a > < um name = "ACC2"> </ uma > < div > h1 > < h1 > Conteúdo # 2 </ h1 > p > < p > Blá, blá, blá .... </ p > </ div > "#acc3" > Accordion 3 < / a > < um href = "# ACC3"> Acordeão 3 </ uma > "acc3" >< / a > < um name = "ACC3"> </ uma > < div > h1 > < h1 > # 3 Conteúdo </ h1 > p > < p > Blá, blá, blá .... </ p > </ div > </ div > |
É obtido por um acordeão menu simples que pode ser usado em um extremamente rápido.
TabStrip Simples Discreto
USimpleTabStrip JavaScript discreta é melhorar a âncora do link clássico (ainda) dentro de uma página HTML. Esta fonte é uma melhoria da função apresentada em TabStrip discreta . Nesta versão, bem como alinhar o código para liberar 1,6 de prototype.js criou uma classe real para lidar com o TabStrip. A versão apresentada aqui é muito simples e direto. Sua obra principal reside na adição de um evento de clique com o âncora do link normal. Estilos CSS não são apresentados também, só para deixar o máximo de liberdade de ação, mas você pode obter um TabStrip eficaz com algumas linhas extras de código CSS, consulte Adicionando estilos CSS abaixo.
Código HTML
A classe USimpleTabStrip trabalha em um HTML simples, sftuttando a âncora ( <a name></a> ):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <! - Simples lista de links na página -> < ul > = "#tbs1" > Link 1 < / a >< / li > < los > < um href = "# Tbs1"> Link 1 </ um > </ viagem > = "#tbs2" > Link 2 < / a >< / li > < los > < um href = "# tbs2"> Link 2 </ um > </ viagem > = "#tbs3" > Link 3 < / a >< / li > < los > < um href = "# tbs3"> Link 3 </ um > </ viagem > </ ul > <! - Blocos / guias -> "tbs1" >< / a > < um name = "Tbs1"> </ uma > < div > h1 > < h1 > Lista # 1 </ h1 > p > < p > Blá, blá, blá .... </ p > </ div > "tbs2" >< / a > < um name = "tbs2"> </ uma > < div > h1 > < h1 > Lista # 2 </ h1 > p > < p > Blá, blá, blá .... </ p > </ div > "tbs3" >< / a > < um name = "tbs3"> </ uma > < div > h1 > < h1 > Dados # 3 </ h1 > p > < p > Blá, blá, blá .... </ p > </ div > |
funziona da contenitore. A etiqueta de div logo abaixo da âncora a funcionar como um recipiente.
Técnicas de substituição de texto em Flash
A técnica de substituição de texto que apresento hoje é, em alguns aspectos, muito interessante. Ao contrário da imagem clássica de substituição é para usar o CSS , esta técnica usa um filme do Flash para substituir os títulos de nosso site. Embora seja um pouco mais articulada, uma vez que exige a criação de um filme flash e do uso de JavaScript, permite a obtenção de uma série de vantagens consideráveis:
- Mantém a acessibilidade 'para o site usando um True-Discreto Javascript para que crawlers e spiders continuar a ver a página HTML mais simples e correta
- Não exige a criação de n por títulos de imagens n. Leva apenas um filme para substituir todos os títulos do nosso site, com uma economia considerável em termos de download
- Ele permite que você criar títulos simples, mas também com fonte não são normalmente usados na Web
- O texto pode ser processado em HTML, graças aos recursos do Flash
- O texto é selecionável
- Sendo um filme do Flash, você pode inserir qualquer tipo de interatividade e animações
Você vai notar, também, que neste processo são praticamente não considerado CSS!
Shadowbox assetURL: definir o caminho da imagem
Quando Shadowbox abre a janela para mostrar um conteúdo (imagens, iframes, filme, etc ...), displays, à espera de um gif animado que vem no pacote. Se a página estiver usando Shadowbox está no mesmo nível da pasta de imagens, tudo funciona bem. Por padrão, na verdade, procure o gif animado abaixo imagens shadowbox / loading.gif - ou imagens / carregamento light.gif-se escolher estilos de luz (shadowbox-light.css). Caso contrário, e muitas vezes há também o risco de não accorgesene, se estamos em uma árvore diferente, ele gera um código 404 agradável - página não viga, em nosso arquivo caso não encontrado!
Para resolver o problema apenas inicializar Shadowbox com um parâmetro adequado que aponta para o caminho absoluto para a pasta de imagens: undolog.com de, por exemplo, eu coloquei o gif animado de carregar diretamente na raiz presente na pasta de imagens (como cerca de um bilhão outros locais 
. Para tornar esta pasta acessível a Shadowbox, independentemente do caminho, entrei semplicemenete:
1 2 | / Shadowbox / Init com parâmetro assetURL assetURL : 'http://www.undolog.com/' } ) ; Shadowbox Init ({assetURL: 'http://www.undolog.com/'}).; |
Todos os clones de Mesa em uma matriz dinâmica
Planetozh criou uma bela paisagem da ferramenta dinâmica que pode listar todas as bibliotecas Javascript como Lightbox.
Usando um painel (ver imagem à esquerda) com um número de "carrapatos" (caixa), que indicam as várias características das bibliotecas, você pode executar um filtro obtendo assim uma lista de uma ou mais bibliotecas que fazem o trabalho. Esperamos que o autor mantém atualizada esta página grande, muito útil para desembaraçar uma das bibliotecas de numerosos e poderosos deste tipo.
Discreto SWFObject 2,0
SWFObject é um script JavaScript é usado para inserir o conteúdo em Flash em páginas da Web. Sua principal função é eliminar o pedido para ativar o controle por Microsoft Internet Explorer (que, de qualquer maneira, está sendo interrompido - ver aqui ) e, mais interessante, a capacidade de verificar automaticamente e instalar o Flash Player, se necessário. SWFObject pode ser considerado uma boa alternativa para o kit para instalar / detectar desde que o mesmo pode ser gerada dentro do IDE e Adobe Flash (todos suas versões). Com a versão 2.0 , SWFObject melhora o seu desempenho e sua utilização. Como indicado na documentação oficial , mudou-se para o Google Code, de novo nesta versão são tantos a ponto de torná-lo não compatível com versões anteriores. Isso resulta em praticamente uma revisão completa do código para quem decidir fazer o upgrade de uma versão anterior do SWFObject 2.0.
O script está agora alinhado com as mais recentes normas, tanto sintática e de que "não intrusiva". Ele suporta todas as características anteriores, como a instalação rápida do Flash Player, com um código mais claro e fácil de usar. A passagem dos parâmetros, por exemplo, pelo jogador para JavaScript Flash (e, portanto, para o nosso filme) é agora muito mais clara e mais versátil. Também introduziu dois modos principais: estático e dinâmico, dependendo do tipo e processo de design da página que estamos fazendo.
Bon e realmente gostei do fato de que é a ferramenta online que gera código para SWFObject nós.
LINK:
Effect.Tween Scriptaculous: como funciona
De todas as bibliotecas "Web 2.0" disponível, scriptaculous é certamente o mais mal documentado! No site oficial, muitas vezes lento, a documentação está incompleta, mal feita e difícil de usar. Com os últimos lançamentos, então, algumas novas funcionalidades estão completamente ausentes, assim como o novo núcleo efeito Tween (Effect.Tween). O último, de uma maneira semelhante à de Tween Flash, permite manipular transições personalizados. SINOPSE sua base é o seguinte:
Luz galeria: Lightview 2.0.0_rc1
Aqui está mais um recém-lançado biblioteca JavaScript discreta para galerias de imagens e muito mais. Lightview em 2.0.0_rc1 lançamento , também adiciona recursos para janela "aberta" com o conteúdo que vai além da simples imagem: filmes em Flash, QuickTime , Forma e IFRAME! Em comparação à versão anterior (1.1.0 - que trata de apenas imagens), então, esta versão candidata é recursos avançados também estão presentes em outras bibliotecas . . As ferramentas necessárias por Lighview para trabalhar são muito bem conhecidos Prototype 1.6.0.2 e Scriptaculous 1.8.1 . Gliattributi usado para gerenciar a biblioteca são class e rel .
Um aspecto interessante desta biblioteca é o extremo cuidado com que o gráfico aparece.
Nota: 9 - Início Lightview
Biblioteca de Luz: Slimbox por um Shadowbox, galerias em Javascript
Alguns podem dizer - e com razão - o suficiente! Bibliotecas JavaScript (discreta - não intrusiva, ou parcialmente) para gerenciar imagens e galerias existem tantos. De qualquer forma aqui está a lista, com prós e contras, o melhor que eu tentei.
Slimbox 1:41
Extremamente mínima 7K (versão 1,41), exige mootools para trabalhar. Como indicado na página inicial é um gráfico verdadeiro clone Lightbox , veremos a seguir. Honestamente, além da extrema compacidade da biblioteca não possui características peculiares. No mesmo local, no entanto, você também pode encontrar um script para gerar em tempo de execução reflexões ... você pode querer limitar esse 
Nota: -6 - Slimbox Home Page, Home Page Reflection.js para MooTools
Lightbox2
Um dos mais conhecidos e simples. Gerencia imagens contidas neste comunicado são (por isso não funciona com o QuickTime, Flash, etc.) Para sua operação, requer Prototype e Scriptaculous . Use o atributo rel para identificar os links de suas imagens para ser processado:
1 |
Como as outras bibliotecas que vamos ver, ele suporta o modo de apresentação de slides, inserindo colchetes qualquer identificador em uma série de link / imagem:
1 2 3 | "images/image-1.jpg" rel = "lightbox[roadtrip]" > image #1 < / a > < um href = "images/image-1.jpg" rel = "lightbox [roadtrip]"> image # 1 </ uma > "images/image-2.jpg" rel = "lightbox[roadtrip]" > image #2 < / a > < um href = "images/image-2.jpg" rel = "lightbox [roadtrip]"> image # 2 </ uma > "images/image-3.jpg" rel = "lightbox[roadtrip]" > image #3 < / a > < um href = "images/image-3.jpg" rel = "lightbox [roadtrip]"> image # 3 </ uma > |
Nota: 6 - Página Inicial Lightbox2
LightWindow 2,0
Mesmo isso é muito comum! Afinal, como entender o que é o mais utilizado? . No entanto, é extremamente abrangente e versátil. No local está o pedido de doações para a compra de um Mac ... um pouco invasivo e urgente ... Enfim, como o anterior, para o seu funcionamento, exige a presença de Prototype e Scriptaculous . Ao contrário de seu antecessor, no entanto, isso permite que você visualize tipos moltisiimi de arquivos: a partir das imagens, filmes QuickTime, animações em Flash, externos páginas HTML e PDF. ) altri obbligatori ( class e params - per impostare il comportamento della libreria). Por outro lado, usa vários atributos, alguns opcionais ( author, caption e title ) outro (obrigatório class e params - para definir o comportamento da biblioteca). Por exemplo, para exibir um show de galeria ou slide usando o atributo rel :
1 2 3 | "gallery/0-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Left Behind" caption = "Look's super tasty!" author = "Unknown" > image #1 < / a > < um href = "gallery/0-sushi.jpg" class = "LightWindow" title rel = "[Sushi]" = "Left Behind" caption = "Look super saboroso!" author = "Desconhecido"> image # 1 </ a > "gallery/1-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "Beware of warewolves..." caption = "I shouldn't be doing this when I am hungry" author = "Unknown" > image #2 < / a > < um href = "gallery/1-sushi.jpg" class = "LightWindow" title rel = "[Sushi]" = "Cuidado com warewolves ..." caption = "Eu não deveria estar fazendo isso quando eu estou com fome" author = "Desconhecido"> image # 2 </ uma > "gallery/2-sushi.jpg" class = "lightwindow" rel = "[Sushi]" title = "That was good!" caption = "Take that sushi!" author = "Unknown" > image #3 < / a > < um href = "gallery/2-sushi.jpg" class = "LightWindow" rel = "[Sushi]" title = "Essa foi boa!" caption = "Pegue o sushi!" author = "Desconhecido"> image # 3 </ uma > |
Pontuação: 8 - Página Inicial LightWindow 2,0
Shadowbox 1.0B
Embora o beta versão 1.0, este é talvez o mais completa biblioteca, tanto do ponto de vista funcional para ambas as bibliotecas suporte. Para seu funcionamento, de fato, você pode escolher entre uma variedade de quadros, com o arquivo "adaptadores" especialmente fabricadas e fornecidas pelo autor:
- Yahoo! User Interface Biblioteca (yahoo, dom, evento, anim)
- Ext (autônomo, ext-core.js)
- Prototype + Scriptaculous
- jQuery
- MooTools (requer Fx.Styles e suas dependências)
- Dojo Toolkit (graças Peter Higgins)
O efeito visual (configurável através da pele / css), então, ao contrário dos outros, é definitivamente mais atraente. Os atributos são usados apenas rel onde, no seu interior, encontram espaço todos os outros parâmetros de configuração. Por exemplo, para realizar uma galeria, é só usar:
1 2 |
Se você deseja definir algumas opções ( consulte o site para lista completa ) basta usar a seguinte sintaxe:
1 |
Na Internet podem encontrar outras, como Highslide JS . Na verdade, se alguma outra biblioteca que quer denunciar o me ... Enfim, pessoalmente, prefiro Shadowbox para escalabilidade, simplicidade e cruz-quadro.
Nota: 9 - Top Shadowbox 1.0B
Últimos Comentários
Gabriel : Olá, interessante artigo. Eu preciso de algo semelhante, mas com algumas mudanças. Em um ...
sebastian : grande parcela - muito obrigado!
Assunto : muito útil mesmo! Eu tentei isso e é exatamente o que eu precisava. Agora eu quero saber como faço para obter ...
vik : Com a ajuda estratégica!
Pimenta : Olá, eu não sei se você é um dos criadores do plugin WP Bannerize. Tenho visto um ...