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

@id1wwsBerlangganan feed kami untuk tetap up to date!

Baru ! Ikuti kami seperti yang Anda inginkan!


pageAnimate Web-Page Slider - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting



JQuery plugin ini adalah halaman slider penuh untuk menavigasi antara halaman web. Misalnya, Anda bisa memiliki halaman rumah Anda pada satu slide, halaman kontak yang lain, dan seterusnya. Hal ini responsif dan bekerja di semua browser utama, termasuk Internet Explorer 6 ( :Hai ) Dan mobile browser.

Seperti namanya, Anda dapat memasukkan apa pun di dalam slide (konten lainnya jQuery, video, dan apa-tidak), dan setiap slide akan gulir untuk melihat meluap sama seperti halaman normal. Tidak ada yang saya tahu yang akan mematahkan slider, dan Anda dapat menambahkan jumlah tak terbatas slide. Ini adalah apa yang Anda butuhkan untuk membumbui situs web Anda!

Meskipun ini dirancang untuk konten jendela penuh, Anda dapat dengan mudah menggunakan ini sebagai konten jQuery slider tradisional. Bahkan, pageAnimate yang mungkin lebih baik daripada slider lain karena bekerja indah di Internet Explorer 6!

Catatan: Jika Anda melihat pratinjau CodeCanyon dalam mobile browser, render CodeCanyon tidak akan bekerja sama sekali. Anda perlu mengunjungi http://creativewebsites.me/pageAnimate/preview untuk melihatnya dalam tindakan.

Versi 1.1 UPDATE

Versi 1.1 hadir dengan dua fitur baru: kemampuan untuk memberikan setiap slide URL unik (dengan menggunakan hash) dan fungsi auto maju sehingga slider otomatis siklus melalui semua slide terus menerus. Keduanya tidak dapat diaktifkan pada saat yang sama (saya tidak bisa memikirkan orang yang ingin itu pula).

Jika Anda memiliki versi sebelumnya terpasang dan anda update ke versi ini, pastikan bahwa Anda hardcode 'Data-slide = "0"' atribut ke dalam div yang memiliki kelas.pageAnimate. Seperti:

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

Juga, Anda akan perlu menambahkan kelas berikut untuk semua slide memicu:.pageAnimate_trigger

Bagaimana jika JavaScript Dinonaktifkan?

Plugin ini berjalan terutama pada JavaScript - tetapi bagaimana jika JavaScript dinonaktifkan? Apakah slider berguna (dan itu berarti orang hanya dapat melihat homepage Anda!). Tidak, tentu saja tidak. Anda dapat menambahkan link fallback 'href' untuk pemicu yang pergi ke slide. Jadi ketika JavaScript dinonaktifkan, pemicu ini tidak akan pergi ke slide di pageAnimate, tetapi hanya akan melanjutkan dengan cara biasa ke halaman lain (yang Anda didefinisikan dalam 'href').

Apakah slider pageAnimate menarik Konten dari lain Web-Pages?

Tidak, plugin itu sendiri tidak menarik konten dari halaman web lainnya. Meskipun Anda bisa melakukannya dengan hanya beberapa baris Ajax atau kode PHP, script itu sendiri tidak memiliki fungsi itu dan konten setiap slide ini / halaman harus ditambahkan secara manual. Untuk menarik konten dari web-server Anda dengan Ajax, hanya menggunakan kode ini:
 <script type = "text / javascript"> $ ("#slide_id_or_class") load ("http://www.yourserver.com/yourpage.html"); </ script> 
(Hanya mengubah #slide_id_or_class "ke id CSS atau kelas dari slide pageAnimate yang ingin Anda tambahkan ke)

Jadi bagaimana cara membuat Slider pergi ke Slide?

Ini tidak bisa lebih mudah - hanya menambahkan kode ini:
 <a class="pageAnimate_trigger pageAnimate_trigger1"> Teks ini akan meluncur 2 </a> 
Perhatikan nomor ditambahkan ke akhir dari nama kelas? Bahwa jumlah sedikit mendefinisikan apa geser akan animasi untuk. Tapi karena segala sesuatu di JavaScript adalah berbasis nol (beruang dengan saya di sini), kita perlu minus 1 dari jumlah slide. Jadi misalnya, jika kita ingin slider untuk pergi ke meluncur # 4 ketika teks diklik, kita akan menambahkan kelas ini: "pageAnimate_trigger 3". Jika kita ingin slider untuk pergi ke geser # 6, kita akan menambahkan kelas ini: "pageAnimate_trigger 5". Seperti disebutkan di atas, Anda dapat menambahkan link ke tag anchor, yang hanya dapat diikuti ketika JavaScript dinonaktifkan. Sehingga berarti pengunjung masih akan dapat melihat halaman kloning tempat lain di situs Anda jika mereka JavaScript dinonaktifkan.

Apakah saya harus secara manual menambahkan link ke setiap Slide?

Tidak sama sekali - script melakukan semua pekerjaan untuk Anda.

Bagaimana saya membuat ini menjadi Konten yang normal Slider dan tidak Slider Web-Page?

Mudah - semua yang Anda lakukan adalah mengubah satu baris di 'pengaturan' dari script jQuery. Anda akan perlu memiliki div (atau tag lain yang serupa) sebagai wadah untuk slider pageAnimate. Hanya mendefinisikan bahwa div dalam script.

Apakah ada Masalah atau Bugs?

  1. Ketika jendela browser diperbesar atau di IE 8, slide tidak secara otomatis mengubah ukuran menjadi layar penuh. Saya sudah mencoba untuk usia untuk menemukan solusi, tapi tidak bisa. Namun, mereka DO mengubah ukuran ketika jendela yang sebenarnya diseret kecil atau lebih besar. Ini adalah unik untuk IE 8. ini seharusnya tidak menjadi masalah besar karena tidak akan ada terlalu banyak orang zoom in dan out di IE8.
  2. Bila menggunakan jQuery 1.8.1, Firefox membeku ketika banyak pemicu diklik secara berurutan. Bekerja baik dengan jQuery 1.7.2.
  3. Navigasi slider ini benar-benar rusak ketika Anda memperbesar pada smartphone. Ini bisa diperbaiki dengan menambahkan kode ini ke <head> dokumen HTML Anda:
     <meta name = "viewport" content = "width = device-width; skala awal = 1; maksimum skala = 1"> 
  4. Animasi slider ini mungkin gelisah sedikit di smartphone tua - meskipun itu tidak terlalu buruk.

Ambil
Komponen lain dalam kategori iniSemua komponen penulis ini
KomentarPertanyaan yang sering diajukan dan jawaban

Properties

Dibuat:
13 November 12

Pembaharuan Terakhir:
18 Mei 13

Resolusi tinggi:
iya nih

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

Termasuk file:
JavaScript JS, HTML, CSS

Versi perangkat lunak:
jQuery

Kata kunci

eCommerce, eCommerce, Semua barang, css, html, javascript, jquery, jquery slider, Halaman slider, pageAnimate, pagination, slider royal, slider