Tips Dan Trik Seputar Bisnis Online dan Internet Marketing

Cara Praktis menggabungkan Jquery dengan HTML

cara praktis menggabungkan jquery dengan htmlSeperti anda ketahui bahwa jquery memudahkan untuk membuat website anda nampak dinamis dan atraktif tanpa perlu menggunakan animasi flash lagi yang memberatkan server anda, saat ini saya mau membagi kepada anda semua bagaimana cara termudah dan praktis untuk menggabungkan file Jquery dengan html yang anda download dari www.jquery.com kedalam halaman website anda.

Berikut ini caranya supaya anda lebih mudah untuk memahaminya…

Jika anda sudah memahami menggabungkan atau membuat link CSS dengan HTML maka menggabungkan Jquery dengan html caranya mirip dengan menggabungkan CSS dengan HTML, jika anda belum memahaminya silahkan anda buka postingan saya tentang menggabungkan CSS dengan HTML .

Setelah anda mendownload dan membukanya, maka selain file JS anda juga mendapatkan file CSS serta untuk demonya , jika belum mendownload,silahkan anda mendownloadnya disini .

Oke ..saya mau ambil contoh untuk Jquery seperti berikut ini disini.

Silahkan anda ketikkan code berikut ini sebelum tag …</head> :

<link rel=”stylesheet” type=”text/css” href=”scrollable-gallery-with-tooltips_files/standalone.css”>

<script src=”scrollable-gallery-with-tooltips_files/jquery.js”></script>

Catatan : untuk link href menyesuaikan dimana anda menaruh folder yang didalamnya sudah anda isi denga file Jquery dan CSS.

Anda sudah menggabungkan file CSS da Jquery ke dalaman halaman website anda.

Berikut script lengkapnya :

<html><head>

<link rel=”stylesheet” type=”text/css” href=”scrollable-gallery-with-tooltips_files/standalone.css”>

<title>jQuery Tools standalone demo</title>

<!– Full version of jQuery Tools + jQuery 1.3.2 –>
<script src=”scrollable-gallery-with-tooltips_files/jquery.js”></script>

<!– without body tag IE may have unprodictable behaviours –>
</head><body>

<!– now that jQuery Tools is included we can begin with the actual demo –>

<!– here we use separate stylesheets. you should definitely combine yours into a single file! –>

<!– scrollable styling –>
<link rel=”stylesheet” type=”text/css” href=”scrollable-gallery-with-tooltips_files/scrollable-horizontal.css”>
<link rel=”stylesheet” type=”text/css” href=”scrollable-gallery-with-tooltips_files/scrollable-buttons.css”>

<!– overlay styling –>
<link rel=”stylesheet” type=”text/css” href=”scrollable-gallery-with-tooltips_files/overlay-basic.css”>

<!– gallery styling –>
<link rel=”stylesheet” type=”text/css” href=”scrollable-gallery-with-tooltips_files/overlay-gallery.css”>
<!– tooltip styling –>
<style>
/*** override styling in external stylesheets ***/
/* remove margins from the image */
.items img {
margin:0;
}
/* make A tags our floating scrollable items */
.items a {
display:block;
float:left;
margin:20px 15px;
}
/* tooltip styling */
#tooltip {
display:none;
background:url(scrollable-gallery-with-tooltips_files/black_arrow.png);
font-size:12px;
height:70px;
width:160px;
padding:25px;
color:#fff;
}
/* scrollable should not disable gallery navigation */
#gallery .disabled {
visibility:visible !important;
}
#gallery .inactive {
visibility:hidden !important;
}
</style>
<!– “previous page” action –>
<a></a>
<!– root element for scrollable –>
<div>

<!– root element for the items –>
<div>

<a class=”” href=”scrollable-gallery-with-tooltips_files/321464099_a7cfcb95cf.jpg” title=”Back view”>
<img src=”scrollable-gallery-with-tooltips_files/321464099_a7cfcb95cf_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/2765571978_43771e81eb.jpg” title=”From south north”>
<img src=”scrollable-gallery-with-tooltips_files/2765571978_43771e81eb_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/244441862_08ec9b6b49.jpg” title=”View from the pool”>
<img src=”scrollable-gallery-with-tooltips_files/244441862_08ec9b6b49_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/66523124_b468cf4978.jpg” title=”Granite stones”>
<img src=”scrollable-gallery-with-tooltips_files/66523124_b468cf4978_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/399223606_b875ddf797.jpg” title=”The bronze statue”>
<img src=”scrollable-gallery-with-tooltips_files/399223606_b875ddf797_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/1118933512_5ea1fe8f41.jpg” title=”Marble walls”>
<img src=”scrollable-gallery-with-tooltips_files/1118933512_5ea1fe8f41_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/321464104_c010dbf34c.jpg” title=”Statue again”>
<img src=”scrollable-gallery-with-tooltips_files/321464104_c010dbf34c_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/3445879840_7ca4b491e9.jpg” title=”Monumental walls”>
<img src=”scrollable-gallery-with-tooltips_files/3445879840_7ca4b491e9_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/399232237_6928a527c1.jpg” title=”Water view”>
<img src=”scrollable-gallery-with-tooltips_files/399232237_6928a527c1_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/117346182_1fded507fa.jpg” title=”Famous chairs”>
<img src=”scrollable-gallery-with-tooltips_files/117346182_1fded507fa_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/3323896446_3b87a8bf75.jpg” title=”A lightning effect”>
<img src=”scrollable-gallery-with-tooltips_files/3323896446_3b87a8bf75_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/3323897466_e61624f6de.jpg” title=”Concrete corridors”>
<img src=”scrollable-gallery-with-tooltips_files/3323897466_e61624f6de_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/3323058611_d35c894fab.jpg” title=”Heavy red curtain”>
<img src=”scrollable-gallery-with-tooltips_files/3323058611_d35c894fab_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/3323893254_3183671257.jpg” title=”Large tropical trees”>
<img src=”scrollable-gallery-with-tooltips_files/3323893254_3183671257_t.jpg”></a>

<a class=”” href=”scrollable-gallery-with-tooltips_files/3323893148_8318838fbd.jpg” title=”Lot’s of tourists”>
<img src=”scrollable-gallery-with-tooltips_files/3323893148_8318838fbd_t.jpg”></a>
</div>
</div>
<div style=”position: absolute; top: 59px; left: 606px; display: none;” id=”tooltip”>The bronze statue</div>
<!– “next page” action –>
<a></a>
<br clear=”all”>
<!– overlay element –>
<div id=”gallery”><div></div>

<!– “previous image” action –>
<a style=”opacity: 0.8;”>prev</a>

<!– “next image” action –>
<a style=”opacity: 0.8;”>next</a>

<!– image information –>
<div style=”opacity: 0.8;”></div>

<!– load indicator (animated gif) –>
<img src=”scrollable-gallery-with-tooltips_files/loading.gif”>
</div>

<!– javascript coding –>
<script>

$(document).ready(function() {
/* chained call: scrollable().find(“a”).tooltip().overlay().gallery(); */

$(“.scrollable”).scrollable().find(“a”).tooltip({

// use this single tooltip element for all trigger elements
tip: ‘#tooltip’

}).overlay({

// each trigger uses the same overlay with id “gallery”
target: ‘#gallery’,

// optional exposing effect with custom color
expose: ‘#111’,

// clicking outside the overlay does not close it
closeOnClick: false

// gallery plugin
}).gallery({

// do not use the same disabled class name as scrollable
disabledClass: ‘inactive’
});
});
</script>
</body></html>

Dan anda simpan dengan eksitensi html dan jangan lupa membuat folder sesuai denngan link yang anda buat diatas.

Tinggal anda membuat gambar untuk di tampilkan di taruh kedalam folder yang sama.

Jika anda masih kesulitan , anda bisa mendownload Source file seperti contohnya disini.

Semoga postingan tentang cara menggabungkan Jquery dengan HTML ini berguna untuk anda semua.

Jika anda tambahan, anda bisa memberi komentar dibawah ini


Berlangganan Artikel ?

Silahkan masukkan Email anda sekarang

Kiriman oleh : Google FeedBurner

 

7 Comments
  1. kalau ekstensinya .php gimana ya.., saya coba tidak bisa…

  2. Kalau pakai ekstensi php, mesti menjalankan dengan apache atau server yang lain,atau bisa install XAMPP /WAMP

  3. Ini topik yg sy cari
    pertanyaan saya :

    katakanlah sy simpan file jquery dan css di folder A..
    jadi

    apa betul demikian ?

    pertanyaan ke 2.
    “Dan anda simpan dengan eksitensi html dan jangan lupa membuat folder sesuai denngan link yang anda buat diatas”

    katakanlah saya save berupa contoh.html, file contoh.html ini saya taruh di folder A ?
    apa maksud dari membuat folder sesuai dengan link yang dibuat di atas ? sy tidak paham

    terima kasih. maaf jika pertanyaan saya terlalu panjang. baru belajar sih

  4. Terimakasih Website yang penuh dengan ilmu…

  5. terima kasih infonya mas 🙂

  6. terima kasih tutorialnya mas, saya masih kurang paham tapi 😀

Leave a Reply



*