WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

Ken Burns Media Gallery / Slideshow

— Add-On para WorldWideScripts.net

@pt1wwsAssine o nosso feed para se manter atualizado!

Novo! Siga-nos o que você quiser!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress Versão

GALERIA suporta imagens, vídeo, áudio embutido Telefone iPad instalação minutos compatível Ken Burns navegação miniaturas de efeito e muito mais!

Atualizações

UPDATE 2.1 [14/06/2011]

  • acrescentou exemplo autoHeight + chamadas de API

UPDATE 2.0 [09/06/2011]

  • bugs corrigidos
  • Renomeada como Phoenix Gallery - galeria mesmas características + mais
  • navegação miniatura acrescentado

Introdução

jQuery Ken Burns Slideshowis a maneira perfeita de mostrar as suas imagens / anúncios em grande estilo. Cada item tem um tempo de slideshow separada e você pode editar o seu link, alvo e muitas outras configurações individuais apenas modificando o HTML.

Características

  • suporta.PNGs,.jpgs,.GIFs
  • API - chamar pausa, jogar, gotoNext, gotoPrev do seu html (fora da galeria)
  • autoHeight - opção de dimensionamento automático da galeria, dependendo da altura do conteúdo
  • suporta itens ilimitadas - girar como muitas imagens como você deseja
  • modo de apresentação - com o tempo independente para cada item que você pode definir no HTML fornecido
  • valores que você pode configurar para cada item - descrição (a descrição da parte superior), initialZoom (qualquer valor desejado), finalZoom, slideshowTime (o tempo o banner rotator permanece focado no item específico), queimar tempo efeito (o tempo que você gostaria que o efeito de tomar), url (se não houver url for definido o item será apenas uma imagem sem link clique), transitionType (easeInSine, etc. linear), initialPosition, a posição final (escolher topleft, topcenter, topright, middleleft, middlecenter, MiddleRight, bottomleft, bottomcenter, bottomright)
  • redimensionável para o seu tamanho preferido - todos os conteúdos posicionará adequada

Panning posições possíveis (inicial e final)

FAQ

Como definir o número de miniaturas, eu tenho estas imagens retrato na barra de navegação.. só mostra dois deles, enquanto não há espaço para 4?

Você não pode definir o número de miniaturas exibidas por 'página' porque ele é calculado automaticamente a partir de largura polegar / altura e espaço polegar. Portanto, tente reduzir esse para mais polegares. Também há outro parâmetro "nav_arrow_size: 40" - este é o espaço que está alocado para cada seta (assim pelo padrão 80 px 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 offcourse não os thumbnails) Sim, com certeza, escrever

 <a href="#"> <img src = "img / def1.jpg" /> </a> 

ao invés de

 <img src = "img / def1.jpg" /> 

Eu tento adicionar links na descrição, mas ele quebra o script

Propably você está fazendo algo parecido com isto

MAU :

 dados de descrição = "Minha ligação é <a href="http://something"> aqui </a>" 

O problema é que a "quebra a href dentro" do-Descrição de dados. As soluções é usar "em vez de"

BOA :
 -descrição de dados = "Minha ligação é <a href="http://something"> aqui </a> ' 
Oi. Como posso parar a auto-deslizamento da phoenixgallery

você tem nos parâmetros

 targetgallery.phoenixgallery ({ transition_type: "random", nav_type: "thumbsa", nav_position: "para cima", 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 }) 
desativar slideshow basta adicionar um novo parâmetro settings_slideshow e configurá-lo para fora como este
 targetgallery.phoenixgallery ({ transition_type: "random", nav_type: "thumbsa", nav_position: "para cima", 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 eu adicionar um link para a imagem que o efeito de zoom não funciona mais.

Isso é porque os atributos de dados de initialZoom, data-finalZoom, data-effectTime etc. precisa estar no filho direto da galeria div. Por exemplo, se você tem

 

efeito irá funcionar, mas se você adicionar link como este
 <a href="#"> </a> 
efeito não vai funcionar. Você precisa mover os atributos para o filho direto da galeria da seguinte forma:
 <a href="#" data-finalzoom="2"> </a> 

Créditos

Fotos criativas - http://www.flickr.com/photos/markjsebastian/

Download
Outros componentes nesta categoriaTodos os componentes deste autor
ComentáriosPerguntas mais frequentes perguntas e respostas

Propriedades

Criado:
02 de agosto 10

Última atualização:
N / D

Navegadores compatíveis:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Arquivos incluídos:
JS JavaScript, HTML, CSS

Versão do software:
jQuery

Palavras-chave

eCommerce, eCommerce, Todos os itens, setas, navegaç, ã, o personalizada, efeito, galeria, imagem, Ken Burns, nú, meros, panela, imagens de apoio, rotor, slideshow, miniaturas, transiç, õ, es, suporte de ví, deo, zoom