BUAT GALERI HALAMAN PENUH DENGAN JQUERY | BHIBIT ARIANTO
Change Background of This Blog!


Lihat

 

Kamis, 06 Juni 2013

BUAT GALERI HALAMAN PENUH DENGAN JQUERY

Diposting oleh arieuy pada Kamis, Juni 06, 2013 0 komentar

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>

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)
 
BHIBIT ARIANTO © 2013 Sang Pujangga Cinta 1. Supported by My Software Here and My Store Pujangga