Versão do WordPress
Atualizações
Atualização 2.1 [ 14/06/2011 ]
- Adicionado Exemplo de AutoHeight + Chamadas de API
Atualizar 2.0 [ 09/06/2011 ]
- corrigidos erros
- Rebasbada para Phoenix Gallery – Os mesmos recursos da galeria + mais
- Adicionada navegação em miniatura
Introdução
JQuery Ken Burns Slideshowis A maneira perfeita de mostrar suas fotos/anúncios em grande estilo. Cada item tem um tempo de apresentação de slides separado e você pode editar o link, o destino e muitas outras configurações individuais apenas modificando o HTML.
Características
- suporta .pngs, .jpgs, .gifs
- API – PAUSE CALL, PLAY, GOTONEXT, GOTOPREV do seu HTML (fora da galeria)
- Opção automática – opção para automaticamente a galeria, dependendo da altura do conteúdo
- Suporta itens ilimitados – gire o quantos fotos você deseja
- Modo de apresentação de slides – com tempo independente para cada item que você pode definir no HTML fornecido
- values you can set up for each item – description (the description from the top), initialZoom(any value you wish), finalZoom, slideshowTime ( the time the banner rotator stays focused on the specific item ), burn effect time ( the time you wish the effect to take ), url (if no url is set the item will just be a image with no link on click ), transitionType(easeInSine,linear etc.) , initialposition, final position (choose from Topleft, TopCenter, Topright, Middleleft, Middlecenter, Middlerright, Bottomleft, BottomCenter, Bottomright)
- Redicável para o seu tamanho preferido – todo o conteúdo será posicionado adequado
Possíveis posições de panning (inicial e final)
Perguntas frequentes
Como definir o número de miniaturas, tenho essas imagens de retrato no slider. A navegação mostra apenas 2 delas, enquanto há espaço para 4?
Você não pode definir o número de miniaturas exibidas por ‘página’ porque é calculado automaticamente a partir da largura / altura do polegar e do espaço do polegar. Portanto, tente abaixar isso para mais polegares. Também existe outro parâmetro “Nav_arrow_size: 40” – este é o espaço que é alocado para cada seta (portanto, em 80 px padrão, são subtraídos para as setas) e você também pode diminuir isso para mais polegares.
É possível colocar um link nas imagens (a imagem principal fora das miniaturas)
Sim, claro, escreva
<a href="#"><img src="img/def1.jpg" /></a>
em vez de
<img src="img/def1.jpg" />
Eu tento adicionar links na descrição, mas ele quebra o script
Provavelmente você está fazendo algo assim
RUIM:
data-description="My link is <a href="http://something">here</a>"
O problema é que o “Inside Href quebra o” da descrição dos dados. As soluções são usadas ’em vez de “
BOM:
data-description='My link is <a href="http://something">here</a>'
Oi. Como posso parar o deslizamento automático do PhoenixGallery
você tem nos parâmetros
targetgallery.phoenixgallery({
transition_type:"random",
nav_type:"thumbsa",
nav_position:"up",
thumb_width:100,
thumb_height:75,
thumb_space:20,
nav_space:25,
nav_arrow_size:40,
settings_shadow:"off",
settings_autoresize:"off",
settings_autoheight:"off",
settings_pauseonrollover:"off",
settings_usethumbarrows:'off',
transition_strips_x:10,
transition_strips_y:5,
arrows_normal_alpha:1,
arrows_roll_alpha:0.3,
thumbs_normal_alpha:1,
thumbs_roll_alpha:0.3
})
Para desativar a apresentação de slides, basta adicionar um novo parâmetro Settings_slideshow e defina -o assim
targetgallery.phoenixgallery({
transition_type:"random",
nav_type:"thumbsa",
nav_position:"up",
thumb_width:100,
thumb_height:75,
thumb_space:20,
nav_space:25,
nav_arrow_size:40,
settings_shadow:"off",
settings_autoresize:"off",
settings_autoheight:"off",
settings_slideshow:"off",
settings_pauseonrollover:"off",
settings_usethumbarrows:'off',
transition_strips_x:10,
transition_strips_y:5,
arrows_normal_alpha:1,
arrows_roll_alpha:0.3,
thumbs_normal_alpha:1,
thumbs_roll_alpha:0.3
})
Por alguma razão, quando adiciono um link à imagem, o efeito de zoom não funciona mais.
Isso ocorre porque os atributos InitialZoom, Data-FinalZoom, Data-Effecttime etc. precisam estar no filho direto da Div. Por exemplo, se você tiver
< img src="img/1.jpg" data-finalZoom="2"/>
o efeito funcionará, mas se você adicionar link assim
<a href="#">< img src="img/1.jpg" data-finalZoom="2"/></a>
o efeito não funcionará. Você precisa mover os atributos para o filho direto da galeria como assim:
<a href="#" data-finalzoom="2">< img src="img/1.jpg" /></a>
Créditos
Fotos criativas – http://www.flickr.com/photos/markjsebastian/
Source