Artigos com a tag 'slideshow'

Shadowbox 3.0 beta

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:

Leia mais ...

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/'}).;

Leia mais ...

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.

imagem

imagem 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.

Leia mais ...

Luz galeria: Lightview 2.0.0_rc1

Lightview 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

Leia mais ...

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

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
"images/image-1.jpg" rel = "lightbox" title = "my caption" > image #1 < / a > < um href = "images/image-1.jpg" rel = "lightbox" title = "caption minha"> image # 1 </ uma >

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

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

Shadowbox 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:

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
"beach.jpg" rel = "shadowbox[Vacation]" > The Beach < / a > < um href = "beach.jpg" rel = "shadowbox [de férias]"> A Praia </ uma >
"pier.jpg" rel = "shadowbox[Vacation]" > The Pier < / a > < um href = "pier.jpg" rel = "shadowbox [de férias]"> O Pier </ uma >

Se você deseja definir algumas opções ( consulte o site para lista completa ) basta usar a seguinte sintaxe:

1
"myimage.jpg" rel = "shadowbox;options={overlayOpacity: 0.5, resize: false}" > My Image < / a > < um href = "myimage.jpg" rel = "shadowbox; opções = {overlayOpacity: 0,5, resize: false}"> Imagem Minha </ uma >

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

Leia mais ...


Pare SOPA