Dalam tutorial ini kita akan membuat halaman penuh galeri menakjubkan dengan thumbnail digulir dan preview layar penuh digulir. Idenya adalah untuk memiliki thumbnail bar di bagian bawah halaman yang gulungan secara otomatis ketika pengguna menggerakkan mouse. Ketika thumbnail diklik, bergerak ke tengah halaman dan gambar layar penuh dimuat di latar belakang. Sekarang pengguna dapat bergerak ke atas dan ke bawah dan gambar akan mendapatkan menggulir otomatis, memberinya kesempatan untuk melihat semua gambar. Kami akan menggunakan beberapa CSS3 properti WebKit untuk meningkatkan tampilan dan jQuery untuk fungsi tersebut. Itulah mengapa demo yang terbaik dilihat di Webkit browser seperti Google Chrome atau Apple Safari. Kami akan menggunakan mengagumkan jQuery thumbnail scroller oleh Malihu. Besar Terima kasih kepada dia untuk script ini besar dan halus! Sekali lagi, kami akan menunjukkan beberapa fotografi yang menakjubkan oleh Mark Sebastian. Silakan kunjungi halaman Flickr atau homepage-nya untuk informasi lebih lanjut tentang karyanya. Gambar yang akan kita gunakan adalah dari "The IT Factor" set foto di Flickr. Jadi, mari kita mulai! Contoh Galeri Full Page KLIK di sini,,, CSS ::
<style>
* {
margin: 0;
padding: 0;
}
body {
background: # 212121;
overflow: hidden;
font-family: Arial, Helvetica, / *-160px untuk menyembunyikan * / margin: 0px 0px 30px 0px; height: 130px; padding: 0; -webkit-box-mencerminkan: bawah 5px-webkit-gradien ( linier, kiri atas, kiri bawah, dari (transparan), warna-stop (0.6, transparan), untuk (rgb (18, 18, 18)) ); } # thumbScroller { position: relative; overflow: hidden; } . # thumbScroller kontainer { position: relative; kiri: 0; } # . thumbScroller konten { float: left; } # thumbScroller konten div {. margin: 2px; height: 100%; } # thumbScroller img, img.clone { border: 5px solid # fff; height: 120px; } # thumbScroller 0px 0px 35px-, background: # 000 url (http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/loader.gif) pusat no-repeat url (http://tympanus.net/Tutorials/FullPageImageGallery/images/icons/next.png) pusat tidak mengulang-center; kanan:-50px; } . fp_prev { background: # 000 url (http://tympanus.net / Tutorial / FullPageImageGallery / images / icons / prev.png) pusat no-repeat 1px 1px
SCRIPT ::
Tambahkan Bisnis src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </ script>
<jenis skrip = "text / javascript "src =" http://tympanus.net/Tutorials/FullPageImageGallery/jquery.easing.1.3.js "> </ script> <script type="text/javascript"> $ (window). beban (function () { sliderLeft = $ ('# thumbScroller kontainer.') posisi () kiri,.. Padding = $ ('# outer_container') css ('paddingRight') menggantikan ("px", "");.. sliderWidth = $ ( . lebar jendela) ()-bantalan, . $ ('# thumbScroller') css ('lebar', sliderWidth); var totalContent = 0; . $ ('. # thumbScroller konten') masing-masing (function () { totalContent + = $ . (ini) innerWidth (); $ ('# thumbScroller Lebar kontainer).. ()> SliderWidth) { var mouseCoords = (e.pageX - this.offsetLeft); var mousePercentX = mouseCoords / sliderWidth; var destX = - (((totalContent-(sliderWidth))-sliderWidth) * ( mousePercentX)); var thePosA = mouseCoords-destX, var thePosB = destX-mouseCoords, var animSpeed = 600; / / kemudahan jumlah var easeType = 'easeOutCirc'; if (mouseCoords == destX) { $ ('. # thumbScroller wadah' .) stop (); } else if (mouseCoords> destX) { / / $ ('# thumbScroller kontainer.') css ('kiri',-thePosA);. / / tanpa mengurangi $ ('. # thumbScroller kontainer) .. stop () menghidupkan ({left:-thePosA}, animSpeed, easeType); / / dengan pelonggaran } else if (mouseCoords <destX) { / / $ ('# thumbScroller kontainer.') css ('kiri',. thePosB); / / tanpa berkurang .. $ ('. # thumbScroller wadah') stop () menghidupkan ({kiri: thePosB}, animSpeed, easeType); / / dengan pelonggaran } } }); $ ('# thumbScroller jempol. ') masing-masing {(function (). fadeTo $ (ini) (fadeSpeed, 0,6).; }); var fadeSpeed = 200; $ ('# thumbScroller jempol') berkisar (.. {/ / mouse function () $ ;. (ini) fadeTo (fadeSpeed, 1) }, function () {/ / mouse keluar fadeTo $ (ini) (fadeSpeed, 0,6);. } ); }); . $ (window) resize (function () { . / / $ ('. # thumbScroller wadah') css ('kiri', sliderLeft); / / tanpa berkurang . $ ('. # thumbScroller wadah') stop () menghidupkan ({kiri: sliderLeft}, 400, '. easeOutCirc '); / / dengan JavaScript -> <script type="text/javascript"> $ (function () { / / index jempol saat ini sedang dilihat var saat ini = -1; / / cache beberapa elemen var $ btn_thumbs = $ ('# fp_thumbtoggle') ; var $ loader = $ ('# fp_loading'); var $ btn_next = $ ('# fp_next'); var $ btn_prev = $ ('# fp_prev'); var $ thumbScroller = $ ('# thumbScroller'); / / jumlah total jempol var nmb_thumbs = $ thumbScroller.find ('konten.') panjang,. / / preload jempol var cnt_thumbs = 0; for (var i = 0; i <nmb_thumbs, + + i) { var $ jempol = == Nmb_thumbs) / / menampilkan jempol di bagian bawah halaman showThumbs (2000), .}) attr ('src', $ thumb.find (attr ('src') 'img'));. } / / membuat dokumen digulir / / ketika mouse digerakkan ke atas / bawah / / pengguna akan dapat melihat gambar penuh makeScrollable (); / / mengklik ibu jari ... $ thumbScroller.find ('konten.') mengikat ('klik', function (e) {. var $ content = $ (ini); var $ elem = $ content.find ('img'); / / melacak ibu jari saat diklik / / akan digunakan untuk panah navigasi saat ini = $ content.index () +1; / / mendapatkan posisi dari diklik jempol var pos_left = $ elem.offset () kiri,. . var pos_top = $ elem.offset () atas; / / clone ibu jari dan tempat / / clone di atasnya var $ clone = $ elem.clone () addClass ('clone'). css ({. 'posisi': 'fixed', 'kiri': pos_left + ' px ', 'top': pos_top + '' px . insertAfter ($ (}) 'BODY')); . var windoww = $ (window) Lebar (); . var windowH = $ (window) tinggi (); / / menghidupkan clone ke tengah halaman $ clone.stop () menghidupkan ({. 'kiri': windoww / 2 + 'px', 'top': windowH / 2 + 'px', 'margin-left': - $ clone.width () / 2 -5 + 'px', 'margin-top': - $ clone.height () / 2 -5 + 'px' }, 500, function () { var $ theClone = $ (ini); var rasio = $ clone.width () / 120; var final_w = 400 * rasio; $ loader.show (); / / memperluas clone ketika gambar besar dimuat $ ('<img class = "fp_preview" /> '.) beban (function () { var $ newimg = $ (ini); var $ currImage = $ ('# fp_gallery') anak-anak. ('img: pertama'); $ newimg.insertBefore ($ currImage); $ loader.hide (); / / memperluas clone $ theClone.animate ({ 'opacity': 0, 'top': windowH / 2 + 'px', 'kiri': windoww / 2 + 'px', 'margin- top ':'-200px ', 'margin-left':-final_w / 2 + 'px', 'lebar': final_w + 'px', 'tinggi': '400px ' }, 1000, function () {$ ( . ini) menghapus ();}); / / sekarang kita memiliki dua gambar besar di halaman / / fadeOut yang lama sehingga yang baru akan ditampilkan $ currImage.fadeOut (2000, function () { $ (ini). hapus (); }); / / menampilkan navigasi panah showNav (); }) attr ('src', $ elem.attr ('alt'));. }); / / menyembunyikan jempol kontainer hideThumbs (); e.preventDefault (); }); / / klik pada "show jempol" / / menampilkan wadah jempol dan menyembunyikan / / panah navigasi $ btn_thumbs.bind ('klik', function () { showThumbs (500); hideNav (); }); fungsi hideThumbs () { . $ ('# outer_container') stop () menghidupkan ({'bottom':. '-160px'}, 500); showThumbsBtn (); } function hideThumbsBtn () { $ btn_thumbs.stop () menghidupkan ({'bottom': '-50px'}, 500);. } function showThumbsBtn () { . $ btn_thumbs.stop () menghidupkan ({'bottom': '0 px ' }, 500); } function untuk menavigasi melalui serangkaian gambar $ btn_next.bind ('klik', showNext); $ btn_prev.bind ('klik', showPrev); / / tujuannya adalah untuk memuat gambar baru, / / tempatkan sebelum yang lama dan fadeOut yang berumur satu / / kita menggunakan variabel saat ini untuk melacak yang / / image datang berikutnya / sebelum fungsi showNext () { + + saat ini, var $ e_next = $ thumbScroller.find ('konten:. n-anak (' + + saat ini ')'); if ($ e_next.length == 0) { current = 1; $ e_next = $ thumbScroller.find ('konten: n-anak (.' + saat + ')'); } $ loader. tampilkan (); . $ ('<img class="fp_preview"/>') beban (function () { var $ newimg = $ (ini); var $ currImage = showPrev () { - saat ini, var $ e_next = $ thumbScroller.find ('konten:. n-anak (' + saat + ')'); if ($ e_next.length == 0) { current = nmb_thumbs; $ e_next = $ thumbScroller.find ('konten: n-anak (.' + saat + ')'); } $ loader.show (); $ ('<img class="fp_preview"/>') beban (function (). { var $ newimg = $ (ini); var $ currImage = makeScrollable () { $ (document) mengikat ('mousemove', function (e) {. var atas = (e.pageY - $ (document) scrollTop () / 2);. $ (document) scrollTop (atas);. }); } }); </ script>
HTML ::
<div id="fp_gallery" class="fp_gallery">
<img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/1.jpg" alt = "" class = "fp_preview" style = "display: none; "/>
<div class="fp_overlay"> </ div>
<div id="fp_loading" class="fp_loading"> </ div>
<div id="fp_next" class="fp_next"> </ div >
<div id="fp_prev" class="fp_prev"> </ div>
<div id="outer_container">
<div id="thumbScroller">
<div class="container">
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/1.jpg" alt = "http://tympanus.net/Tutorials/FullPageImageGallery / images/1.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = " http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/2.jpg "alt =" http://tympanus.net/Tutorials/FullPageImageGallery/images/2.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/ 3.jpg "alt =" http://tympanus.net/Tutorials/FullPageImageGallery/images/3.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class = "isi ">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/4.jpg" alt = "http://tympanus.net/Tutorials / FullPageImageGallery/images/4.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/5.jpg" alt = "http://tympanus.net/Tutorials/FullPageImageGallery/images/5.jpg" class = "thumb" /> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/ thumbs/6.jpg "alt =" http://tympanus.net/Tutorials/FullPageImageGallery/images/6.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class = "konten">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/7.jpg" alt = "http://tympanus.net / Tutorials/FullPageImageGallery/images/7.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> < img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/8.jpg" alt = "http://tympanus.net/Tutorials/FullPageImageGallery/images/8.jpg" class = "thumb" /> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/ images/thumbs/9.jpg "alt =" http://tympanus.net/Tutorials/FullPageImageGallery/images/9.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class = "isi">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/10.jpg" alt = "http://tympanus .net/Tutorials/FullPageImageGallery/images/10.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href = "#" > <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/11.jpg" alt = "http://tympanus.net/Tutorials/FullPageImageGallery/images/11.jpg" class = " thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/ FullPageImageGallery/images/thumbs/12.jpg "alt =" http://tympanus.net/Tutorials/FullPageImageGallery/images/12.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/13.jpg" alt = "http:/ / tympanus.net/Tutorials/FullPageImageGallery/images/13.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href = " # "> <img src =" http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/14.jpg "alt =" http://tympanus.net/Tutorials/FullPageImageGallery/images/14.jpg "kelas = "thumb" /> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/ Tutorials/FullPageImageGallery/images/thumbs/15.jpg "alt =" http://tympanus.net/Tutorials/FullPageImageGallery/images/15.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/16.jpg" alt = "http :/ / tympanus.net/Tutorials/FullPageImageGallery/images/16.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href = "#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/17.jpg" alt = "http://tympanus.net/Tutorials/FullPageImageGallery/images/17.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus. net/Tutorials/FullPageImageGallery/images/thumbs/18.jpg "alt =" http://tympanus.net/Tutorials/FullPageImageGallery/images/18.jpg "class =" thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/19.jpg" alt = "http://tympanus.net/Tutorials/FullPageImageGallery/images/19.jpg" class = "thumb" /> </ a> </ div>
</ div>
<div class="content">
<div> < a href = "#"> <img src = "http://tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/20.jpg" alt = "http://tympanus.net/Tutorials/FullPageImageGallery/images/20 "class =" jpg. thumb "/> </ a> </ div>
</ div>
<div class="content">
<div> <a href="#"> <img src = "http:// tympanus.net/Tutorials/FullPageImageGallery/images/thumbs/21.jpg "alt =" http://tympanus.net/Tutorials/FullPageImageGallery/images/21.jpg "class =" thumb "/> </ a> </ div>
</ div>
</ div>
</ div>
</ div>
<div id="fp_thumbtoggle" class="fp_thumbtoggle"> Lihat Thumbs </ div>
</ div>
div </ div>
Tidak ada komentar:
Posting Komentar
Salam Sukses