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 per WorldWideScripts.net

Iscriviti al nostro feed per rimanere sempre aggiornato!

Nuovo! Seguici come lo vuoi!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Questo plugin jQuery è un cursore a pagina intera per navigare tra le pagine web. Ad esempio, si potrebbe avere la tua home page su una diapositiva, pagina di contatto di un altro, e così via. È sensibile e lavora in tutti i principali browser, tra cui Internet Explorer 6 ( : o ) E browser mobili.

Come suggerisce il nome, si può mettere qualsiasi cosa all'interno di una diapositiva (altri contenuti jQuery, video e quello che-no), e ogni diapositiva dovrà scorrere per visualizzare trabocco come qualsiasi normale pagina. Non c'è nulla che io conosca che si romperà il cursore, ed è possibile aggiungere una quantità infinita di diapositive. Questo è esattamente ciò che serve per rendere il tuo sito web!

Anche se questo è stato progettato per il contenuto completo della finestra, si può altrettanto facilmente utilizzare questo come un tradizionale dispositivo di scorrimento dei contenuti jQuery. In realtà, il pageAnimate è probabilmente meglio di altri cursori poiché funziona magnificamente in Internet Explorer 6!

Nota: Se si visualizza l'anteprima CodeCanyon in un browser mobile, il rendering di CodeCanyon non funzionerà affatto. Avete bisogno di visitare http://creativewebsites.me/pageAnimate/preview per vederlo in azione.

Versione 1.1 AGGIORNAMENTO

La versione 1.1 viene fornito con due nuove caratteristiche: la capacità di dare ad ogni diapositiva un URL univoco (con l'utilizzo di hash) e una funzione di auto che avanza in modo che il cursore cicli automaticamente attraverso tutte le diapositive continuamente. Entrambi non possono essere abilitati contemporaneamente (non riesco a pensare a nessuno che vorrebbe che in ogni caso).

Se avete la versione precedente installata e si aggiorna a questa versione, assicurarsi che si hardcode il 'scivolo data = "0"' attributo nel div che ha una classe di.pageAnimate. Così:

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

Inoltre, è necessario aggiungere la seguente classe di tutta la diapositiva trigger:.pageAnimate_trigger

Che cosa succede se JavaScript è disabilitato?

Questo plugin funziona principalmente su JavaScript - ma se è disabilitato JavaScript? È il cursore inutile (e questo significa che le persone possono vedere solo la tua home page!). No certo che no. È possibile aggiungere un link ripiego 'href' ai trigger che vanno a una diapositiva. Così, quando JavaScript è disabilitato, il trigger non andrà a una diapositiva nella pageAnimate, ma sarà solo procedere in modo normale per un'altra pagina (che è stata definita nel 'href').

Ha il cursore pageAnimate estrarre il contenuto da altre pagine web?

No, il plugin per sé non estrae il contenuto di altri pagine web. Anche se si potrebbe fare che con poche righe di codice PHP Ajax o, lo script stesso non ha che le funzionalità e il contenuto di ogni diapositiva / della pagina deve essere aggiunto manualmente. Per estrarre il contenuto dal proprio server web con l'Ajax, basta usare questo codice:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Basta cambiare #slide_id_or_class "al id CSS o classe della diapositiva pageAnimate che si desidera aggiungere a)

Allora, come faccio a rendere il cursore andare a una diapositiva?

Non potrebbe essere più facile - basta aggiungere questo codice:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Questo testo andrà a scivolare 2 </a> 
Si noti il ​​numero aggiunto alla fine del nome della classe? Quel piccolo numero definisce cosa diapositiva sarà animato a. Ma dal momento che tutto in JavaScript è a base zero (orso con me qui), abbiamo bisogno di meno 1 fuori il numero di diapositiva. Così, per esempio, se vogliamo che il cursore per andare a scivolare 4 # quando si fa clic sul testo, vorremmo aggiungere questa classe: "pageAnimate_trigger 3". Se vogliamo che il cursore per andare a scivolare 6 #, vorremmo aggiungere questa classe: "pageAnimate_trigger 5". Come accennato in precedenza, è possibile aggiungere un link al tag di ancoraggio, che può essere seguito solo quando è disabilitato JavaScript. Quindi questo significa che i visitatori saranno ancora in grado di visualizzare una pagina clonato altrove sul tuo sito che hanno disattivato JavaScript.

Devo aggiungere manualmente un link per ogni diapositiva?

Niente affatto - lo script fa tutto il lavoro per voi.

Come faccio a fare questo in un normale contenuto Slider e non una pagina web Slider?

Facile - tutto ciò che fai è cambiare una sola riga in 'Impostazioni' dello script jQuery. Avrete bisogno di avere un div (o un altro tag simile) come contenitore per il cursore pageAnimate. Basta definire che div nello script.

Ci sono dei problemi o bug?

  1. Quando la finestra del browser viene ingrandita o ridotta in IE 8, le diapositive non ridimensionano automaticamente per diventare a pieno schermo. Ho provato per anni di trovare una soluzione, ma non ci riesco. Tuttavia, essi ridimensionano quando la finestra attuale è trascinata piccole o più grandi. Questo è unico per IE 8. Questo non dovrebbe essere un grosso problema dato non ci saranno troppe persone lo zoom in e out su IE8.
  2. Quando si utilizza jQuery 1.8.1, Firefox blocca quando molti trigger si fa clic in rapida successione. Funziona bene con jQuery 1.7.2.
  3. Navigazione del cursore rompe completamente quando si ingrandisce su uno smartphone. Questo può essere risolto aggiungendo questo codice alla sezione <head> del documento HTML:
     <meta name = "finestra" content = "width = dispositivo-width, iniziale scala = 1; massimo-scala = 1"> 
  4. Animazione del cursore potrebbe essere un po 'nervosi sui vecchi smartphone - anche se non è troppo male.

Scarica
Altri componenti di questa categoriaTutti i componenti di questo autore
CommentiDomande frequenti e risposte

Proprietà

Creato:
13 nov 12

Ultimo aggiornamento:
18 Maggio 13

Alta risoluzione:

Browser compatibili:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

File inclusi:
JavaScript JS, HTML, CSS

Versione software:
jQuery

Parole chiave

eCommerce, eCommerce, Tutti gli articoli, css, html, javascript, jquery, cursore jquery, cursore pagina, pageAnimate, paginatura, cursore reale, cursore