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 / Sliders

pageAnimate Web-Page Slider

— Add-On para WorldWideScripts.net

@pt1wwsAssine o nosso feed para se manter atualizado!

Novo! Siga-nos o que você quiser!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Este plugin jQuery é um controle deslizante de página inteira para navegar entre as páginas web. Por exemplo, você poderia ter a sua home page em um slide, página de contato em outro, e assim por diante. É sensível e trabalha em todos os principais navegadores, incluindo o Internet Explorer 6 ( : O ) E navegadores móveis.

Como o nome sugere, você pode colocar qualquer coisa dentro de um slide (outros conteúdos jQuery, vídeos e que-não), e cada slide irá rolar para ver estouro como qualquer página normal. Não há nada que eu conheço que vai quebrar o controle deslizante, e você pode adicionar uma quantidade infinita de slides. Este é exatamente o que você precisa para apimentar o seu site!

Embora este é projetado para conteúdo da janela completa, você pode facilmente usar isso como um controle deslizante conteúdo tradicional jQuery. Na verdade, o pageAnimate é provavelmente melhor do que outros sliders, uma vez que funciona lindamente no Internet Explorer 6!

Nota: Se você ver o preview CodeCanyon em um navegador móvel, prestação de CodeCanyon não vai funcionar em tudo. Você precisa visitar http://creativewebsites.me/pageAnimate/preview para vê-lo em ação.

Versão 1.1 ATUALIZAÇÃO

A versão 1.1 vem com dois novos recursos: a capacidade de dar cada slide um URL exclusivo (com o uso de haxixe) e uma função de auto avançando de modo que o controle deslizante percorre automaticamente todos os slides continuamente. Ambos não podem ser ativados ao mesmo tempo (eu não consigo pensar em ninguém que iria querer isso de qualquer maneira).

Se você tem a versão anterior instalada e você atualizar para esta versão, certifique-se de que você codificar o 'slide dados = "0" "atributo para o div que tem uma classe de.pageAnimate. Igual a:

 <div class = "pageAnimate" slide-data = "0"> </ div> 

Além disso, você precisará adicionar a seguinte classe a todos os slides dispara:.pageAnimate_trigger

E se JavaScript desabilitado?

Este plugin é executado principalmente em JavaScript - mas o que se JavaScript está desativado? É o controle deslizante inútil (e isso significa que as pessoas só podem ver a sua homepage!). Não, claro que não. Você pode adicionar um link fallback 'href' para os gatilhos que ir a um slide. Então, quando JavaScript desabilitado, o gatilho não vai para um slide na pageAnimate, mas só vai prosseguir no caminho normal para outra página (que você definiu no 'href').

Será que o controle deslizante pageAnimate puxar o conteúdo de outras páginas web?

Não, o próprio plugin não puxar o conteúdo de outras páginas web. Embora você poderia fazer isso com apenas algumas linhas de código PHP ou Ajax, o próprio script não tem essa funcionalidade e conteúdo de cada slide / da página deve ser adicionado manualmente. Para puxar o conteúdo de seu servidor web com Ajax, basta usar este código:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Basta alterar #slide_id_or_class "para o ID de CSS ou classe do slide pageAnimate que você deseja adicionar à)

Então, como posso fazer o Slider ir a um slide?

Não poderia ser mais fácil - basta adicionar o seguinte código:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Este texto irá deslizar 2 </a> 
Observe o número adicionado ao final do nome da classe? Esse pequeno número de diapositivos define o que vai ser animado para. Mas uma vez que tudo em JavaScript é baseada em zero (paciência comigo aqui), nós precisamos de menos 1 fora o número do slide. Assim, por exemplo, se quisermos que o controle deslizante para ir para a tela # 4 quando o texto for clicado, gostaríamos de acrescentar essa classe: "pageAnimate_trigger 3". Se quisermos que o controle deslizante para ir para o slide # 6, que gostaria de acrescentar essa classe: "pageAnimate_trigger 5". Como mencionado acima, você pode adicionar um link para a marca de âncora, o que só pode ser seguido quando o JavaScript está desativado. Então isso significa que os visitantes ainda será capaz de visualizar uma página clonada em outros lugares em seu site se o JavaScript é desativado.

Eu tenho que adicionar manualmente um link para cada slide?

Nem um pouco - o script faz todo o trabalho para você.

Como posso fazer isso em um conteúdo normal, Slider e não uma página da web Slider?

Fácil - tudo que você fazer é mudar uma única linha em "Configurações" do script jQuery. Você vai precisar de ter um div (ou outra marca similar) como um recipiente para o controle deslizante pageAnimate. Basta definir que div no script.

Existem quaisquer problemas ou erros?

  1. Quando a janela do navegador é ampliada ou reduzida no IE 8, os slides não redimensionar automaticamente para se tornar full-screen. Eu tentei para as idades para encontrar uma solução, mas não pode. No entanto, eles fazem redimensionar quando a janela real é arrastado menor ou maior. Esta é exclusivo para IE 8. Isso não deve ser um grande negócio desde que não haverá muitas pessoas zoom in e out no IE8.
  2. Ao usar jQuery 1.8.1, o Firefox congela quando muitos gatilhos são clicados em rápida sucessão. Funciona bem com jQuery 1.7.2.
  3. Navegação do controle deslizante rompe completamente para baixo quando você aumentar o zoom em um smartphone. Isso pode ser corrigido, adicionando este código ao <head> seção do seu documento HTML:
     <meta name = "viewport" content = "width =-largura do dispositivo; escala inicial = 1; máxima escala = 1"> 
  4. Animação do cursor pode ser um pouco nervoso em smartphones de idade - embora não seja tão ruim.

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

Propriedades

Criado:
13 de novembro 12

Última atualização:
18 de 13 de maio

Alta resolução:
sim

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

Arquivos incluídos:
JS JavaScript, HTML, CSS

Versão do software:
jQuery

Palavras-chave

eCommerce, eCommerce, Todos os itens, css, html, javascript, jquery, jQuery controle deslizante, pá, gina deslizante, pageAnimate, paginaç, ã, o, deslizante real, controle deslizante