Galeri Media / Tayangan Slide Ken Burns

  • Whatsapp
Galeri Media / Tayangan Slide Ken Burns

Source Code : Galeri Media / Tayangan Slide Ken Burns

Bacaan Lainnya

Versi WordPress

Galeri / Slideshow Ken Burns Media - 1

Galeri / Slideshow Ken Burns Media - 2
Galeri Media Ken Burns / Slideshow - 3
Galeri Media Ken Burns / Tampilan Slide - 4
Galeri / Slideshow Ken Burns Media - 5
Galeri / Slideshow Ken Burns Media - 6

Pembaruan

PERBARUI 2.1 [ 14/06/2011 ]

  • menambahkan contoh autoheight + panggilan api

PERBARUI 2.0 [ 09/06/2011 ]

  • bug tetap
  • berganti nama menjadi Galeri Phoenix – fitur galeri yang sama + lebih banyak lagi
  • menambahkan navigasi gambar mini

pengantar

jQuery Ken Burns Slideshow adalah cara sempurna untuk menampilkan gambar/iklan Anda dengan penuh gaya. Setiap item memiliki waktu tayangan slide terpisah dan Anda dapat mengedit tautan, target, dan banyak pengaturan individual lainnya hanya dengan memodifikasi HTML.

fitur

  • mendukung .PNG, .JPG, .GIF
  • API – panggilan jeda, putar, gotoNext, gotoPrev dari html Anda (di luar galeri)
  • autoheight – opsi untuk mengotomatiskan galeri tergantung pada ketinggian konten
  • mendukung item tak terbatas – putar gambar sebanyak yang Anda inginkan
  • mode slideshow – dengan waktu independen untuk setiap item yang dapat Anda tentukan dalam HTML yang disediakan
  • nilai yang dapat Anda atur untuk setiap item – deskripsi (deskripsi dari atas), initialZoom (nilai apa pun yang Anda inginkan), finalZoom, slideshowTime (waktu rotator spanduk tetap fokus pada item tertentu), waktu efek burn (waktu Anda ingin efeknya diambil ), url (jika tidak ada url yang disetel, item hanya akan berupa gambar tanpa tautan saat diklik), transitionType(easeInSine,linear, dll.), Posisi awal, posisi akhir (pilih dari kiri atas, tengah atas, kanan atas, kiri tengah, tengah tengah, kanan tengah, kiri bawah, tengah bawah, kanan bawah)
  • dapat diubah ukurannya ke ukuran pilihan Anda – semua konten akan diposisikan dengan benar

Kemungkinan posisi panning ( awal dan akhir )

Galeri / Slideshow Ken Burns Media - 7

FAQ

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

Anda tidak dapat mengatur jumlah thumbnail yang ditampilkan per ‘halaman’ karena dihitung secara otomatis dari lebar/tinggi ibu jari dan ruang ibu jari. Jadi cobalah untuk menurunkannya untuk lebih banyak jempol. Juga ada parameter lain “nav_arrow_size:40” – ini adalah ruang yang dialokasikan untuk setiap panah (jadi pada default 80 px dikurangi untuk panah) dan Anda juga dapat menurunkannya untuk lebih banyak jempol.

apakah mungkin untuk menempatkan tautan pada gambar (gambar utama tidak jelas bukan thumbnail)
Ya, tentu, tulis

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

dari pada

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

Saya mencoba menambahkan tautan di deskripsi tetapi skripnya rusak

Mungkin Anda melakukan sesuatu seperti ini

BURUK:

data-description="My link is <a href="http://something">here</a>"

Masalahnya adalah “di dalam href memecah” dari deskripsi data. Solusinya adalah gunakan ‘ alih-alih “

BAIK:

data-description='My link is <a href="http://something">here</a>'

Hai. Bagaimana saya bisa menghentikan geser otomatis phoenixgallery?

yang Anda miliki di 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 tayangan slide cukup tambahkan parameter baru settings_slideshow dan matikan 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 tautan ke gambar, efek zoom tidak lagi berfungsi.

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

< img src="img/1.jpg" data-finalZoom="2"/>

efeknya akan berfungsi, tetapi jika Anda menambahkan tautan seperti ini

<a href="#">< img src="img/1.jpg" data-finalZoom="2"/></a> 

efek tidak akan bekerja. Anda perlu memindahkan atribut ke anak langsung galeri seperti:

<a href="#" data-finalzoom="2">< img src="img/1.jpg" /></a> 

Kredit

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

Pos terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *