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

— Tambah-On untuk WorldWideScripts.net

Melanggan suapan kami untuk kekal sehingga tarikh!

Baru! Ikut kami yang anda mahu!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



Ini plugin jQuery adalah gelangsar halaman penuh untuk mengemudi antara laman web. Sebagai contoh, anda boleh mempunyai halaman rumah anda pada satu slaid, laman kenalan yang lain, dan sebagainya. Ia adalah responsif dan berfungsi dalam semua pelayar utama, termasuk Internet Explorer 6 ( : o ) Dan pelayar mudah alih.

Seperti namanya, anda boleh meletakkan apa-apa di dalam slaid (kandungan jQuery lain, video, dan apa-bukan), dan setiap slaid akan tatal untuk melihat limpahan seperti mana-mana halaman normal. Tiada apa yang saya tahu yang akan memecahkan gelangsar, dan anda boleh menambah jumlah terbatas slaid. Ini adalah apa yang anda perlukan untuk membuatkan laman web anda!

Walaupun ini direka untuk kandungan tetingkap penuh, anda boleh hanya sebagai mudah menggunakan ini sebagai jQuery slider kandungan tradisional. Malah, pageAnimate yang mungkin lebih baik daripada slider lain kerana ia berfungsi dengan indah dalam Internet Explorer 6!

Nota: Jika anda melihat pratonton CodeCanyon dalam pelayar mudah alih, rendering CodeCanyon tidak akan berfungsi langsung. Anda perlu untuk melawat http://creativewebsites.me/pageAnimate/preview untuk melihat ia dalam tindakan.

Versi 1.1 UPDATE

Versi 1.1 datang dengan dua ciri-ciri baru: keupayaan untuk memberi setiap slaid URL yang unik (dengan penggunaan hash) dan fungsi auto memajukan supaya gelangsar automatik kitaran melalui semua slaid secara berterusan. Kedua-dua tidak dapat diaktifkan pada masa yang sama (saya tidak boleh memikirkan orang yang akan mahu itu juga).

Jika anda mempunyai versi yang terdahulu terpasang, dan anda kini kepada versi ini, memastikan bahawa anda Hardcode yang 'data-slaid = "0"' sifat ke dalam div yang mempunyai kelas.pageAnimate. Seperti demikian:

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

Juga, anda akan perlu untuk menambah kelas berikut kepada semua slaid mencetuskan:.pageAnimate_trigger

Bagaimana jika javascript dimatikan?

Plugin ini berjalan terutamanya kepada JavaScript - tetapi bagaimana jika JavaScript dilumpuhkan? Adalah slider tidak berguna (dan itu bererti orang hanya boleh melihat halaman utama anda!). Tidak sudah tentu tidak. Anda boleh menambah link sandaran 'href' kepada pencetus yang pergi ke slaid. Oleh itu, apabila JavaScript dimatikan, pencetus ini tidak akan pergi ke slaid dalam pageAnimate, tetapi hanya akan meneruskan dengan cara biasa ke halaman lain (yang anda ditakrifkan dalam 'href').

Adakah slider pageAnimate tarik Kandungan daripada lain Web Laman?

No, plugin itu sendiri tidak menarik kandungan dari lain laman web di. Walaupun anda boleh berbuat demikian dengan hanya beberapa baris Ajax atau kod PHP, skrip itu sendiri tidak mempunyai fungsi itu dan kandungan setiap slaid yang / page ini perlu ditambah secara manual. Menarik kandungan dari pelayan web anda dengan Ajax, hanya menggunakan kod ini:
 <script type = "text / javascript"> $ ("#slide_id_or_class").load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Hanya menukar #slide_id_or_class "kepada id CSS atau golongan slaid pageAnimate yang anda mahu untuk menambah kepada)

Jadi bagaimana saya membuat Slider pergi ke slaid yang?

Ia tidak dapat menjadi lebih mudah - hanya tambah kod ini:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Teks ini akan pergi ke slaid 2 </a> 
Perhatikan jumlah ditambah kepada hujung nama kelas? Bahawa jumlah sedikit mentakrifkan apa slaid akan animasi untuk. Tetapi oleh kerana segala-galanya dalam JavaScript adalah berasaskan sifar (menanggung dengan saya di sini), kita perlu tolak 1 off beberapa slaid. Jadi, sebagai contoh, jika kita mahu slider untuk pergi ke slaid # 4 apabila teks tersebut diklik, kita akan menambah kelas ini: "pageAnimate_trigger 3". Jika kita mahu slider untuk pergi ke slaid # 6, kita akan menambah kelas ini: "pageAnimate_trigger 5". Seperti yang dinyatakan di atas, anda boleh menambah link ke tag anchor, yang hanya boleh diikuti apabila JavaScript dimatikan. Ini bermakna pelawat masih akan dapat melihat halaman yang diklon di tempat lain di laman web anda jika mereka telah JavaScript dimatikan.

Adakah saya perlu secara manual menambah link ke setiap slaid?

Tidak sama sekali - skrip melakukan semua kerja untuk anda.

Bagaimana saya membuat ini ke dalam kandungan normal Slider dan bukan Web-Page Slider?

Mudah - semua yang anda lakukan adalah menukar satu baris dalam 'tetapan' skrip jQuery. Anda akan perlu mempunyai div (atau tag lain yang serupa) sebagai bekas untuk slider pageAnimate itu. Cukup dengan set yang div dalam skrip.

Adakah terdapat apa-apa Masalah atau Bugs?

  1. Apabila tetingkap pelayar dizum masuk atau keluar IE 8, slaid tidak secara automatik mengubah saiz untuk menjadi skrin penuh. Saya telah cuba untuk peringkat umur untuk mencari jalan penyelesaian, tetapi tidak boleh. Walau bagaimanapun, mereka mengubah saiz apabila tetingkap sebenar diseret lebih kecil atau lebih besar. Ini adalah unik untuk IE 8. Ini tidak seharusnya menjadi masalah besar kerana tidak akan ada terlalu ramai orang zoom masuk dan keluar pada IE8.
  2. Apabila menggunakan jQuery 1.8.1, Firefox membeku apabila banyak pencetus diklik secara berturut-turut. Berfungsi dengan baik dengan jQuery 1.7.2.
  3. Navigasi slider ini benar-benar rosak apabila anda zum masuk pada telefon pintar. Ini boleh diperbaiki dengan menambah kod ini kepada <kepala> dokumen HTML anda:
     <nama meta = "viewport" kandungan = "width = peranti lebar; berskala awal = 1; skala maksimum-= 1"> 
  4. Animasi slider ini mungkin menjadi gelisah sedikit pada telefon pintar lama - walaupun ia tidak terlalu buruk.

Memuat turun
Komponen-komponen lain dalam kategori iniSemua komponen pengarang ini
KomenSoalan-soalan lazim dan jawapan

Properties

Dibuat:
13 November 12

Kemaskini:
18 Mei 13

Resolusi tinggi:
Ya

Pelayar Sesuai:
IE6, IE7, IE8, IE9, IE10, Firefox, Safari, Opera, Chrome

Fail Termasuk:
JavaScript JS, HTML, CSS

Perisian Versi:
jQuery

Kata kunci

eCommerce, eCommerce, Semua Produk, css, html, javascript, jquery, jquery slider, halaman slider, pageAnimate, Bilangan muka surat, slider diraja, slider