penggunaan JQuery
-
Upload
fajar-satrio -
Category
Education
-
view
355 -
download
9
description
Transcript of penggunaan JQuery
PENGGUNAAN JQUERY
Makalah ini disusun untuk memenuhi tugas mata kuliah
Teknologi Informasi dan Komunikasi
Dosen Pengampu: Septia Lutfi, S. Kom, M. Kom
Disusun Oleh:
Fajar Satrio
NIM. 1102412060
Rombel 3
JURUSAN KURIKULUM DAN TEKNOLOGI PENDIDIKAN
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS NEGERI SEMARANG
2013
KATA PENGANTAR
Assalamualaikum Wr.Wb.
Puji syukur senantiasa saya hanturkan kepada Allah SWT yang telah
melimpahkan rahmat dan hidayah-Nya sehingga saya dapat
menyelesaikan makalah dengan judul “Penggunaan JQuery” ini tepat pada
waktunya, untuk memenuhi salah satu tugas mata kuliah Teknologi
Informasi dan Komunikasi. Ada banyak kesulitan dalam penyelesaian tugas
ini, namun berkat bantuan dari berbagai pihak, akhirnya kesulitan itu dapat
saya atasi. Oleh karena itu, dengan segala kerendahan hati, saya
mengucapkan terima kasih kepada semua pihak yang telah membantu
dalam proses penyelesaian makalah ini. Dengan makalah ini, saya harap
semoga makalah ini dapat bermanfaat bagi kita semua, dan mampu
memberikan informasi tentang penggunaan JQuery Library.
Masih banyak kekurangan dalam penyusunan makalah ini. Oleh
karena itu, saya mengharapkan kritik dan saran yang membangun dari
pembaca agar nantinya bisa menjadi pembelajaran yang baik bagi saya
dan dapat membuat makalah yang lebih baik lagi.
Atas kritik dan saran anda saya mengucapkan terima kasih.
Wassalamualaikum Wr.Wb
Semarang, 25 November 2013
Fajar Satrio
DAFTAR ISI
Kata Pengantar
Daftar Isi
BAB I PENDAHULUAN
A. Latar Belakang
B. Rumusan Masalah
C. Tujuan
BAB II PEMBAHASAN
A. Sejarah dan Pengertian
1. Sejarah
2. Pengertian
B. JQuery Selector
1. JQuery Element Selectors
2. JQuery Attribute Selectors
C. JQuery Event
D. JQuery Effect
E. Macam-macam JQuery Sledeshow
1. JQZoom Evolution
2. JQuery EOGallery
3. JQuery Dynamic Drive Image Gallery
a. Lightbox image viewer
b. Lightbox Gambar penampil v2.03a
c. Facebox Image and Content Viewer
d. Simple Control Gallery
e. Touch Image Gallery
f. Tooltip Description
g. Photo Album Script
h. PHP Photo Album Script
i. Langkah Carousel Viewer
j. FrogJS Gallery
k. CMotion Gallery
l. CMotion Gallery II
m. Thumbnail Image Viewer
n. Thumbnail Image Viewer II
o. Choice Dynamic Image
4. JQuery Flick Gallery
5. JQuery Galleria
6. JQuery Gallery View
BAB III PENUTUP
Daftar Pustaka
BAB I
PENDAHULUAN
A. Latar Belakang
JQuery adalah javascript Library yaitu kumpulan kode / fungsi
Javascript siap pakai, sehingga mempermudah dan mempercepat kita
dalam membuat kode Javascript secara standar. Apabila kita membuat
kode Javascript, maka diperlukan kode yang cukup panjang, bahkan
terkadang sangat sulit dipahami, misalnya fungsi Javascript untuk
membuat stripe (warna selang-seling) pada baris suatu tabel.
Nah, disinilah peran jQuery sebagai Javascript Library, dimana
kita bisa langsung memanggil fungsi yang terdapat di dalam Library
tersebut, menariknya kita hanya memerlukan satu/dua baris untuk
membuat warna selang-seling pada suatu tabel.
Atas alasan banyaknya ketidaktahuan mengenai JQuery, selain
untuk memenuhi tugas mata kuliah Teknologi Informasi dan
Komunikasi, maka saya berusaha menyusun makalah ini dengan
segenap kemampuan yang saya miliki.
B. Rumusan Masalah
1. Bagaimana sejarah perkembangan JQuery?
2. Apa itu JQuery?
3. Apa yang dimaksud dengan JQuery selector?
4. Bagaimana menggunakan JQuery Event?
5. Bagaimana menggunakan JQuery Effect?
6. Jelaskan macam-macam JQuery Slideshow?
C. Tujuan
1. Mengetahui bagaimana sejarah perkembangan JQuery.
2. Mengenal apa yang disebut JQuery.
3. Mengerti tentang JQuery Selector.
4. Menguasai bagaimana cara menggunakan JQuery Event.
5. Mengerti dan menguasai bagaimana cara menggunakan JQuery
Effect
6. Mengetahui dan memahami JQuery Slideshow
BAB II
PEMBAHASAN
A. Sejarah dan Pengertian
1. Sejarah
Semenjak diluncurkan pertama kali pada tahun 2006 oleh
john Resig, jQuery sudah menarik perhatian mayoritas developer
web. Buktinya, dalam tahun-tahun sesudahnya jQuery sudah banyak
digunakan oleh website - website ternama di dunia seperti Google,
Microsoft, intel , Nokia, Oracle , IBM, DELL, BBC, NBC, ESPN, EAPN,
EA Sport, Twitter, Facebook, Amazon, Techorati, Youtobe Apple,
Wordpress, Mozila, Netflix , Digg, Time, dan masih banyak lagi.
Bahkan website lokalpun tidak mau ketinggalan, Lihat saja Detik,
Studio 21 (21cineplex.com). Indosiar, Vivanews, Kompas, termasuk
Pincuran.com tentunya dan sebagainya.
Jquery Pertama kali dikembangkan oleh Jhon Resig pertama
kali pada tahun 2005, saat itu dia terinspirasi dari kode Behavior,
ketika itu Jhon merasa kode kode behavior tidak elegan dan bahkan
sangat jelek, kemudian dia mulai memikirkan cara membuat library
yang bagus dan ringan untuk javascript. Resig mencatat di situs
webnya, ia menciptakan jQuery karena ia tidak puas dengan library
yang saat itu tersedia dan merasa bahwa seharusnya framework-
framework tersebut bisa jauh lebih baik dengan mengurangi
”syntactic fluff” dan menambahkan kontrol khusus untuk tindakan-
tindakan yang bersifat umum. Maka lahirlah JQUERY pada 14
januari 2006, dimana dengan penulisan code JQuery jadi lebih
simple, gampang dan tentunya dengan hasil yang memuaskan.
Diluncurkan versi pertama dari Jquery dan sampai sekarang masih
terus dikembangkan dan disempurnakan.
jQuery dengan cepat menemukan komunitas yang
mendukung pengembangan script dan dengan cepat mendapatkan
momentum. Banyak pengembang datang untuk membantu
menyempurnakan librari ini, dan akhirnya menghasilkan rilis stabil
pertama dari jQuery, versi 1.0, pada tanggal 26 Agustus 2006. Sejak
itu, jQuery sudah berkembang ke versi 1.7.1 dan sudah mempunyai
plug-in yang banyak tersedia dari komunitas pengembang. Sebuah
plug-in adalah ekstensi dari jQuery yang bukan bagian dari library
inti.
JQuery yang beralamatkan di http://jquery.com kurang lebih
baru menginjak usia 3 tahun. Akan tetapi, jQuery sebenarnya
bukanlah hal yang baru jika melihar “jeroan”-nya, karena berisi
fungsi-fungsi yang ditulis dengan JavaScript, dan JavaScript itu
sendiri telah diperkenalkan oleh Netscape sejak tahun 1995.
Akan tetapi, tentu jQuery menawarkan fitur-fitur modern
yang siap pakai, walaupun idenya sederhana, yaitu membuat
sebuah library JavaScript, ternyata jQuery mampu menarik
perusahaan-perusahaan besar yang mem-bundling jQuery kedalam
produknya. Nokia akan mengintegrasikan jQuery kedalam platform
web Run-Time, sedangkan Microsoft mengadopsi jQuery kedalam
Visual Studio.
2. Pengertian
jQuery merupakan javascript Library atau kumpulan kode /
fungsi Javascript siap pakai, sehingga mempermudah dan
mempercepat kita dalam membuat kode Javascript. Secara standar,
apabila kita membuat kode Javascript, maka diperlukan kode yang
cukup panjang, bahkan terkadang sangat sulit dipahami, misalnya
fungsi Javascript untuk membuat stripe (warna selang-seling) pada
baris suatu table.
Di sinilah peran JQuery sebagai Javascript Library, dimana
kita dapat langsung memanggil fungsi yang terdapat di dalam
library tersebut, dan hal yang menarik disini adalah kita hanya
membutuhkan satu baris untuk membuat warna selang-seling pada
suatu tabel.
Dengan JQuery, suatu halaman web yang menjadi aplikasi
web, jika dilihat sourcenya, akan terlihat seperti dokumen HTML
biasa, tidak ada kode JavaScript yang terlihat langsung. Teknik
pemrograman web seperti ini disebut sebagai unobstrusive
JavaScript programming.
JQuery memiliki kemampuan-kemampuan istimewa yaitu :
a. Kemudahan mengakses elemen-elemen HTML
b. Memanipulasi elemen HTML
c. Memanipulasi CSS
d. Penanganan event HTML
e. Efek-efek javascript dan animasi
f. Modifikasi HTML DOM
g. AJAX
h. Menyederhanakan kode javascript lainnya
Guna memudahkan pada pemahaman JQuery, sangat
dianjurkan terlebih dahulu paham dan menguasai pengkodean
HTML, CSS dan Javascript. Secara standar, apabila kita membuat
kode javascript, maka diperlukan kode yang sangat panjang. Bahkan
terkadang sangat sulit untuk di pahami. Misalnya, fungsi javascript
untuk membuat stripe (warna selang-seling) pada baris suatu tabel
adalah sebagai berikut :
function stripe (id) {
var even = false;
var evenColor = arguments [1] ? arguments [1] : "#fff";
var oddColor = arguments [2] ? arguments [2] : "#eee";
var table = document.getElementById (id);
if ( ! table) {return;}
var tbodies = table.getElementsByTagName ("tbody");
for (var h = 0; h < tbodies.lenght; h++) {
var trs = tbodies[h].getElementsByTagName("tr");
for (var i = 0; i < trs.lenght; i++) {
if ( ! hasClass(trs[i])) && ! trs[i] . style.backgroundColor) {
var tds = trs[i].getElementsByTagName("td");
for (var j = 0; j < tds.lenght; j++) {
var mytd = tds[j];
if ( ! hasClass(mytd) && ! mytd.style.backgroundColor) {
mytd.style.backgroundColor = even ? evenColor : oddColor;
}
}
}
}
}
}
JQuery juga disebut sebagai sebuah pustaka JavaScript kecil
bersumber terbuka yang menekankan pada interaksi antara
JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di
BarCamp NYC oleh John Resig dan berlisensi ganda di bawah
Lisensi MIT dan GPL. Microsoft dan Nokia telah mengumumkan
akan mengemas JQuery di platform mereka. Microsoft awalnya
mengadopsinya dalam Visual Studio untuk digunakan dalam
ASP.NET AJAX dan ASP.NET MVC Framework.
Bukan itu saja JQuery juga disebut sebagai library Javascript
yang gratis dan open source. Oleh karenanya JQuery dapat
digunakan dengan bebas untuk keperluan pengembangan website.
Tanpa library seperti jQuery, menerapkan Javascript mungkin akan
lebih sulit, terutama untuk pemula yang baru belajar Javascript.
Plugin tambahan seperti JQuery UI (user interface) semakin
memudahkan pengguna untuk mengembangkan website yang
cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang
makin memperkaya kemampuan jQuery.
Sebenernya, JQuery akan terasa asing jika kita belum
mengenal HTML dan JavaScript (JS). Jadi akan lebih baik apa bila
sebelum belajar JQuery, pahami terlebih dahulu konsep HTML (dan
PHP) dan JS baru belajar JQuery. JQuery disebut-sebut sebagai
salah satu library JS. Jika di PHP kita mengenal framework, maka
JQuery dapat dianggap salah satu “framework”nya JS.
Pada kenyataannya jarang sekali sebuah situs dibuat murni
JQuery. Biasanya JQuery diposisikan seperti sebuah ‘function’ atau
class untuk di”tempel”kan pada sebuah web/aplikasi berbasis HTML
atau PHP.
Sekilas mengenai apa itu AJAX, Istilah AJAX pertama kali
dikemukakan oleh Jesse James Garrett dalam artikelnya yang
berjudul AJAX: A New Approach to Web Applications. Dalam artikel
tersebut ia mengatakan bahwa AJAX sebenarnya bukanlah
teknologi pemrograman web yang berdiri sendiri tetapi kombinasi
dari beberapa teknologi web yang sudah lebih dulu populer, yaitu
XHTML/CSS, Document Object Model (DOM), XMLHttpRequest, dan
JavaScript.
Inti dari library jQuery sebenarnya adalah fungsi jQuery
(jQuery Function ($)). Fungsi ini adalah jantung dan jiwa dari jQuery
dan digunakan dalam setiap baris kode ketika jQuery
diimplementasikan. Sebagian besar developer dalam
pengimplementasian (penerapan) jQuery menggunakan shortcut $()
sebagai pengganti dari sintaks jQuery(). Hal ini untuk meringkas
kode, seperti semboyan dari jQuery sendiri, write Less Do More
Library JavaScript tertentu juga menggunakan fungsi $(),
sehingga konflik mungkin dapat terjadi ketika kita mencoba untuk
menggunakan lebih dari satu library JavaScript secara bersamaan.
jQuery menyediakan fungsi khusus untuk mencegah situasi ini
dengan jQuery.noConflict(). Contoh script JQuery adalah sebagai
berikut:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//letak menulis coding jquery
</script>
</head>
</html>
B. JQuery Selector
Di dalam JQuery juga terdapat selector, selectors
memungkinkan Anda untuk memanipulasi elemen HTML sebagai
kelompok atau sebagai elemen tunggal. Pada penjelasan sebelumnya
kita telah melihat contoh cara memilih elemen HTML menggunakan
jQuery.
JQuery element selectors dan attribute selectors
memungkinkan Anda untuk memilih elemen HTML (atau kelompok
elemen) dengan nama tag, nama atribut atau konten. Selectors
memungkinkan Anda untuk memanipulasi elemen HTML sebagai
kelompok atau sebagai elemen tunggal.
1. JQuery Element Selectors, jQuery mirip CSS dalam hal memilih
elemen HTML. Berikut contohnya :
$("p") memilih semua elemen <p>
$("p.intro") memilih semua elemen <p> yang mempunyai
class="intro".
$("p#demo") memilih elemen <p> yang mempunyai id="demo".
2. JQuery Attribute Selectors, JQuery mirip XPath dalam hal memilih
elemen berdasarkan atribut yang ada. Berikut contohnya :
$("[href]") memilih semua elemen dengan atribut href.
$("[href='#']") memilih semua elemen dengan atribut href
bernilai="#".
$("[href!='#']") memilih semua elemen dengan atribut href dengan
nilai bukan sama dengan "#".
$("[href$='.jpg']") memilih semua elemen dengan atribut href yang
mengandung ".jpg".
Berikut ada beberapa contoh JQuery Selector:
Selector Contoh Yang Dipilih
* $("*") Semua elemen
#id $("#lastname") Elemen yang mempunyai
id=lastname
.class $(".intro") Semua elemen yang
mempunyai class="intro"
element $("p") Semua elemen <p>
.class.class $(".intro.demo") Semua elemen yang
mempunyai class=intro dan
class=demo
:first $("p:first") Elemen <p> yang pertama
:last $("p:last") Elemen <p> yang terakhir
:even $("tr:even") Semua elemen <tr> yang
genap
:odd $("tr:odd") Semua elemen <tr> yang ganjil
:eq(index) $("ul li:eq(3)") Elemen ke-empat dari suatu list
(index starts at 0)
:gt(no) $("ul li:gt(3)") Elemen-elemen dari suatu list
dengan index lebih besar dari 3
:lt(no) $("ul li:lt(3)") Elemen-elemen dari suatu list
dengan index kecil dari 3
:not(selector) $("input:not(:em
pty)")
Semua input elemen yang tidak
kosong
:header $(":header") Semua elemen header
<h1><h2>...
:animated Semua elemen animasi
:contains(text) $(":contains('W3S
chools')")
Semua elemen yang
mengandung teks ‘W3Schools’
:empty $(":empty") Semua elemen yang tidak
mempunyai child (elements)
nodes
:hidden $("p:hidden") Semua elemen <p> yang
tersembunyi
s1,s2,s3 $("th,td,.intro")
Semua elemen yang cocok
dengan th, td, .intro
C. JQuery Event
Salah satu kemampuan utama jquery adalah menangani
event. Dalam pemograman jquery, biasanya kode-kode
pemograman diletakkan di dalam penanganan event yang terjadi
pada suatu atau kelompok elemen yang dipilih.
Hampir-hampir mirip dengan Visual Basic, biasanya suatu
kode dijalankan apabila ada sesuatu yang terjadi (event) pada suatu
elemen. Misalnya, kalau ada tombol di klik, maka action atau
kode apa yang dijalankan, apabila ada combox dipilih, kode apa
yang dijalankan, pada contoh jquery sebelumnya :
$(".tombol1").click(function(){
$("p").hide(1000);
});
Kode di atas berarti apabila terjadi event mengklik elemen
yang mempunyai class=’tombol1’, maka lakukan fungsi hide()
terhadap semua element <p>. Berikut daftar table JQuery Event:
Method Description
bind() Add one or more event
handlers to matching
elements
blur() Triggers, or binds a function to
the blur event of selected
elements
change() Triggers, or binds a function to
the change event of selected
elements
click() Triggers, or binds a function to
the click event of selected
elements
dblclick() Triggers, or binds a function to
the dblclick event of selected
elements
delegate() Add one or more event
handlers to current, or future,
specified child elements of the
matching elements
die() Remove all event handlers
added with the live() function
eror() Triggers, or binds a function to
the error event of selected
elements
event.currentTarget The current DOM element
within the event bubbling
phase
event.data Contains the optional data
passed to jQuery.fn.bind when
the current executing handler
was bound
event.isDefaultPrevented() Returns whether
event.preventDefault() was
called for the event object
event.isImmediatePropagationStop
ped()
Returns whether
event.stopImmediatePropagati
on() was called for the event
object
event.isPropagationStopped() Returns whether
event.stopPropagation() was
called for the event object
event.pageX The mouse position relative to
the left edge of the document
event.pageY The mouse position relative to
the top edge of the document
event.preventDefault() Prevents the default action of
the event
event.relatedTarget The other DOM element
involved in the event, if any
event.result This attribute contains the last
value returned by an event
handler that was triggered by
this event, unless the value
was undefined
event.stopImmediatePropagation() Prevents other event handlers
from being called
event.stopPropagation() Prevents the event from
bubbling up the DOM tree,
preventing any parent
handlers from being notified
of the event
event.target The DOM element that
initiated the event
event.timeStamp This attribute returns the
number of milliseconds since
January 1, 1970, when the
event is triggered
event.type Describes the nature of the
event
event.which Which key or button was
pressed for a key or button
event
focus() Triggers, or binds a function to
the focus event of selected
elements
focusin() Binds a function to the focusin
event of selected elements
focusout() Binds a function to the
focusout event of selected
elements
hover() Binds one or two functions to
the hover event of selected
elements
keydown() Triggers, or binds a function to
the keydown event of selected
elements
keypress() Triggers, or binds a function to
the keypress event of selected
elements
keyup() Triggers, or binds a function to
the keyup event of selected
elements
live() Add one or more event
handlers to current, or future,
matching elements
load() Triggers, or binds a function to
the load event of selected
elements
mousedown() Triggers, or binds a function to
the mouse down event of
selected elements
mouseenter() Triggers, or binds a function to
the mouse enter event of
selected elements
mouseleave() Triggers, or binds a function to
the mouse leave event of
selected elements
mousemove() Triggers, or binds a function to
the mouse move event of
selected elements
mouseout() Triggers, or binds a function to
the mouse out event of
selected elements
mouseover() Triggers, or binds a function to
the mouse over event of
selected elements
mouseup() Triggers, or binds a function to
the mouse up event of
selected elements
one() Add one or more event
handlers to matching
elements. This handler can
only be triggered once per
element
ready() Binds a function to the ready
event of a document
(when an HTML document is
ready to use)
resize() Triggers, or binds a function to
the resize event of selected
elements
scroll() Triggers, or binds a function to
the scroll event of selected
elements
select() Triggers, or binds a function to
the select event of selected
elements
submit() Triggers, or binds a function to
the submit event of selected
elements
toggle() Binds two or more functions
to the toggle between for the
click event for selected
elements
trigger() Triggers all events bound to
the selected elements
triggerHandler() Triggers all functions bound to
a specified event for the
selected elements
unbind() Remove an added event
handler from selected
elements
undelegate() Remove an event handler to
selected elements, now or in
the future
unload() Triggers, or binds a function to
the unload event of selected
elements
D. JQuery Effect
Salah satu kemampuan jquery adalah, adanya fungsi-fungsi
efek yang siap pakai. Biasanya untuk membuat efek memudar di
javascript, kita harus membuat kode yang lumayan panjang. Tapi
dengan menggunakan jquery cukup menggunakan fungsi $(selector).
Berikut contoh script JQuery effect:
Method Description
animate() Performs a custom animation (of
a set of CSS properties) for
selected elements
clearQueue() Removes all queued functions
for the selected element
delay() Sets a delay for all queued
functions for the selected
element
dequeue() Runs the next queued functions
for the selected element
fadeIn() Gradually changes the opacity,
for selected elements, from
hidden to visible
fadeOut() Gradually changes the opacity,
for selected elements, from
visible to hidden
fadeTo() Gradually changes the opacity,
for selected elements, to a
specified opacity
fadeToggle()
hide() Hides selected elements
queue() Shows the queued functions for
the selected element
show() Shows hidden selected elements
slideDown() Gradually changes the height, for
selected elements, from hidden
to visible
slideToggle() Toggles between slideUp() and
slideDown() for selected
elements
slideUp() Gradually changes the height, for
selected elements, from visible to
hidden
stop() Stops a running animation on
selected elements
toggle() Toggles between hide() and
show(), or custom functions, for
selected elements
E. Macam-macam Jquery Slideshow
1. JQZoom Evolution
jQzoom adalah script yang besar dan sangat mudah
digunakan untuk memperbesar apa yang Anda inginkan.
Bekerja pada semua browser modern, seperti:
Mozilla, Internet Explorer, Opera mini, Kompas, dan Google Chrome.
JQZoom Evolution dirilis pada tanggal 3 Bulan Mei tahun 2011
Ada beberapa tipe JQZoom evolution, yaitu sebagai berikut:
a. Zoom standar
b. Zoom standar dengan thumbnail
c. Membalikkan zoom
d. Tarik zoom
e. Batin zoom
f. Selalu di zoom
g. Resize, posisi zoom kustom popup, fadeIn, efek fadeout
Berikut cara menggunakan JQZoom Evolution:
Menggunakan jQZoom sangatlah mudah, tetapi Anda perlu
menentukan elemen HTML anchor, yang akan menghasilkan zoom
yang menampilkan sebagian dari gambar yang diperbesar. Caranya
adalah sebagai berikut.
01. <a href="images/BIGIMAGE.JPG" class="MYCLASS" title="
MYTITLE">
02. <img src="images/SMALLIMAGE.JPG" title="IMAGE TIT
LE">
03. </a>
04.
01. <a href="http://www.mind-
projects.it/projects/jqzoom/images/BIGIMAGE.JPG" clas
s="MYCLASS" title="MYTITLE">
02. <img src="SMALLIMAGE.JPG" title="IMAGE TITLE">
03. </a>
04.
Unsur jangkar mencakup gambar kecil yang ingin Anda
zoom. Dengan skema ini elemen dan basis yang diperlukan adalah:
SMALLIMAGE.JPG: Merupakan gambar kecil yang ingin anda
tampilkan.
BIGIMAGE.JPG: Merupakan gambar besar yang akan
ditampilkan dengan JQZoom.
MyClass: Merupakan kelas jangkar, yang akan digunakan untuk
instantiate script jQZoom dengan semua elemen yang cocok
dengan kelas ini (Anda dapat menggunakan ID juga).
MYTITLE / IMAGE JUDUL: Judul jangkar dan / atau judul yang
akan digunakan untuk menampilkan judul zoom dekat dengan
jQZoom Jendela gambar.
PERHATIKAN: SMALLIMAGE harus menjadi versione skala dari
BIGIMAGE tersebut.
Sekarang load plugin pada beban jendela.
01. <span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">$(document).ready(function(){</span> $ (
Document). Ready (function () {</span>
02. <span class="notranslate" onmouseover="_tipon(thi
s)" onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">$('.MYCLASS').jqzoom();</span> $ ('MyCla
ss.') Jqzoom ().;</span>
03. <span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">});</span> });</span>
01. <span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">$(document).ready(function(){</span> $ (
Document). Ready (function () {</span>
02. <span class="notranslate" onmouseover="_tipon(thi
s)" onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">$('.MYCLASS').jqzoom();</span> $ ('MyCla
ss.') Jqzoom ().;</span>
03. <span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">});</span> });</span>
Ini akan instantiate jQzoom di default (standar) mode. Anda
dapat menggunakan lebih banyak pilihan (bagian Dokumentasi),
untuk menciptakan efek khusus atau kustom seperti pada contoh
di bawah ini.
01. <span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">$(document).ready(function(){</span> $ (
Document). Ready (function () {</span>
02. <span class="notranslate" onmouseover="_tipon(thi
s)" onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">var options = {</span> Pilihan var = {</
span>
03. <span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">});</span> });</span>
04. <span class="notranslate" onmouseover="_tipon(
this)" onmouseout="_tipoff()"><span class="google-
src-text" style="direction: ltr; text-
align: left">lens:true,</span> Lensa: benar,</span>
05. <span class="notranslate" onmouseover="_tipon(
this)" onmouseout="_tipoff()"><span class="google-
src-text" style="direction: ltr; text-
align: left">preloadImages: true,</span> preloadImage
s: benar,</span>
06. <span class="notranslate" onmouseover="_tipon
(this)" onmouseout="_tipoff()"><span class="google-
src-text" style="direction: ltr; text-
align: left">alwaysOn:false,</span> AlwaysOn: palsu,<
/span>
07. <span class="notranslate" onmouseover="_tip
on(this)" onmouseout="_tipoff()"><span class="google-
src-text" style="direction: ltr; text-
align: left">zoomWidth: 300,</span> zoomWidth: 300,</
span>
08. <span class="notranslate" onmouseover="_tip
on(this)" onmouseout="_tipoff()"><span class="google-
src-text" style="direction: ltr; text-
align: left">zoomHeight: 250,</span> zoomHeight: 250,
</span>
09. <span class="notranslate" onmouseover="_ti
pon(this)" onmouseout="_tipoff()"><span class="google
-src-text" style="direction: ltr; text-
align: left">xOffset:90,</span> xOffset: 90,</span>
10. <span class="notranslate" onmouseover="_tip
on(this)" onmouseout="_tipoff()"><span class="google-
src-text" style="direction: ltr; text-
align: left">yOffset:30,</span> yOffset: 30,</span>
11. <span class="notranslate" onmouseover="_tip
on(this)" onmouseout="_tipoff()"><span class="google-
src-text" style="direction: ltr; text-
align: left">position:'left'</span> Posisi: 'kiri'</s
pan>
12. <span class="notranslate" onmouseover="_tip
on(this)" onmouseout="_tipoff()"><span class="google-
src-text" style="direction: ltr; text-
align: left">//...MORE OPTIONS</span> / / ... OPSI LE
BIH</span>
13. <span class="notranslate" onmouseover="_tipon(this
)" onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">};</span> };</span>
14. <span class="notranslate" onmouseover="_tipon(this
)" onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">$('.MYCLASS').jqzoom(options);</span> $
('MyClass.') Jqzoom (pilihan);.</span>
15. <span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">});</span> });</span>
01. <span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">$(document).ready(function(){</span> $ (
Document). Ready (function () {</span>
02. <span class="notranslate" onmouseover="_tipon(thi
s)" onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">var options = {</span> Pilihan var = {</
span>
03. <span class="notranslate" onmouseover="_t
ipon(this)" onmouseout="_tipoff()"><span class="googl
e-src-text" style="direction: ltr; text-
align: left">zoomType: 'standard',</span> zoomType: '
standar',</span>
04. <span class="notranslate" onmouseover="_t
ipon(this)" onmouseout="_tipoff()"><span class="googl
e-src-text" style="direction: ltr; text-
align: left">lens:true,</span> Lensa: benar,</span>
05. <span class="notranslate" onmouseover="_ti
pon(this)" onmouseout="_tipoff()"><span class="google
-src-text" style="direction: ltr; text-
align: left">preloadImages: true,</span> preloadImage
s: benar,</span>
06. <span class="notranslate" onmouseover="_t
ipon(this)" onmouseout="_tipoff()"><span class="googl
e-src-text" style="direction: ltr; text-
align: left">alwaysOn:false,</span> AlwaysOn: palsu,<
/span>
07. <span class="notranslate" onmouseover="_ti
pon(this)" onmouseout="_tipoff()"><span class="google
-src-text" style="direction: ltr; text-
align: left">zoomWidth: 300,</span> zoomWidth: 300,</
span>
08. <span class="notranslate" onmouseover="_t
ipon(this)" onmouseout="_tipoff()"><span class="googl
e-src-text" style="direction: ltr; text-
align: left">zoomHeight: 250,</span> zoomHeight: 250,
</span>
09. <span class="notranslate" onmouseover="_t
ipon(this)" onmouseout="_tipoff()"><span class="googl
e-src-text" style="direction: ltr; text-
align: left">xOffset:90,</span> xOffset: 90,</span>
10. <span class="notranslate" onmouseover="_t
ipon(this)" onmouseout="_tipoff()"><span class="googl
e-src-text" style="direction: ltr; text-
align: left">yOffset:30,</span> yOffset: 30,</span>
11. <span class="notranslate" onmouseover="_t
ipon(this)" onmouseout="_tipoff()"><span class="googl
e-src-text" style="direction: ltr; text-
align: left">position:'left'</span> Posisi: 'kiri'</s
pan>
12. <span class="notranslate" onmouseover="_t
ipon(this)" onmouseout="_tipoff()"><span class="googl
e-src-text" style="direction: ltr; text-
align: left">//...MORE OPTIONS</span> / / ... OPSI LE
BIH</span>
13. <span class="notranslate" onmouseover="_tipon(thi
s)" onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">};</span> };</span>
14. <span class="notranslate" onmouseover="_tipon(thi
s)" onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">$('.MYCLASS').jqzoom(options);</span> $
('MyClass.') Jqzoom (pilihan);.</span>
15. <span class="notranslate" onmouseover="_tipon(this)"
onmouseout="_tipoff()"><span class="google-src-
text" style="direction: ltr; text-
align: left">});</span> });</span>
2. JQuery EOGallery
EOGallery adalah slideshow galeri animasi Web yang dibuat
dengan jQuery . Hanya menggunakan fungsi jQuery Dasar dan Cody
Lindley Thickbox untuk menampilkan gambar yang lebih besar.
EOGallery adalah XHTML 1.0 dan mirip dengan CSS , telah diuji
pada Firefox, Safari, Bahkan Internet Explorer 6 dan bekerja dengan
non-JavaScript dan / atau browser non-CSS. EOGallery dibuat untuk
tujuan pengujian, mungkin ada bug dan system aneh yang tidak
kita ketahui.
3. JQuery Dynamic Drive Image Gallery
JQuery Dynamic Drive Image Gallery terbagi lagi menjadi:
a. Lightbox image viewer
Lightbox JS adalah, skrip mencolok yang berbasis elegan
untuk melapisi versi yang lebih besar dari gambar di halaman
web untuk layar pada saat klik gambar kecil. Ini snap untuk
mengatur dan bekerja pada semua browser modern.
b. Lightbox Gambar penampil v2.03a
Lightbox Image Viewer 2.0 memperluas dari versi
sebelumnya yaitu Lightbox Image Viewer dengan beberapa fitur
baru. Jika versi aslinya sangat bagus untuk melihat gambar
secara individual pada halaman, Lightbox 2.0 mendukung
"pengelompokan" fitur baru yang memungkinkan untuk
mengelompokkan gambar terkait pada halaman untuk browsing.
Efek transisi untuk membesarkan gambar juga berbeda dari versi
sebelumnya. Dan seperti sebelumnya, script ini mendukung
tampilan keterangan opsional, ditambah tambahan preloading
gambar berikutnya ketika gambar dikelompokkan.
c. Facebox Image and Content Viewer
Facebox adalah lightbox Facebook gaya ringan yang dapat
menampilkan gambar, divs, atau seluruh halaman jarak jauh
(melalui Ajax) inline pada halaman dan on demand. Facebox
menggunakan compact JQuery library sebagai mesin sistemnya,
tidak seperti Lightbox v2.0 , yang menggunakan Prototype.
d. Simple Control Gallery
Untuk menambahkan kemampuan menampilkan galeri
gambar saja setelah semua gambar dalam galeri telah dimuat.
Mesin ini membutuhkan jQuery 1.5 +.
e. Touch Image Gallery
Touch Image Gallery adalah galeri gambar sederhana yang
melayani browser mobile dan sejenisnya, dengan menyentuh /
menggesek, selain cara tradisional navigasi. Galeri bisa
dinavigasi dengan cara intuitif seperti berikut:
Dengan menggesekkan ke kiri atau kanan menggunakan jari-
jari di browser mobile, atau menyeret menggunakan mouse.
Dengan menekan atau mengklik baik pada sisi kiri atau kanan
dari galeri.
Dengan mengklik auto yang dihasilkan peluru bawah galeri.
f. Tooltip Description
Penggunaan Tooltip Description adalah dengan Gerakkan
mouse di atas link dan muncul gambar yang telah dipilih
ditambah deskripsi yang sesuai pop up, dengan menggunakan
skrip tooltip. Setiap tooltip didefinisikan dalam naskah kemudian
dikaitkan dengan elemen pada halaman dengan memasukkan "
rel "atribut ke dalamnya. Selain itu, setiap tooltip dapat dengan
mudah berganti-ganti gaya yang membedakan satu dengan
yang lainnya.
g. Photo Album Script
Photo Album skrip sangat ideal untuk menampilkan
beberapa gambar sekaligus, dengan link ke siklus melalui batch
tambahan yang berupa gambar. Tapi itu hanya awal. Berikut
adalah beberapa keterangannya:
Sesuaikan dimensi album yang diinginkan, seperti 3
dengan 2 gambar, 4 dengan 5 gambar dll
Untuk setiap gambar, tentukan deskripsi opsional, link,
dan link target.
Script otomatis membangun link navigasi untuk
memungkinkan pengunjung untuk siklus antara "batch"
gambar dalam album.
Kemampuan untuk menjalankan kode sendiri setiap kali
gambar dalam album diklik (via onselectphoto ). Hal ini
memungkinkan untuk mengubah pengaturan default
ketika pengguna mengklik gambar, seperti memuat link
yang terkait dalam pop up gantinya.
h. PHP Photo Album Script
PHP Photo Album Script adalah Photo Album yang
ditingkatkan script PHPnya untuk mengotomatisasi pengambilan
semua gambar dalam direktori tertentu untuk penunjukan.
Dengan link pagination dihasilkan untuk siklus melalui setiap
halaman. Sebuah script PHP ( getalbumpics.php ) ditempatkan di
direktori gambar yang diinginkan secara otomatis mendapatkan
nama file dari semua gambar di dalamnya dan menciptakan
array JavaScript untuk diproses lebih lanjut oleh script. Ketika
Anda meng-upload atau memodifikasi gambar di dalam
direktori, script secara otomatis akan menyesuaikan.
i. Langkah Carousel Viewer
Langkah Carousel Viewer menampilkan gambar atau HTML
bahkan sisi-sisinya dapat bergulir ke kiri atau kanan. Pengguna
dapat melangkah untuk setiap panel khusus pada permintaan,
atau menelusuri galeri berurutan dengan melangkah melalui x
jumlah panel. Sebuah animasi geser halus digunakan untuk
transisi antar langkah.
j. FrogJS Gallery
FrogJS adalah galeri foto sekuensial yang mendukung
deskripsi opsional dan link untuk masing-masing gambar. Jika
melihat gambar secara berurutan, dengan mengklik thumbnail
gambar sebelumnya dan berikutnya. Setiap slide gambar
didefinisikan sebagai HTML yang biasa terkandung dalam DIV
tag khusus pada halaman, sehingga sangat mudah untuk
menyiapkan opsi yang termasuk deskripsi sesuai dan link.
k. CMotion Gallery
CMotion Image Gallery adalah galeri skrip serbaguna yang
menggunakan input paling intuitif, mouse pengguna untuk
mengontrol itu. Pengguna dapat mengarahkan kedua arah
scrolling gambar dan kecepatan hanya dengan menempatkan
mouse di kedua spektrum dari galeri gambar. Mengklik pada
gambar kemudian dapat memuat versi yang lebih besar dari
gambar sebelumnya, menavigasi ke halaman dan lain-lain. Selain
dari dimensi galeri, kita juga dapat menentukan kecepatan
bergulirnya, dengan script kemudian menciptakan perguliran
dari kecepatan 0-atas dan mendistribusikan secara merata di
galeri. Script ini bekerja di semua browser modern yang DHTML-
IE5 +, NS6 / Firefox 1.0 +, Opera 7 +.
l. CMotion Gallery II
CMotion Galeri II didasarkan pada pendahulunya Cmotion
Gallery skrip, dimodifikasi oleh jscheuer1 untuk orientasi vertical.
Skrip ini menggunakan input perancangan yang paling intuitif,
Mouse pengguna untuk mengontrol aksi bergulirnya halaman.
Pengguna dapat mengarahkan kedua arah scrolling gambar dan
kecepatan hanya dengan menempatkan mouse di kedua
spektrum dari galeri gambar. Mengklik pada gambar kemudian
dapat memuat versi yang lebih besar dari itu, menavigasi ke
halaman dan lain-lain. Selain dari dimensi galeri, kita juga dapat
menentukan kecepatan bergulirnya halaman, dengan script
kemudian menciptakan kecepatan perguliran dari kecepatan 0-
atas dan mendistribusikan secara merata di galeri.
m. Thumbnail Image Viewer
Thumbnail Image Viewer adalah penampil gambar
sederhana yang dapat diterapkan untuk setiap link pada
halaman untuk memuat gambar yang diinginkan dalam bentuk
kecil berdasarkan pada link itu "href" nilai. Cukup memberikan
link dalam pertanyaan baik itu text link atau thumbnail image
link-a rel atribut "thumbnail".
n. Thumbnail Image Viewer II
Serupa dengan fungsi pendahulunya Thumbnail Image
Viewer, script ini dapat menampilkan gambar yang lebih besar
saat thumbnail diklik dan berguling. Ini dapat dimanfaatkan
untuk membiarkan pengunjung meninjau dari banyak gambar
yang kemudian pilih gambar pilihan untuk melihat pada
halaman yang sama. Fitur yang ada dalam Thumbnail Image
Viewer II adalah:
Desain mencolok, mudah diatur dengan hanya
menambah thumbnail link pada halaman "rel"dan" rev
'atribut. Itu saja.
Konfigurasi gambar yang lebih besar yang akan
ditampilkan melalui "klik" atau "mouseover" thumbnail.
Tentukan apakah gambar diperbesar harus dimuat ketika
beban halaman untuk tampilan lebih cepat, atau hanya
download bila diminta untuk menghemat halaman awal
waktu pembukaan.
Gambar diperbesar akan muncul opsional hyperlink.
Dua jenis efek transisi untuk membawa gambar
diperbesar menjadi pandangan yang: "memudar" atau
"mengungkapkan". Transisi juga dapat dinonaktifkan
sama sekali.
Tentukan apakah "title" atribut dari link thumbnail harus
ditampilkan sebagai teks deskripsi di bawah gambar yang
diperbesar.
Tentukan beberapa daerah bagi gambar yang berbeda
untuk ditampilkan.
o. Choice Dynamic Image
Choice Dynamic Image adalah pemilih gambar yang
memungkinkan browser untuk melihat gambar dengan
memilihnya dari daftar seleksi. Ini adalah dinamis dalam bahwa
gambar TIDAK harus menjadi dimensi yang sama, pembatasan
gambar script yang dimiliki pengunjung. Sekarang kita dapat
memiliki galeri gambar dari semua ukuran. Perangkap adalah
gambar diunggah dengan menggunakan DHTML, NS 3 - dan IE
3 -. Browser ini low-end akan mendapatkan pesan peringatan
menginformasikan mereka tentang hal ini ketika surfer mencoba
untuk memilih gambar.
4. JQuery Flick Gallery
FlickrGallery adalah plugin jQuery yang menyediakan cara
untuk menanamkan gambar flickr ke situs web. Fitur ini
membutuhkan jQuery dan style sheet.
5. JQuery Galleria
Galleria adalah gambar kerangka galeri JavaScript yang
menyederhanakan proses menciptakan galeri gambar yang indah
untuk web dan perangkat mobile.
6. JQuery Gallery View
Gallery View adalah upaya untuk menuliskan sebuah plugin
tunggal yang mampu menciptakan berbagai jenis galeri. Tujuan
gallery view adalah untuk menyediakan serangkaian pilihan untuk
pengguna. Pengguna tidak hanya akan dapat menyesuaikan ukuran
foto dan thumbnail, dan kecepatan transisi, tetapi ia juga akan
memiliki kebebasan untuk memilih dari pilihan posisi elemen, gaya
transisi dan fitur lainnya. Berikut contoh opsi-opsi yang ada dalam
Gallery View.
opsi jenis nilai
default deskripsi
transition_speed int 1000 durasi transisi foto animasi dalam
milidetik.
transition_interval int 4000 penundaan antara transisi slideshow
otomatis dalam milidetik.
mengurangi senar 'Ayunan'
metode pelonggaran digunakan
dalam foto dan animasi
thumbnail. setiap metode kustom
pelonggaran dapat digunakan.
show_panels boolean benar
flag untuk beralih tampilan panel
foto utama. diset false untuk
membuat galeri korsel gaya. (tidak
sepenuhnya dilaksanakan)
show_panel_nav boolean benar
flag untuk beralih tampilan
tombol berikutnya dan sebelumnya di
panel galeri.
enable_overlays boolean palsu flag untuk beralih tampilan overlay
gambar informasi.
panel_width int 800 lebar panel gambar dalam piksel.
panel_height int 400 ketinggian panel gambar dalam
piksel.
panel_animation senar 'Memudar'
metode animasi yang digunakan
untuk panel transisi
gambar. Pilihannya adalah
'memudar', 'crossfade', 'slide'
opsi jenis nilai
default deskripsi
panel_scale senar 'Tanaman'
metode skala untuk gambar
panel. Pilihannya adalah 'tanaman',
'cocok'.
overlay_position senar 'Bawah'
posisi lapisan panel
informasi. Pilihannya adalah 'bottom',
'top'
pan_images boolean palsu flag untuk beralih berbasis hambatan
panning gambar panel besar.
pan_style senar 'Drag'
Metode panning digunakan. 'Drag' =
pengguna mengklik dan menyeret
gambar ke dalam panci, 'track' =
gambar secara otomatis panci
berdasarkan posisi mouse
start_frame int 1
Indeks yang menunjukkan image
untuk ditampilkan ketika beban
galeri
show_filmstrip boolean benar flag untuk beralih tampilan navigasi
filmstrip.
show_filmstrip_nav boolean benar flag untuk beralih tampilan tombol
navigasi berbasis filmstrip.
enable_slideshow boolean benar
flag untuk beralih play / pause
button dan kemampuan untuk start /
stop slideshow
autoplay boolean palsu
bendera untuk secara otomatis
memulai slideshow ketika beban
galeri
filmstrip_position senar 'Bawah'
lokasi filmstrip dalam kaitannya
dengan panel. Pilihannya adalah
'top', 'kiri', 'bottom', 'benar'.
opsi jenis nilai
default deskripsi
frame_width int 70 lebar frame filmstrip dalam piksel.
frame_height int 40 ketinggian frame filmstrip dalam
piksel.
frame_opacity mengapung 0.4 opacity default frame filmstrip
(kisaran 0,0-1,0)
frame_scale senar 'Tanaman'
metode skala untuk gambar
bingkai. Pilihannya adalah 'tanaman',
'cocok'.
frame_gap int 5 jarak antara frame dalam pixel.
show_captions boolean palsu
flag untuk beralih tampilan
keterangan frame (dihuni oleh
gambar itu titleatribut).
show_infobar boolean benar flag untuk beralih tampilan gambar
meja bar.
infobar_opacity mengapung 1.0 opacity default infobar (kisaran 0,0-
1,0)
BAB III
PENUTUP
JQuery merupakan suatu web design yang memanfaatkan
kemudahan dalam menulis script library. Kemudahan-kemudahan tersebut
tentu saja tidak terlepas dari keluhan para pengguna web yang
mengatakan bahwa terlalu repot apa bila menulis script dengan
menggunakan javascript.
Dengan dibuatnya makalah ini saya dapat menyampaikan
tentang bagaimana dan apa itu bahasa pemrograman yang berbasis
JQuery. Saya harap makalah ini akan jadi sumber informasi bagi semua
orang yang ingin mengetahui tentang bahasa pemrograman yang berbasis
JQuery.
Demikian saya akhiri makalah ini, tak lupa kritik dan saran yang
membangun demi perbaikan, saya harapkan dari semua pihak.
DAFTAR PUSTAKA
Anonim. (2011). Sejarah JQuery. Diunduh dari http://pengenalan-
jquery.blogspot.com/2011/11/sejarah-jquery.html pada tanggal 21
November 2013.
Rizaldi, Mustafa. (2012). Pengertian Jquery Javascript. Diunduh dari
http://bisnisajidwi.blogspot.com/2012/04/pengertian-jquery-
javascript-library.html pada tanggal 21 November 2013.
Tomy Kurniawan, Muhammad. (2012). Pengenalan Javascript, JQuery, AJAX,
dan CSS. Diunduh dari
http://radeninformatika.blogspot.com/2012/12/makalah-web-
statis.html pada tanggal 21 November 2013.
Anonim. (_____). Macam-macam JQuery. Diunduh dari
http://belajarwebdesign.com/search/macam-macam-jquery/ pada
tanggal 21 November 2013.
Anonim. (_____). JQuery Effect Show() Method. Diunduh dari
http://www.w3schools.com/jquery/eff_show.asp pada tanggal 21
November 2013.
Cheyuz. (2012). Mengenal JQuery. Diunduh dari
http://jagocoding.com/tutorial/16/Mengenal_jQuery_Apa_itu_jQue
ry pada tanggal 21 November 2013.