Memulai Semua demo di halaman ini, dan hampir setiap demo di situs ini, memerlukan kode nol. Tayangan slide benar-benar didorong oleh markup. Semua yang dibutuhkan adalah memasukkan plugin jQuery dan Cycle2 menggunakan tag skrip seperti ini: Default Slideshow Cara termudah mutlak untuk memulai dengan Cycle2 adalah dengan menggunakan markup seperti ini: cycle-motion adalah nama khusus yang memberitahukan Cycle2 untuk melakukan auto-initialize. Slideshow saat halaman di-load. Hasilnya terlihat di bawah ini: Setting Options Options diatur menggunakan atribut data-cycle. Contoh di bawah ini menunjukkan default fx. Jeda-on-hover. Dan pilihan kecepatan ditimpa. Manual Slideshow Contoh berikut menunjukkan bagaimana memiliki slideshow manual dengan menetapkan opsi batas waktu menjadi nol. Dan itu juga menunjukkan bagaimana mengikat kontrol sebelumnya dan selanjutnya. Untuk informasi lebih lanjut tentang kontrol sebelumnya, lihat Prev. ext demyslsaquolsaquo home jQuery Cycle Plugin Check out Cycle2. Yang terbaru di baris Siklus tayangan slide. The jQuery Cycle Plugin adalah plugin slideshow yang mendukung berbagai jenis efek transisi. Ini mendukung jeda-on-hover, auto-stop, auto-fit, sebelum callback, pemicu klik dan banyak lagi. Ini juga mendukung, namun tidak memerlukan, Easing Plugin. Cara Kerja Plugin ini menyediakan metode yang disebut siklus yang dipanggil pada elemen kontainer. Setiap elemen anak dari wadah menjadi slide. Opsi mengontrol bagaimana dan kapan slide dialihkan. ScrollRight (klik) Gambar digunakan dalam demo ini karena terlihat keren, namun tayangan slide tidak terbatas pada gambar. Anda bisa menggunakan elemen yang Anda inginkan. Browse Effects Gunakan halaman Browser Efek untuk melihat pratinjau efek yang tersedia. Lihat Demo dan Contoh Lebih Banyak Plugin Siklus menyediakan banyak pilihan untuk menyesuaikan slideshow Anda. Nilai opsi default dapat diganti dengan melewatkan opsi objek ke metode siklus, dengan menggunakan metadata pada elemen penampung, atau dengan mendefinisikan ulang nilai dalam kode Anda sendiri. Untuk informasi lebih lanjut tentang opsi, lihat halaman Referensi Opsi. Ucapan Terimakasih Terima kasih khusus kepada Torsten Baldes. Matt Oakes, dan Ben Sterling untuk banyak gagasan yang membuat saya mulai menulis Siklus di tahun 2007. Demo ini menjelaskan betapa mudahnya menggunakan opsi Siklus JQuery dan juga beberapa fitur terbaik dari Maximage 2.0. Anda dapat melihat bagaimana fungsi callback digunakan serta kecepatan, fx, timeout, paging dan pilihan jQuery Cycle lainnya. Demo ini juga menggunakan fungsi pembantu kustom Maximage 2.0s yang memungkinkan elemen apapun dalam slideshow dimaksimalkan seperti gambar latar belakang dalam slide. Dalam hal ini kita memaksimalkan video HTML5 dalam slideshow kita dan juga Youtube Video. Saya ingin sebuah cara untuk memamerkan bagaimana Maximage2 memungkinkan Anda memaksimalkan gambar dalam elemen yang mengandung juga, bukan hanya jendela browser. Anda hanya melewati pemilih ke opsi fillElement Maximage2s dan Anda baik untuk pergi. Ini juga menggunakan fx yang berbeda dari jQuery Cycle untuk menunjukkan betapa mudahnya itu. BackgroundSize Maximage2 bisa berupa string (cover atau contain) untuk menentukan bagaimana gambar mengisi wadah. Cover mengisi setiap ruang yang tersedia dengan gambar sambil berisi memaksimalkan gambar dalam ruang namun tidak melebihi ruang. Ini akan menjadi dua skenario yang paling umum, tapi sangat mungkin seseorang mungkin memerlukan beberapa fungsi yang berbeda. Nah Maximage2 memungkinkan Anda untuk menulis fungsi Anda sendiri di sini dan ini adalah contoh bagaimana hal itu dilakukan. Perhatian: Contoh ini dimaksudkan untuk pengguna ahli. Ingat, dengan FillElement Anda sering bisa menyelesaikan skema offset dengan sangat mudah. Atur elemen yang Anda inginkan di mana Anda ingin gambar ditampilkan. Karena aturan pertama Maximage 2.0 adalah mencoba untuk tetap lepas tangan dan menghalangi Anda, yang dibangun untuk mendukung offset telah dijatuhkan dengan versi 2.0. Ini tidak berarti mereka mungkin tidak. Dengan sedikit minyak siku mereka masih bisa terlaksana (dan lebih baik). Apa yang saya lakukan dengan kode di bawah ini adalah menciptakan offset tirai yang hidup di depan slideshow. Aku memanggil tirai ini. Saya telah melakukan ini dengan HTML dan CSS di bawah ini untuk offset 100px di bagian atas, kanan, bawah dan kiri tepi layar. Setelah kami membuat tirai, slideshow masih diubah ukuran ke jendela penuh dan kami ingin memilikinya memaksimalkan area yang dapat dilihat. Ukuran jendela kita minus offset kita. Untuk alasan ini Anda harus menyesuaikan fungsi yang mengubah ukuran jendela. Kita bisa melakukannya dengan pilihan backgroundSize yang akan diteruskan ke Maximage. Atur saja verticalOffset dan horizontalOffset Anda di backgroundSize (contoh JS di bawah) untuk mengukur gambar tayangan slide Anda dalam area yang dapat dilihat. Agar gambar yang terkandung di dalam offset hanya bertukar berdasarkan tinggi badan, berdasarkan aturan lebar di backgroundSize fungsi seperti ini: Maximage2 dapat digunakan sebagai alat untuk membuat hampir semua elemen latar belakang dengan sangat mudah. Contoh ini menunjukkan bagaimana bisa digunakan untuk membuat video HTML5 latar belakang. CATATAN: Penggantian video HTML5 untuk IE7 amp IE8 saat ini tidak mengisi layar dalam slideshow. Saat ini saya sedang mengerjakan hal ini, namun jika ini penting bagi Anda, gunakan tayangan slide lain untuk sementara dan periksa kembali pembaruan karena ini terbukti lebih kompleks daripada yang diharapkan.
No comments:
Post a Comment