Kesan lapisan pop timbul yang kaya dengan pemalam Jquery Fancybox dengan kod sumber download_jquery

Fancybox ialah pemalam jquery yang sangat baik yang boleh memaparkan kesan lapisan pop timbul yang kaya. Kami sebelum ini telah memperkenalkan kesan lapisan pop timbul fancybox dalam artikel Berbanding dengan fancybox, fancybox mempunyai fungsi yang lebih lengkap Selain memuatkan DIV, gambar, set gambar, data Ajax, ia juga boleh memuatkan filem SWF, halaman iframe, dll. .

Demonstrasi kesan Muat turun kod sumber

Ciri Fancybox:

Boleh menyokong imej, teks html, animasi flash, iframe dan sokongan ajax; Anda boleh menyesuaikan gaya css pemain; Boleh dimainkan secara berkumpulan
Jika pemalam roda tetikus disertakan, fancybox juga boleh menyokong tatal roda tetikus untuk menyelak gambar
pemain fancybox menyokong unjuran, memberikannya rasa tiga dimensi yang lebih.

Sokongan kekunci anak panah papan kekunci dan kekunci ESC.

Tetapan parameter kaya dan panggilan kaedah.

Kebolehskalaan yang kuat.

Bagaimana untuk menggunakan? Artikel ini menggunakan Demo2 dalam DEMO sebagai contoh untuk menerangkan penggunaan fancybox.

1. Tambahkan rujukan javascript dan rujukan fail css

<link rel="stylesheet" type="text/css" href="fancybox.css" /> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/fancybox.js"></script> 

2. HTML

<h4>图片集，支持键盘方向键</h4> 
<p> 
 <a rel="group" href="images/b1.jpg" title="图片标题"><img alt="" src="images/s1.gif" /></a> 
 <a rel="group" href="images/b2.jpg" title="图片标题"><img alt="" src="images/s2.gif" /></a> 
 <a rel="group" href="images/b3.jpg" title="蓝天白云绿草"><img alt="" src="images/s3.gif" /></a> 
</p> 

3. Panggil fancybox

Perhatikan bahawa format tetapan parameter kotak fancy ialah: 'kunci':'nilai'. titlePosition: Tetapkan kedudukan paparan tajuk gambar kepada pada gambar. kitaran: Tetapkan mod penyemakan imbas imej kepada penyemakan imbas kitaran. titleFormat: Tetapkan format tajuk gambar, yang boleh memaparkan jumlah bilangan gambar dan susunan gambar semasa.

Senarai parameter utama dan kaedah pemalam fancybox

Parameter/Kaedah	Penerangan	Nilai lalai
Asas
lebar	Tetapkan lebar port bersiri timbul Apabila kandungan adalah swf, iframe atau teks baris tunggal, 'AutoDimensions' hendaklah ditetapkan kepada palsu	560
tinggi	Tetapkan ketinggian port bersiri timbul Apabila kandungan adalah swf, iframe atau teks baris tunggal, 'AutoDimensions' hendaklah ditetapkan kepada palsu	340
kitaran	Sama ada untuk dipaparkan dalam gelung apabila kandungan adalah koleksi gambar.	palsu
centerOnScroll	Tetingkap timbul sentiasa dipusatkan dalam penyemak imbas.	palsu
modal	Sama ada hendak menggunakan tetingkap modal.Apabila ditetapkan kepada benar, hendaklah juga termasuk: 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' ditetapkan kepada palsu dan 'overlayShow' ditetapkan kepada benar	palsu
Kedudukan tajuk	Kedudukan tajuk boleh ditetapkan kepada 'luar', 'dalam' atau 'atas'	'luar'
transitionIn, transitionOut	Mod paparan tetingkap boleh ditetapkan kepada 'anjal', 'pudar' atau 'tiada'	'pudar'
hantar	Kaedah, hantar data imej yang dipotong ke pelayan supaya pelayan boleh menerima parameter untuk pemprosesan, cth: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); });
Kaedah
$.fancybox.showActivity	Tunjukkan animasi pemuatan
$.fancybox.hideActivity	Sembunyikan animasi pemuatan
$.fancybox.close	Tutup tetingkap
$.fancybox.resize	Laraskan ketinggian tetingkap secara automatik agar sesuai dengan kandungan
Berpusat	Sama ada hendak memusatkan pemilihan, iaitu memaparkannya di tengah-tengah bekas.

Kandungan di atas ialah keseluruhan penerangan tentang kesan lapisan pop timbul yang kaya bagi pemalam Fancybox of Jquery dengan muat turun kod sumber.