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 / Images and Media

Ken Burns Media Gallery / Slideshow

— Add-On ke WorldWideScripts.net

@id1wwsBerlangganan feed kami untuk tetap up to date!

Baru ! Ikuti kami seperti yang Anda inginkan!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress Versi

GALERI mendukung gambar, video, audio inline Telepon iPad instalasi menit kompatibel Ken Burns efek thumbnail navigasi dan banyak lagi!

Update

UPDATE 2 0,1 [14/06/2011]

  • menambahkan contoh autoheight + panggilan api

UPDATE 2 0,0 [2011/09/06]

  • bug tetap
  • namanya ke Phoenix Gallery - fitur galeri yang sama + lebih
  • menambahkan navigasi thumbnail

Pengantar

jQuery Ken Burns Slideshowis cara sempurna untuk menampilkan gambar Anda / iklan dalam gaya. Setiap item memiliki waktu slideshow terpisah dan Anda dapat mengedit link mereka, target dan banyak pengaturan individu lain hanya dengan memodifikasi HTML.

fitur

  • mendukung.PNGs,.JPGs,.GIFs
  • API - sebut jeda, bermain, gotoNext, gotoPrev dari html Anda (di luar galeri)
  • autoheight - pilihan untuk AutoSize galeri tergantung pada ketinggian konten
  • mendukung unlimited item - memutar gambar sebanyak yang Anda inginkan
  • slideshow modus - dengan waktu independen untuk setiap item yang dapat Anda menentukan dalam HTML disediakan
  • nilai-nilai Anda dapat mengatur untuk setiap item - deskripsi (deskripsi dari atas), initialZoom (nilai apapun yang Anda inginkan), finalZoom, slideshowTime (waktu rotator spanduk tetap fokus pada item tertentu), membakar waktu efek (waktu Anda ingin efek untuk mengambil), url (jika tidak ada url diatur item hanya akan menjadi gambar tanpa link di klik), transitionType (easeInSine, dll linear), initialposition, posisi akhir (memilih dari topleft, topcenter, topright, middleleft, middlecenter, middleright, bottomleft, bottomcenter, bottomRight)
  • resizable untuk ukuran pilihan Anda - semua isi akan posisi yang tepat

Posisi panning mungkin (awal dan akhir)

FAQ

Cara mengatur jumlah thumbnail, saya memiliki potret ini gambar di slider.. navigasi hanya menunjukkan 2 dari mereka, sementara ada ruang untuk 4?

Anda tidak dapat mengatur jumlah thumbnail yang ditampilkan per Halaman 'karena itu dihitung secara otomatis dari lebar ibu jari / tinggi dan ruang jempol. Jadi cobalah untuk menurunkan yang lebih jempol. Juga ada parameter lain "nav_arrow_size: 40" - ini adalah ruang yang dialokasikan untuk setiap panah (jadi di default 80 px yang dikurangi untuk panah) dan Anda juga dapat menurunkan ini untuk lebih jempol.

apakah mungkin untuk menempatkan link pada gambar (gambar utama offcourse tidak thumbnail) Ya, yakin, menulis

 <a href="#"> <img src = "img / def1.jpg" /> </a> 

dari pada

 <img src = "img / def1.jpg" /> 

Saya mencoba untuk menambahkan link dalam deskripsi tapi istirahat script

Propably Anda melakukan sesuatu seperti ini

BAD:

 Data-description = "link saya <a href="http://something"> sini </a>" 

Masalahnya adalah bahwa "dalam href istirahat" dari data-deskripsi. Solusi adalah menggunakan 'bukan "

BAIK:
 Data-description = 'Link saya adalah <a href="http://something"> sini </a>' 
Hi. Bagaimana saya bisa menghentikan auto-geser phoenixgallery yang

Anda memiliki dalam parameter

 targetgallery.phoenixgallery ({ transition_type: "random", nav_type: "thumbsa", nav_position: "up", thumb_width: 100, thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40, settings_shadow: "off", settings_autoresize: "off", settings_autoheight: "off", settings_pauseonrollover: "off", settings_usethumbarrows: 'off', transition_strips_x: 10, transition_strips_y: 5, arrows_normal_alpha: 1, arrows_roll_alpha: 0,3, thumbs_normal_alpha: 1, thumbs_roll_alpha: 0,3 }) 
untuk menonaktifkan slide hanya menambahkan parameter settings_slideshow baru dan set ke off seperti ini
 targetgallery.phoenixgallery ({ transition_type: "random", nav_type: "thumbsa", nav_position: "up", thumb_width: 100, thumb_height: 75, thumb_space: 20, nav_space: 25, nav_arrow_size: 40, settings_shadow: "off", settings_autoresize: "off", settings_autoheight: "off", settings_slideshow: "off", settings_pauseonrollover: "off", settings_usethumbarrows: 'off', transition_strips_x: 10, transition_strips_y: 5, arrows_normal_alpha: 1, arrows_roll_alpha: 0,3, thumbs_normal_alpha: 1, thumbs_roll_alpha: 0,3 }) 
Untuk beberapa alasan ketika saya menambahkan link ke gambar efek zoom tidak lagi fungsi.

Itu karena atribut data initialZoom, data-finalZoom, data-effectTime dll perlu berada di anak langsung dari galeri div. Misalnya jika Anda memiliki

 

efek akan bekerja, tetapi jika Anda menambahkan link seperti ini
 <a href="#"> </a> 
efek tidak akan bekerja. Anda perlu untuk memindahkan atribut untuk anak langsung dari galeri seperti:
 <a href="#" data-finalzoom="2"> </a> 

Kredit

Foto kreatif - http://www.flickr.com/photos/markjsebastian/

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

Properties

Dibuat:
2 Agustus 10

Pembaharuan terakhir:
N / A

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

Termasuk file:
JavaScript JS, HTML, CSS

Software Versi:
jQuery

Kata kunci

eCommerce, eCommerce, Semua barang, panah, navigasi kustom, Efek, galeri, gambar, ken membakar, nomor, panci, dukungan gambar, alat pemutar, slideshow, thumbnail, transisi, Dukungan video, zoom